Most Popular

Diagram
Gantt
Pivot
RichText
Scheduler
SpreadSheet
Vault

UI Components

The DHTMLX library supplies over 20 fully customizable widgets to help you build interfaces of different kinds, nicely present data and work with it. There are also multiple controls and specific features to make your applications good-looking and user-friendly.

Layouts

Layouts help to organize your web page, define its overall look-and-feel. You can arrange the content in columns and rows, divide it into groups and control through navigation or animation.

Accordion
Carousel
Layout
Popup
Tabbar
Windows

Data Components

Data components are used to present data of a specified type on the page. Such components manage the space allocated for their data and provide functionality for its access and configuration.

Chart
DataView
Grid
List
TreeGrid
TreeView

Form-oriented Components

Form-oriented components supply handy means for building and processing forms and interacting with users.

Calendar
ColorPicker
Combo
Editor
Form
Slider

Navigation Components

Navigation components allow you to create navigable items on the page, such as menus and tabs, for redirecting to related pages or performing specific actions on data and elements.

Menu
Ribbon
Sidebar
Toolbar

Server-side Solutions

This list includes ready-to-use server-side solutions for data loading and saving in PHP, Java, .NET, ColdFusion.

DataProcessor
DataStore
ColdFusion
Connector
Java
Connector
.NET
Connector
PHP
Connector

Complex and Macro Components

Task-oriented complex UI components will help you to accomplish a certain purpose much easier. Macro components possess rich select functionality and are useful for work with big datasets and file systems.

Diagram
Gantt
Pivot
RichText
Scheduler
SpreadSheet
Vault
DataSelector
FileSelector

Tools and Helpers

Tools will make your interaction with the library handier and more intuitive. Helpers give an opportunity to add specific features to an application.


Start

Tutorials

This block of documentation presents step-by-step tutorials that focus heavily on fundamental and frequently encountered development questions and needs. It can serve beginners to get acquainted with the library and experienced users to quickly dive into the topic of interest.

Your First App with DHTMLX
This tutorial teaches you fundamental and useful concepts that you will use over and over again while developing apps with DHTMLX.

The main elements of the app: menu, toolbar, grid, form.
Building Web Interfaces with DHTMLX
The tutorial shows you the ways of structuring and designing the user interface. After you finish it, you'll have a simple file manager that allows end users to manage folders of a specified package.

The main elements of the app: toolbar, tree, grid.
Dynamic Apps with DHTMLX
This tutorial teaches you how to build a dynamic and multi-purpose chart with a number of features, such as filtering and grouping.

The main elements of the app: chart, grid, form.

dhtmlxGrid

First Steps with dhtmlxGrid
The tutorial guides you through creating a basic grid on the page. Here you will find out important tips and tricks to start your way of working with dhtmlxGrid.
dhtmlxGrid. Work with Server Side
The tutorial tells you about implementing basic server-side operations in dhtmlxGrid: loading, adding, saving, deleting.

dhtmlxForm

dhtmlxForm. Work with Server Side
The tutorial tells you about implementing basic server-side operations in dhtmlxForm: loading, changing, saving.
Binding a Form to a Grid
This tutorial considers a popular use case of dhtmlxForm: a form bound to a grid. A form will present details of the selected grid's record and allow editing this record in the database.

dhtmlxConnector

Using dhtmlxConnector with the CodeIgniter framework
The tutorial shows how to use the dhtmlxConnector library with the CodeIgniter framework.
Using dhtmlxConnector with the Yii framework
The tutorial shows how to use the dhtmlxConnector library with the Yii framework.
Using dhtmlxConnector with the CakePHP framework
The tutorial shows how to use the dhtmlxConnector library with the CakePHP framework.
Using dhtmlxConnector with the Laravel framework
The tutorial shows how to use the dhtmlxConnector library with the Laravel framework.


Your First App

This tutorial teaches you fundamental and useful concepts that you will use over and over again while developing apps with DHTMLX.

The tutorial highlights many aspects, including:

  • How to add standard DHTMLX components on the page
  • How to organize components on the page
  • How to add filtering possibilities to the app
  • How to populate components with data from the server side
  • How to save data changes made by users on the server
  • How to bind components to make the app working all-in-one

Download the demo app here.

After you finish this tutorial, you'll have a simple contact manager with a list of contacts and an editing form. Buttons in the toolbar of the app allow end users to add new records and delete the existing ones. The main elements of the app: a toolbar, a menu, a grid, a form.


Step 1. Create the App's File

We will start our tutorial with preparing a file for our future app: a simple HTML file that contains source code files of the DHTMLX library.

We will use the standard edition of DHTMLX Suite in the web skin that requires including 2 source files on the page:

  • dhtmlx.js
  • dhtmlx.css
To prepare the app's file:
  1. Download the "dhtmlxSuite " package (link to download).
  2. Create a folder with the name "contact_manager " in the root directory of your local web server.
  3. Find the "codebase " folder in the root of the "dhtmlxSuite " package and extract it to the "contact_manager " folder.
  4. Find the "skins/web/dhtmlx.css " file and copy it to the "codebase " folder (the file will replace the default 'dhtmlx.css' file) to use the 'Web' skin in the app.
  5. Create the "index.html " file in the "contact_manager " folder.
  6. Include the "dhtmlx.js " and "dhtmlx.css " code files to index.html (both source files reside in the "codebase " folder).

    'index.html' file

    <!DOCTYPE html>
<html>
  <head>
    <title>Contact Manager</title>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>     <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">   </head>
  <body>
    <script type="text/javascript">
            //the code of your application
        </script>
  </body>
</html>


Step 2. Specify the Layout

Next, we will specify the layout of our page.

The DHTMLX library has several components to organize a web page. The main of them is dhtmlxLayout. The component allows you to divide the page into columns and rows, where after you can place different elements.

Our application will have the following structure:

  1. Menu.
  2. Toolbar.
  3. Grid with a list of contacts.
  4. Form that presents details of the selected contact.

To specify the app's layout:
  1. Initialize a layout on the page using the dhtmlXLayoutObject() constructor (use the dhtmlxEvent() function to provide your script as a handler of the 'onload' HTML event):

    'index.html' file

    <!DOCTYPE html>
<html>
  <head>
     <title>Contact Manager</title>
     <script src="codebase/dhtmlx.js" type="text/javascript"></script>
     <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
  </head>
  <body>
    <script type="text/javascript">
            dhtmlxEvent(window,"load",function(){             var layout = new dhtmlXLayoutObject(document.body,"2U");         });
        </script>
  </body>
</html>
    The constructor takes 2 parameters: an HTML container for the layout and the layout's pattern. dhtmlxLayout has a big number of predefined patterns that you can choose from. For our markup, we've chosen the one called '2U'.

  2. Specify the following style for the layout's container, to guarantee that the layout will be rendered correctly in the full-screen mode:

    'index.html' file

    <style>
    html, body {
        width: 100%;      /*provides the correct work of a full-screen layout*/
        height: 100%;     /*provides the correct work of a full-screen layout*/
        overflow: hidden; /*hides the default body's space*/
        margin: 0px;      /*hides the body's scrolls*/
    }
</style>
  3. Call the setText() method to set the text in the headers of the cells:

    'index.html' file

    dhtmlxEvent(window,"load",function(){
    var layout = new dhtmlXLayoutObject(document.body,"2U");
    layout.cells("a").setText("Contacts");       layout.cells("b").setText("Contact Details");   });
    To refer to a layout's cell, the cells method is used. The method takes the cell's id as a parameter and returns the cell's object. By default, cells have 1-letter ids taken in the alphabetical order

  4. Call the setWidth() method to set the width of the right cell (the left cell will automatically occupy the remaining width):

    'index.html' file

    dhtmlxEvent(window,"load",function(){
    var layout = new dhtmlXLayoutObject(document.body,"2U");
    layout.cells("a").setText("Contacts");
    layout.cells("b").setText("Contact Details");
    layout.cells("b").setWidth(500); });


Step 3. Add a Menu

Then, we will add a menu to the layout. Something, like this:

We won't provide any handlers for the menu's items - just will place a menu on the page as a part of the overall interface.

To add a menu to the layout, we need to use the dhtmlxMenu component. The component takes data in the XML or JSON format and allows you to attach menu to the whole layout or an individual layout's cell.

dhtmlxMenu, as many other DHTMLX components, uses various images to be rendered on the page. There are 2 types of these images:

  • Source images - mandatory images without which the component won't be rendered. In the "DHTMLX Suite " package, the source images of all the components reside in one folder called "imgs".
  • Custom images - any images, icons you want to display in the component in addition to the mandatory ones (e.g. icons of the menu's items). The custom icons that we will use in our menu, you can find in the icons folder of the demo app.
To attach a menu to the layout:
  1. Call the attachMenu() method to attach a menu to the layout:

    'index.html' file

    dhtmlxEvent(window,"load",function(){
    var layout = new dhtmlXLayoutObject(document.body,"2U");
    layout.cells("a").setText("Contacts");
    layout.cells("b").setText("Contact Details");
    layout.cells("b").setWidth(500);
    var menu = layout.attachMenu();});
  2. Copy the "icons " folder from the demo app to the "contact_manager " folder.
  3. Call the setIconsPath() method, to set the path to the folder with the custom menu's icons:
    menu.setIconsPath("icons/");
  4. Create a subfolder with the name "data " in the "contact_manager " folder.
  5. Create an XML file in the "data " folder and name it "menu.xml ".
  6. Open the "menu.xml " file and add the following code to it:

    'menu.xml' file

    <?xml version="1.0"?>
<menu>
    <item id="fTop" text="File"> //1st item
        <item id="ftNWin" text="New Window"/> //1 sub-item
        <item id="ftPrint" text="Print" enabled="false" imgdis="printer.png"/>
        <item id="fts0" type="separator"/>//'separator' splits level in 2 parts
        <item id="ftQuit" text="Quit"/>
    </item>
    <item id="eTop" text="Edit" enabled="false"/> //2nd item
    <item id="hTop" text="Help" enabled="false"/> //3rd item
</menu>
  7. Call the loadStruct() method to load items specified in the "menu.xml " file to the menu:
    menu.loadStruct("data/menu.xml");


Step 4. Add a Toolbar

Now, it's time for the toolbar. We will add a toolbar that will contain 3 items: "Add", "Delete" and "Help" buttons.

We will provide handlers just for the "Add" and "Delete" buttons. The "Help" button will be added only as a part of the overall interface.

To present toolbars on the page, the DHTMLX library provides the dhtmlxToolbar component which takes data in the XML format.

In the toolbar, we will use a number of custom images. The images reside in the same icons folder of the demo app (where the menu's icons are).

To attach a toolbar to the layout:
  1. Call the attachToolbar() method to initialize a toolbar on the page:

    'index.html' file

    dhtmlxEvent(window,"load",function(){
    var layout = new dhtmlXLayoutObject(document.body,"2U");
    layout.cells("a").setText("Contacts");
    layout.cells("b").setText("Contact Details");
    layout.cells("b").setWidth(500);
    var menu = layout.attachMenu();
    menu.setIconsPath("icons/");
    menu.loadStruct("data/menu.xml");
    var toolbar = layout.attachToolbar(); });
  2. Create an XML file with the name "toolbar " in the "data " folder.
  3. Open the toolbar.xml file and add the following code into it:

    'toolbar.xml' file

    <?xml version="1.0"?>
<toolbar>
   <item id="newContact" type="button" img="add_contact.gif"/>
   <item id="delContact" type="button" text="Delete" img="delete_contact.gif"/>
   <item id="sep01" type="separator"/>
   <item id="help" type="button" text="Help"/>
</toolbar>
  4. Call the setIconsPath() method to set the path to custom toolbar's images:

    'index.html' file

    toolbar.setIconsPath("icons/");
  5. Call the loadStruct() method to load the specified controls to the toolbar:

    'index.html' file

    toolbar.loadStruct("data/toolbar.xml");


Step 5. Add a Grid

Let's move on and add a grid to the left panel of the layout - just a grid skeleton, without data (data will be loaded on the next step). We will present a grid with 3 columns: Name, Last name, Email.

The DHTMLX library provides the dhtmlxGrid component to present data in a tabular form on the page. The component supports 4 data types: XML, JSON, CSV, JSArray.

To put a grid to the layout's cell:
  1. Call the attachGrid() method to attach a grid to the left panel of the layout:

    'index.html' file

     var layout = new dhtmlXLayoutObject(document.body,"2U");
 var contactsGrid = layout.cells("a").attachGrid();
  2. Add the code below to the "index.html " file to configure the grid:

    'index.html' file

    contactsGrid.setHeader("Name,Last Name,Email");   //sets the headers of columns
contactsGrid.setColumnIds("fname,lname,email");         //sets the columns' ids
contactsGrid.setInitWidths("250,250,*");   //sets the initial widths of columns
contactsGrid.setColAlign("left,left,left");     //sets the alignment of columns
contactsGrid.setColTypes("ro,ro,ro");               //sets the types of columns
contactsGrid.setColSorting("str,str,str");  //sets the sorting types of columns
    It's important to set ids for the columns cause we will need them to bind a form to the grid.
    Details on configuring the grid, read in the tutorial - First Steps with dhtmlxGrid.

  3. Call the init() method to finish initialization of the grid:

    'index.html' file

    contactsGrid.init();


Step 6. Load Data to the Grid

Now, we will load data to the grid. We'll use a MySQL database "dhtmlx_tutorial " and the table "contacts " in it as the data source.

In the grid we will present 3 properties (fname, lname, email ). Note, all contacts are generated with a sample data generator and have no connection to real people.

We will use the PHP platform and the dhtmlxConnector helper library, as this is the easiest way to implement the server-side logic for DHTMLX-based application. The library outputs data in the XML format.

Make sure that your MySql, Apache servers are running and you've defined the correct directory to your app for them, otherwise the error "LoadXML" will appear.

To load data to the grid:
  1. Find the "db.sql" file in the demo app and import it into your local database.
  2. Create a subfolder with the name "connector " in the "codebase " folder.
  3. Download the dhtmlxConnector library (link to download).
  4. Open the "dhtmlxConnector.zip " archive and extract the content of its "codebase " folder to the "connector " folder.
  5. Create a PHP file in the "data " folder and name it "contacts.php ".
  6. Open the "contacts.php " file and add the following server-side code to it:

    "contacts.php" file

    <?php
require("../codebase/connector/grid_connector.php");//adds the connector engine

//connects to the db with the name "dhtmlx_tutorial"
$res=new PDO("mysql:dbname=dhtmlx_tutorial;host=localhost","user","password");

$conn = new GridConnector($res);             //initializes the connector object
$conn->render_table("contacts","contact_id","fname,lname,email");  //loads data
//the method takes: the table's name, the id field, a list of fields to load
    To get the details of loading data from the database and creating XML for dhtmlxGrid, read the tutorial Loading Big Datasets.Dynamic Loading.

  7. Call the load() method to load data from the database to the grid:

    8. "index.html" file

    contactsGrid.load("data/contacts.php");      //takes the path to your data feed
    The client side of the dhtmlxConnector functionality is already contained in the dhtmlx.js file, so we needn't to include any additional files on the page.


Step 7. Add Filters to the Grid

When you have many contacts, it is handy to have a possibility to filter them by some value. With dhtmlxGrid this functionality can be easily provided.

We will add a new line with text filters for each column to the grid's header. So, when the user types in a text field, records in the grid will be filtered by values in the corresponding column.

There are also server-side filters, brought by dhtmlxConnector. In case you have a really big number of records in the grid, you should use a server-side filter to provide performance.

To add filters for the columns of the grid:
  1. Call the attachHeader() method to add filters to the grid:

    'index.html'

    contactsGrid.attachHeader("#text_filter,#text_filter,#text_filter");
//the method takes the columns' filters as a parameter
    To learn about filters, read the Filtering Data article .


Step 8. Add a Form to the Page

Our next point is adding a form to the page. The form's fields will display the details of the contact in the the selected grid's row. Thus, our form will have several fields for contacts details and a button "Submit" to save changes made in the grid through the form.

To put the form to the layout's cell:
  1. Call the attachForm() method to attach a form to the right panel of the layout:

    "index.html" file

    contactForm = layout.cells("b").attachForm();
  2. Create an XML file in the "data " folder and name it "form.xml ".
  3. Open the "form.xml " file and add the following code to it:

    <?xml version="1.0"?>
<items>
    <item type="settings"  inputWidth="220"  position="label-left"
    labelWidth="70"/>
    <item type="label"  label="Name"/>
    <item type="input"  label="First Name"  name="fname"    offsetLeft="15"/>
    <item type="input"  label="Last Name"   name="lname"    offsetLeft="15"/>
    <item type="label"  label="Internet"/>
    <item type="input"  label="Email"       name="email"    offsetLeft="15"/>
    <item type="button"     value="Submit"   offsetTop="15" offsetLeft="230"/>
</items>
    The name attribute is necessary to load data from a database (the value of the attribute = the name of of the related DB table field). Also the attribute is used to access form fields through API.
  4. Call the loadStruct() method to load the structure specified in the "form.xml " file to the form:

    "index.html" file

    contactForm = layout.cells("b").attachForm();
contactForm.loadStruct("data/form.xml");


Step 9. Bind the Form to the Grid

Now we need to link our grid and form to display the contact's details when the user selects a row in the grid.

To respond on user actions, DHTMLX components provide various events, so you can control nearly every action. The use of events in all components is realized in the same way - with the help of the attachEvent (event_name, event_handler_function) method.

To bind the form with the grid:
  1. Call the bind method, to bind the form to the grid and make it reflect all the data from the grid:

    "index.html" file

    contactForm = layout.cells("b").attachForm();
contactForm.loadStruct("data/form.xml");
contactForm.bind(contactsGrid);


Step 10. Save Data From the Form

Now we need to provide the functionality for saving changes made in the data through the form. We will save the changes after the user clicks the "Submit" button.

To provide the functionality we will use one more helper - dhtmlxDataProcessor. The helper can be used with any DHTMLX data component to provide the 'communication' with the server side. It monitors all data changes and sends data to the server for the update/delete/insert operations.

As a result, to update the data in the database on clicking the "Submit" button, we need to initialize dhtmlxDataProcessor and attach it to the grid.

To save data changes on the server:
  1. Initialize dhtmlxDataProcessor and attach it to the grid using the code as in:

    'index.html' file

    var dpg = new dataProcessor("data/contacts.php");         //inits dataProcessor
dpg.init(contactsGrid);   //associates the dataProcessor instance with the grid
  2. Attach a handler function to the onButtonClick event to send the updated data to the server each time the user clicks the "Submit" button:

    'index.html'

    contactForm.attachEvent("onButtonClick", function(name){
    contactForm.save();     //sends the values of the updated row to the server
 });


Step 11. Add/Delete Records in the Grid

Our final functionality is adding and deleting records in the grid.

We will add/delete records by clicking the respective buttons in the toolbar.

  • When the user clicks the "Add" button, a new record - with the first name "New contact" - will be added to the end of the grid (and automatically to the database) and will take the selection. In its turn, the form will get the focus and make the "First Name" input active.

  • When the user clicks the "Delete" button, the currently selected row will be deleted and the selection will be moved to the next row. In case, the currently selected row is the last one, the selection will be moved to one row up.

To provide the declared functionality, we will attach handler functions to the onClick event of our "Add"/"Delete" buttons.

To provide a possibility to add, delete records in the grid:
  1. Attach a handler function to the onClick event to process clicks on the 'Add' button:

    "index.html"

    toolbar.attachEvent("onclick",function(id){
    if(id=="newContact"){ //'newContact' is the id of the button in the toolbar
        var rowId=contactsGrid.uid();                  //generates an unique id
        var pos = contactsGrid.getRowsNum();  //gets the number of rows in grid
        contactsGrid.addRow(rowId,["New contact","",""],pos);  //adds a new row       };
});
    The addRow method takes 3 parameters: the row's id, cells' values and row's index.

  2. Attach a handler function to the onAfterUpdate event to select the newly-created record once the grid has gotten a response from the server that the record has been successfully inserted into the database:

    "index.html"

    var dpg = new dataProcessor("data/contacts.php");
dpg.init(contactsGrid);

dpg.attachEvent("onAfterUpdate", function(sid, action, tid, tag){    if (action == "inserted"){        contactsGrid.selectRowById(tid);        //selects the newly-created row                                  contactForm.setFocusOnFirstActive();//set focus to the 1st form's input                                  }});
    The setFocusOnFirstActive method makes the first form's input active, i.e. opens the editor for it.

  3. Add a code to the onClick handler function to process clicks on the "Delete" button:

    "index.html"

    toolbar.attachEvent("onclick",function(id){
    if(id=="newContact"){
        var rowId=contactsGrid.uid();
        var pos = contactsGrid.getRowsNum();
        contactsGrid.addRow(rowId,["New contact","",""],pos);
        contactsGrid.selectRowById(rowId);
        contactForm.setFocusOnFirstActive();
    };
    if(id=="delContact"){
        var rowId = contactsGrid.getSelectedRowId();        var rowIndex = contactsGrid.getRowIndex(rowId);        if(rowId!=null){            contactsGrid.deleteRow(rowId);                if(rowIndex!=(contactsGrid.getRowsNum()-1)){                    contactsGrid.selectRow(rowIndex+1,true);                } else{                    contactsGrid.selectRow(rowIndex-1,true)                }        }    }});
That's all. We believe you have enjoyed the tutorial and got acquainted with the basic principles of building web apps with the DHTMLX library.

Follow our other tutorials to be a true DHTMLX expert.


Building Web Interfaces

This tutorial shows you the ways of structuring and designing the user interface and teaches how to transform this interface into a working app.

The tutorial highlights many aspects, including:

  • How to add standard DHTMLX components on the page
  • How to organize components on the page
  • How to bind components to make the app working all-in-one

To keep things simple, the final app doesn't use the server backend and focuses on the client side only.

Download the demo app here.

After you finish this tutorial, you'll have a simple file manager that allows end users to manage folders of a specified package. The main elements of the app: a toolbar, a tree displaying the package structure, a grid displaying the contents of the selected folder.


Step 1. Create the App's File

Let's start our journey with preparing a file for our future app: a simple HTML file with included source files of the library.

We will use the standard edition of the DHTMLX Suite in the terrace skin that requires including 2 source files on the page:

  • dhtmlx.js
  • dhtmlx.css
To prepare the app's file:
  1. Download the "dhtmlxSuite " package (link to download), if you haven't already done it.
  2. Create a folder with the name "file_manager " in the root directory of your local web server.
  3. Find the "codebase " folder in the root of the "dhtmlxSuite " package and extract it to the "file_manager " folder.
  4. Find the "skins/terrace/dhtmlx.css " file and copy it to the "codebase " folder (the file will replace the default 'dhtmlx.css' file) to use the 'Terrace' skin in the app.
  5. Create the "index.html " file in the "file_manager " folder.
  6. Include the "dhtmlx.js " and "dhtmlx.css " code files to index.html (both source files reside in the "codebase " folder).

    'index.html' file

    <html>
  <head>
     <title>File manager</title>
     <script src="codebase/dhtmlx.js"></script>     <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">   </head>
  <body>
    <script>
             //the code of your application
        </script>
  </body>
</html>


Step 2. Set up the Layout

Our next step is to specify the layout of our app.
The DHTMLX library has several components to organize your web page: dhtmlxLayout, dhtmlxAccordion, dhtmlxTabbar, dhtmlxWindows, dhtmlxForm.
The main of them is dhtmlxLayout. The component allows you to divide the page into columns and rows which you can use after to arrange elements on the page.

Before choosing the appropriate pattern of the layout, we need to decide what elements we want to have in our app.
Our app will be displayed in the full-screen mode and will have the following elements:

  1. Toolbar.
  2. Navigation tree.
  3. Grid.

To specify the app's layout:
  1. Initialize a layout on the page using the dhtmlXLayoutObject() constructor (use the dhtmlxEvent() function to provide your script as a handler of the 'onload' HTML event):

    "index.html" file

    <!DOCTYPE html>
<html>
  <head>
     <title>File Manager</title>
     <script src="codebase/dhtmlx.js" type="text/javascript"></script>
     <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
  </head>
  <body>
    <script type="text/javascript">
            dhtmlxEvent(window,"load",function(){             var myLayout = new dhtmlXLayoutObject(document.body,"2U");          });
        </script>
  </body>
</html>
    The constructor takes 2 parameters: an HTML container for the layout and the layout's pattern. dhtmlxLayout provides different predefined patterns that you can choose from. For our markup, we've choosen the one called '2U'.

  2. Specify the following style for the layout's container, to guarantee that the layout will be rendered correctly in the full-screen mode:

    "index.html" file

    <style>
    html, body {
        width: 100%;      /*provides the correct work of a full-screen layout*/
        height: 100%;     /*provides the correct work of a full-screen layout*/
        overflow: hidden; /*hides the default body's space*/
        margin: 0px;      /*hides the body's scrolls*/
    }
</style>
  3. Call the setWidth() method to set the width of the 'tree' cell (the 'grid' cell will automatically occupy the remaining width):

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    var myLayout = new dhtmlXLayoutObject(document.body,"2U");
    myLayout.cells("a").setWidth(250); //the method takes a number without 'px'  });
    To refer to a layout's cell, the cells method is used. The method takes the cell's id as a parameter and returns the cell's object. By default, cells have 1-letter ids taken in the alphabetical order.

  4. Call the setText() method to set the text in the header of the 'tree' cell:

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    var myLayout = new dhtmlXLayoutObject(document.body,"2U");
    myLayout.cells("a").setWidth(250);
    myLayout.cells("a").setText("Files"); });
  5. Call the hideHeader() method to hide the header of the 'grid' cell:

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    var myLayout = new dhtmlXLayoutObject(document.body,"2U");
    myLayout.cells("a").setWidth(250);
    myLayout.cells("a").setText("Files");
    myLayout.cells("b").hideHeader(); });


Step 3. Add Toolbar to the Page

The next stop in our journey is a toolbar. We will add a panel with some items to the top of the layout.
We won't provide any handlers for the added items - just will place a toolbar on the page as a part of the overall interface.

To present toolbars on the page, the DHTMLX library provides the dhtmlxToolbar component. The component allows adding various items (buttons, labels, inputs etc.).

We will specify toolbar's items as an object in the XML format that is rather similar to the format used for a standard HTML form.

To attach a toolbar to the layout:
  1. Call the attachToolbar() method to attach a toolbar to the layout:

    'index.html' file

    dhtmlxEvent(window,"load",function(){
    var myLayout = new dhtmlXLayoutObject(document.body,"2U");
    myLayout.cells("a").setWidth(250);
    myLayout.cells("a").setText("Files");
    myLayout.cells("b").hideHeader();
    var myToolbar = myLayout.attachToolbar(); });
  2. Copy the "icons " folder from the demo app to the "file_manager " folder.
  3. Call the setIconsPath() method to set the path to custom images specified for the toolbar's items in the "toolbarStruct.xml" file:

    'index.html' file

    dhtmlxEvent(window,"load",function(){
    var myLayout = new dhtmlXLayoutObject(document.body,"2U");
    myLayout.cells("a").setWidth(250);
    myLayout.cells("a").setText("Files");
    myLayout.cells("b").hideHeader();
    var myToolbar = myLayout.attachToolbar();
    myToolbar.setIconsPath("icons/");});

  4. Create a subfolder with the name "data " in the "file_manager " folder.
  5. Create a new XML file in the "data " folder and name it "toolbarStruct.xml ".
  6. Open the "toolbarStruct.xml " file and specify the toolbar's items there:

    'toolbarStruct.xml' file

    <?xml version="1.0" encoding="UTF-8"?>
<toolbar>
    <item id="back"   type="button" img="left_arrow.png"/>
    <item id="fwd"    type="button" img="right_arrow.png"/>
    <item id="reload" type="button" img="reload.png"/>
    <item id="home"   type="button" img="home.png"/>
    <item id="add"    type="button" img="add.png"    text="Add"/>
    <item id="edit"   type="button" img="edit.png"   text="Edit"/>
    <item id="delete" type="button" img="delete.png" text="Delete"/>
</toolbar>
  7. Call the loadStruct() method to load the specified items to the toolbar:

    'index.html' file

    dhtmlxEvent(window,"load",function(){
    var myLayout = new dhtmlXLayoutObject(document.body,"2U");
    myLayout.cells("a").setWidth(250);
    myLayout.cells("a").setText("Files");
    myLayout.cells("b").hideHeader();
    var myToolbar = myLayout.attachToolbar();
    myToolbar.setIconsPath("icons/");
    myToolbar.loadStruct("data/toolbarStruct.xml");});


Step 4. Add Navigation Tree

On this step we will add a tree to the left cell ("cell a" ) of the layout.

In the app we will present a sample package with a number of media resources: books, films, music. Our tree will contain just the folders of this package while the grid will display the contents of this folder, i.e. once the user clicks on a folder in the tree, the grid displays the contents of the selected folder.

Our total data and data displayed in the tree are presented in the image below:

To add tree-like structures on the page, the DHTMLX library provides the dhtmlxTree component. The component can take data in 4 formats: XML,JSON, CSV, JSArray formats. For our app we have chosen the XML format.

To add a tree to the layout's cell:
  1. Call the attachTree() method to initialize a tree in the left cell of the layout:

    "index.html" file

    var myLayout = new dhtmlXLayoutObject(document.body,"2U");
var myTree = myLayout.cells("a").attachTree();
  2. Call the setImagesPath() method to set the path to the source images used by the tree for rendering on the page:

    "index.html" file

    var myLayout = new dhtmlXLayoutObject(document.body,"2U");
var myTree = myLayout.cells("a").attachTree();
myTree.setImagesPath("codebase/imgs/");
  3. Create an XML file in the "data " folder and name it "treeStruct.xml ".
  4. Open the "treeStruct.xml " file and specify the tree's items there as in:

    "treeStruct.xml" file

    <tree id="0">
    <item id="books" text="Books" open="1">
        <item id="romantic" text="Romantic" im0="folderClosed.gif"></item>
        <item id="mystic"   text="Mystic"   im0="folderClosed.gif"></item>
        <item id="fun"      text="Comedy"   im0="folderClosed.gif"></item>
    </item>
    <item id="films" text="Movie" open="1">
        <item id="comedy"   text="Comedy"   im0="folderClosed.gif"></item>
        <item id="action"   text="Action"   im0="folderClosed.gif"></item>
    </item>
    <item id="music" text="Music" im0="folderClosed.gif"></item>
</tree>
  5. Call the load() method to load items to the tree:

    "index.html" file

    myTree.load("data/treeStruct.xml");


Step 5. Add Grid to Display Files

Next, we will add a grid on the page. On this step, we will just initialize the grid and populate it with data.

Data source for the grid will contain all the files and folders we have in our 'media' package. For each type of the file we will provide an individual icon ( we already have them in the files_manager/icons folder).

Data items of the source will have 5 properties:

  1. A path to the file's icon
  2. The file's name
  3. The file's type
  4. The file's last change
  5. The parent item of the file in the tree hierarchy. A helper property that we will need to provide binding with the tree.

    <rows>
    <row id="2">
        <cell>../icons/grid_folder.png</cell>
        <cell>Romantic</cell>
        <cell>File folder</cell>
        <cell>2013-10-07 18:59</cell>
        <cell>books</cell>
    </row>
    ...
</rows>

As a result, our grid will contain 4 columns:

The DHTMLX library provides the dhtmlxGrid component which allows adding a sortable and editable table on the page. The component supports 4 data types: XML, JSON, CSV, JSArray. We have chosen the XML format to present data.

To add a grid to the layout's cell:
  1. Call the attachGrid() method to attach a grid to the right cell of the layout:

    "index.html" file

    var myLayout = new dhtmlXLayoutObject(document.body,"2U");
var myGrid = myLayout.cells("b").attachGrid();
  2. Add the code below to "index.html" to configure the grid:

    "index.html" file

    myGrid.setImagePath("codebase/imgs/");    //sets the path to the source images
myGrid.setIconsPath("icons/");                //sets the path to custom images
myGrid.setHeader("&nbsp;,Name,Type,Modified,id");     //sets the header labels
myGrid.setColTypes("img,ro,ro,ro,ro");             //sets the types of columns
myGrid.setInitWidths("70,250,100,*,0");   //sets the initial widths of columns
myGrid.setColAlign("center,left,left,left");   //sets the horizontal alignment
  3. Call the init method to initialize the grid:

    "index.html" file

    myGrid.init();
  4. Copy the "file_manager/data/gridData.xml " file from the demo app to the "data " folder.
    As the data file is rather big we just copy it from the demo app.
  5. Call the load method, to load data to the grid:

    "index.html" file

    myGrid.init();
myGrid.load("data/gridData.xml");


Step 6. Bind Grid to Tree

And the final point of our tutorial is binding the grid and the tree together, so that when the user clicks on the tree's folder - the grid starts to display the content of this folder.

To bind the elements we'll attach a handler function to the onSelect event of the dhtmlxTree that fires when the user clicks on a tree's item.

To bind the grid with the tree:
  1. Call the attachEvent method to add a handler function to the onSelect event and specify the following code in the handler function to filter the grid on selecting a tree's item:

    'index.html' file

    var myTree = myLayout.cells("a").attachTree();
myTree.setImagePath("codebase/imgs/");
myTree.load("data/treeStruct.xml");

myTree.attachEvent("onSelect",  function(id){ //id -the id of the selected item     myGrid.filterBy(4,id);    return true;});
    As parameters, the filterBy method takes the index of a column (zero-based numbering) and the filtering mask. We filter grid's data by the 5th property (the parent item of the file) and compare it with the item selected in the tree.

  2. Redefine the load() method of the tree and grid, to initially select an item in the tree:

    'index.html' file

    //myTree.load("data/treeStruct.xml");
//myGrid.load("data/gridData.xml");

myTree.load("data/treeStruct.xml",function(){            //callback function
    myGrid.load("data/gridData.xml", function(){            //callback function
        myTree.selectItem("books");   //makes 'books' folder selected initially
    })
});
    The second parameter of the load() method is a callback function that is called just after the data has been completely loaded. We use these callback functions to ensure that data will be completely loaded both into the tree and into the grid before we start to select an item.
    The selectItem method selects a tree's item with the specified id and fires the onSelect event.

That's all. We believe you have enjoyed the journey and learned the main principles of building web interfaces with the DHMLX library.

Follow our other tutorials to be a true DHTMLX expert.


Dynamic Apps

This tutorial teaches you how to build a dynamic and multi-purpose chart that allows your users to manage displaying of provided data.

The tutorial highlights many aspects, including:

  • How to add standard DHTMLX components on the page
  • How to dynamically change data property displayed in the chart
  • How to dynamically group data in the chart
  • How to dynamically filter data in the chart

To keep things simple, the final app doesn't use the server backend and focuses on the client side only.

Download the demo app here.

After you finish this tutorial, you'll get an app that presents "Profits & Losses" reports of a sample company in the text (grid) and graphic (chart) form and allows end users to dynamically manage parameters of data displayable in the chart. The main elements of the app: a grid, a chart, a form.


Step 1. Create the App's File

We are starting our work with preparing the app's file. We'll create an HTML file and include the source code files of the DHTMLX library in it.

We will use the standard edition of DHTMLX Suite in the web skin that requires including 2 source files on the page:

  • dhtmlx.js
  • dhtmlx.css
To prepare the app's file:
  1. Download the "dhtmlxSuite " package (link to download).
  2. Create a folder with the name "dynamic_chart " in the root directory of your local web server.
  3. Find the "codebase " folder in the root of the "dhtmlxSuite " package and extract it to the "dynamic_chart " folder.
  4. Find the "skins/web/dhtmlx.css " file and copy it to the "codebase " folder (the file will replace the default 'dhtmlx.css' file) to use the 'Web' skin in the app.
  5. Create the "index.html " file in the "dynamic_chart " folder.
  6. Include the "dhtmlx.js " and "dhtmlx.css " code files to index.html (both source files reside in the "codebase " folder).

    'index.html' file

    <!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Chart</title>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>     <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">   </head>
  <body>
    <script type="text/javascript">
            //the code of your application
        </script>
  </body>
</html>


Step 2. Specify the Layout

Then, we will specify the layout of our app. It will have the following elements:

  1. A grid with the data.
  2. A chart that will represent this data.
  3. A form that will allow end users to manage data displayed in the chart.

To organize the declared elements on the page, we will use the dhtmlxLayout component.

To specify the app's layout:
  1. Initialize a layout on the page using the dhtmlXLayoutObject() constructor (use the dhtmlxEvent() function to provide your script as a handler of the 'onload' HTML event):

    'index.html' file

    <!DOCTYPE html>
<html>
  <head>
     <title>Dynamic Chart</title>
     <script src="codebase/dhtmlx.js" type="text/javascript"></script>
     <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
  </head>
  <body>
    <script type="text/javascript">
            dhtmlxEvent(window,"load",function(){             var layout = new dhtmlXLayoutObject(document.body,"3L");         });
        </script>
  </body>
</html>
    The constructor takes 2 parameters: an HTML container for the layout and the layout's pattern. dhtmlxLayout has a big number of predefined patterns that you can choose from. For our markup, we've choosen the one called '3L'.

  2. Specify the following style for the layout's container, to guarantee that the layout will be rendered correctly in the full-screen mode:

    'index.html' file

    <style>
    html, body {
        width: 100%;      /*provides the correct work of a full-screen layout*/
        height: 100%;     /*provides the correct work of a full-screen layout*/
        overflow: hidden; /*hides the default body's space*/
        margin: 0px;      /*hides the body's scrolls*/
    }
</style>
  3. Add the following code to the "index.html " file to configure the layout:

    'index.html' file

    dhtmlxEvent(window,"load",function(){
    var layout = new dhtmlXLayoutObject(document.body, "3L");
    layout.cells("a").setWidth(270);        //sets the width of the 'form' cell      layout.cells("a").setText("Profit & Loss reports");//sets the form's header      layout.cells("b").hideHeader();      //hides the header of the 'chart' cell      layout.cells("c").hideHeader();       //hides the header of the 'grid' cell  });
    To refer to a layout's cell, the cells method is used. The method takes the cell's id as a parameter and returns the cell's object. By default, cells have 1-letter ids taken in the alphabetical order


Step 3. Add a Grid

Let's move on and add a grid to the right lower cell of the layout and load data into it. Data source for the grid will contain reports for profits and losses for the last N years and will be specified in the XML format.

Data items of the source will have 5 properties:

  • Year
  • Quarter
  • Profits per quarter, $
  • Losses per quarter, $
  • Person provided the data
<rows>
    <row id="1">
        <cell>2002</cell>
        <cell>I</cell>
        <cell>270538</cell>
        <cell>170832</cell>
        <cell>Sipho Garz</cell>
    </row>
    ...
</rows>

As a result, our grid will contain 5 columns, each of which will correspond to an individual data property.
We will use the dhtmlxGrid component to present data in a tabular form on the page.

To add a grid to the layout's cell:
  1. Call the attachGrid() method to attach a grid to the right bottom cell of the layout:

    "index.html" file

    var layout = new dhtmlXLayoutObject(document.body,"3L");
var grid = layout.cells("c").attachGrid();;
  2. Add the code below to "index.html" to configure the grid:

    "index.html" file

    grid.setImagePath("codebase/imgs/");       //sets the path to the source images
grid.setHeader("Year,Quarter,Profits per quarter ($),Losses per quarter ($),"+
 "A person responsible for the data");              //sets the columns' headers
grid.setColTypes("ro,ro,ro,ro,ro");                 //sets the types of columns
grid.setInitWidths("100,150,230,230,*");   //sets the initial widths of columns
grid.setColAlign("center,center,center,center,center");  //sets the x alignment
  3. Call the init method to initialize the grid:

    "index.html" file

    grid.init();
  4. Copy the "dynamic_chart/data/gridData.xml " file from the demo app to the "data " folder.
    As the data file is rather big we just get it from the demo app.
  5. Call the load method, to load data to the grid:

    "index.html" file

    grid.init();
grid.load("data/gridData.xml");


Step 4. Add a Chart

Now, we will add a chart that will represent data that we have specified in the grid. It's going to be a vertical bar chart that will display profits or losses per a specific period. By default, profits.

To create charts on the page, the DHTMLX library provides the dhtmlxChart component.

To add a chart to the layout's cell:
  1. Call the attachChart() method to add a chart to the cell "b" of the layout:

    "index.html"

    var chart = layout.cells("b").attachChart({
    view:"bar",                                      //defines the chart's type
    value:"#data2#",                  //data property that the chart represents
    color:"#36abee",                            //the color of the chart's bars
    padding:{left:75, bottom:50, top:50, right:30},//padding of chart's content
    yAxis:{start:0, step:50000, title:"Value ($)"},    //sets the vertical scale
    xAxis:{                                         //sets the horizontal scale
        template:function(obj){return "<span class='quarter'>"+obj.data1+
        "</span>"+(obj.data1=="I"?" '"+obj.data0.substr(2,2):"")}
    },
    preset:"column",                               //applies the styling preset
    border:0                                           //disables bars' borders
});
  2. Call the parse method to load data from the grid to the chart:

    "index.html"

    //grid.load("data/gridData.xml");
grid.load("data/gridData.xml",function(){
    chart.parse(grid,"dhtmlxgrid"); });
    We will call the parse method in the 2nd parameter of the dhtmlxGrid's load method, which is a callback function. We use it to ensure that data will be completely loaded to the grid before we start to populate the chart.
    In case a chart takes data from a grid, the parse method takes 2 parameters: the dhtmlxGrid object and the value "dhtmlxgrid" (the format for grid's data).


Step 5. Provide switching between 'Profits' and 'Losses'

Now we come to the most interesting part of our tutorial - making the chart dynamic. The first dynamic feature we will add is a possibility to switch between 'Profits' and 'Losses' data.

To provide the possibility we will:

  1. Add a form with 2 radio buttons: one for profits and one for losses. Once the user clicks a button, the related property is displayed in the chart.
  2. Use the onChange event of the dhtmlxForm, to detect when the user switches between radio buttons. This event fires each time the values of form's controls are changed. So, it covers all situations when the user can change the data in the form.
  3. Use the getFormData to get the current values of the form's controls. Note, when we have a group of radio buttons with the same "name" attribute, the method returns the value of the checked radio button in this group.
To provide switching between data properties displayed in the chart:
  1. Call the attachForm() method to attach a form to the left panel of the layout:

    "index.html" file

    var form = layout.cells("a").attachForm();
  2. Create an XML file in the "data " folder and name it, "form.xml ".
  3. Open the "form.xml " file and specify the "Profits" and "Losses" radio buttons there:

    "data/form.xml" file

    <?xml version="1.0"?>
<items>
    <item type="settings" position="label-right" offsetLeft="20"
    labelWidth="150"/>
    <item type="block" width="230" offsetLeft="0">
        <item type="label" label="Show report for:" offsetLeft="0"/>
        <item type="radio" name="report_type" value="profits" label="Profits"
        checked="true" />
        <item type="radio" name="report_type" value="losses" label="Losses"/>
    </item>
</items>
  4. Call the loadStruct() method to load the structure specified in the "form.xml " file to the form:

    "index.html" file

    var form = layout.cells("a").attachForm();
form.loadStruct("data/form.xml");
  5. Specify a handler function for the onChange event:

    'index.html' file

    form.attachEvent("onChange", function (){
    var formValues = form.getFormData();  //gets values of the checked controls
    //variable 'field' specifies the data field that will be displayed in chart
    var field=(formValues.report_type == "profits"?"data2":"data3");
    chart.clearAll();                              //clears the chart from data
    chart.define("value","#"+field+"#");//sets new data property for the Y-Axis
    chart.parse(grid,"dhtmlxgrid");                  //loads data from the grid
    chart.render();                             //renders the chart on the page
});


Step 6. Provide Filtering Data by Years

The next dynamic feature is filtering and we will add a possibility to filter input data by years.

We will provide 2 options:

  1. Displaying data for the all period (default view. No filtering)
  2. Displaying data for the last 5 years (filtering by years, where year>currentYear-5).

To implement this functionality, we need a little effort:

  • To add 2 more radio buttons to the form.
  • To check which radio button is checked.
  • If needed, to call the filter method of dhtmlxChart to filter the data.
To filter data displayed in the chart:
  1. Open the "data/form.xml " file and add the filtering controls there so the final file looks as in:

    "data/form.xml" file

    <?xml version="1.0"?>
<items>
    <item type="settings" position="label-right" offsetLeft="20"
    labelWidth="150"/>
    <item type="block" width="230" offsetLeft="0">
        <item type="label" label="Show report for:" offsetLeft="0"/>
        <item type="radio" name="type" value="profits" label="Profits"
        checked="true" />
        <item type="radio" name="type" value="losses" label="Losses"/>
        <item type="label" label="Use data for:" offsetLeft="0"/>         <item type="radio" name="filter" value="all_time" label="All period"        checked="true"/>        <item type="radio" name="filter" value="last5" label="Last 5 years"/>    </item>
</items>
  2. Switch to the "index.html " file and add filtering functionality there so the final file looks as in:

    "index.html" file

    form.attachEvent("onChange", function (id, value, state){
    var formValues = form.getFormData();
    var field=(formValues.report_type == "profits"?"data2":"data3");
    chart.clearAll();
    chart.define("value","#"+field+"#");
    chart.parse(grid,"dhtmlxgrid");

    if (formValues.filter == "last5") {         var currentYear = new Date().getFullYear();     //gets the current year           chart.filter(function(obj){             //filters the data in the chart               return obj.data0 >(currentYear-5);  //returns data for last 5 years         })     }                    chart.render();
});


Step 7. Provide Grouping Data

And the last dynamic feature - grouping. We will provide 3 options:

  1. Displaying data without grouping;
  2. Displaying data with grouping by the total value per year;
  3. Displaying data with grouping by the average value per year.

To achieve the desired behaviour, we will use:

  • The define method to redraw the scale labels cause a number of data items after grouping will be decreased in quarter and it requares from us to adjust the labels accordingly.
  • The group method to perform the grouping. As a parameter, the method takes the configuration object that specifies the conditions of grouping.
To group data displayed in the chart:
  1. Open the "data/form.xml " file and add the grouping controls there so the final file looks as in:

    "data/form.xml" file

    <?xml version="1.0"?>
<items>
    <item type="settings" position="label-right" offsetLeft="20"
      labelWidth="150"/>
    <item type="block" width="230" offsetLeft="0">
        <item type="label" label="Show report for:" offsetLeft="0"/>
        <item type="radio" name="type" value="profits" label="Profits"
          checked="true" />
        <item type="radio" name="type" value="losses" label="Losses"/>
        <item type="label" label="Use data for:" offsetLeft="0"/>
        <item type="radio" name="filter" value="all_time" label="All period"
          checked="true"/>
        <item type="radio" name="filter" value="last5" label="Last 5 years"/>
        <item type="label" label="Group data by:" offsetLeft="0"/>        <item type="radio" name="grouping" value="none" label="None"          checked="true"/>        <item type="radio" name="grouping" value="total"              label="Total value per year"/>        <item type="radio" name="grouping" value="average"          label="Average value per year"/>    </item>
</items>
  2. Switch to the "index.html " file and add grouping functionality there so the final file looks as in:

    "index.html" file

    form.attachEvent("onChange", function (id, value, state){
    var formValues = form.getFormData();
    var field=(formValues.report_type == "profits"?"data2":"data3");
    chart.clearAll();
    chart.define("value","#"+field+"#");
    chart.parse(grid,"dhtmlxgrid");

    if (formValues.filter == "last5") {
        var currentYear = new Date().getFullYear();
        chart.filter(function(obj){
            return obj.data0 >(currentYear-5);
        })
    }

    var groupConfig = {                         //grouping configuration object         by: "#data0#",         map:{}     };     if (formValues.grouping =="none"){//if the group isn't set, we reset labels         chart.define("xAxis", function(obj){             return "<span class='quarter'>"+obj.data1+"</span>"+             (obj.data1=="I"?" '"+obj.data0.substr(2,2):"")         })     } else if (formValues.grouping == "total"){         groupConfig.map[field] = ["#"+field+"#","sum"];         chart.group(groupConfig);         chart.define("xAxis",{ template: "#id#"});     } else if (formValues.grouping == "average"){         groupConfig.map[field] = ["#"+field+"#", function(prop, data){             var summ = 0;             for(var i = 0; i < data.length; i++){                 summ += parseFloat(data[i][field]);             }             return summ/data.length;         }];         chart.group(groupConfig);         chart.define("xAxis",{ template: "#id#" });     }     chart.render();   // redraws the chart on the page
});
    The configuration object has 2 properties:
    1. by - the name of a data property that will be served as X-coordinate for items of the final chart.
    2. map - the object that specifies the correspondance between a data property used as Y-coordinate and the function (built-in or custom) that will say how this property should be proccessed to achieve the desired grouping.
    To group the data by the total value per year, we will use the built-in group function - "sum".
    To group the data by the average value per year, we will specify a custom function.

That's all. We believe you have enjoyed the tutorial and known how to create a dynamic, multi-purpose chart on the page.

Follow our other tutorials to be a true DHTMLX expert.


First Steps with dhtmlxGrid

When we started writing this tutorial, we wanted to call dhtmlxGrid "the best grid you've ever seen". Then we thought that it would be too arrogant.

Really, it doesn't matter what we think about dhtmlxGrid. More important is what you will think about it at the end.

So one of our goals is to pass you our feeling of dhtmlxGrid as a very useful and powerful JavaScript grid component and show you how much simple, fast and flexible it is.

Download the demo app here.


Step 1. Create an App's File

We will start by creating a file for our future app: a simple HTML file with included source files of the library.
We will use the standard edition of the dhtmlxGrid package in the dhx_skyblue skin that requires including 2 source files on the page:

  • dhtmlxgrid.js - the main grid's engine and API.
  • dhtmlxgrid.css - the main file of the grid styles. It contains various predefined skins-related styles.

Working with dhtmlxGrid, you may require some wider extension functionality. In this case you just need to include the necessary extension files from the package on the page.

To prepare the app's file:
  1. Download the "dhtmlxGrid " package (link to download), if you haven't already have it on your computer.
  2. Create a folder with the name "basic_grid " in the root directory of your local web server.
  3. Create a subfolder with the name "codebase " in the "basic_grid " folder.
  4. Extract the content of the "dhtmlxGrid/codebase " folder of the package to the "codebase " folder.
  5. Create the "index.html " file in the "basic_grid " folder.
  6. Include the dhtmlxGrid's source files to index.html (all source files reside in the "codebase " folder).

    'index.html' file

    <html>
  <head>
     <title>Basic Grid</title>
     <link rel="stylesheet" href="codebase/dhtmlxgrid.css">     <script src="codebase/dhtmlxgrid.js"></script>  </head>
  <body>
  </body>
</html>


Step 2. Add a Grid on the Page

Our next step is to create a grid on the page. Actually, it requires a little effort.

To create a grid, we'll need:

  1. To create a div container on the page.
  2. To create a dhtmlxGrid object and place it to the div container.
  3. To configure the dhtmlxGrid object.
  4. To render the dhtmlxGrid object.
To create a grid on the page:
  1. Place a div container on the page and set its width and height parameters in the style attribute:

    "index.html" file

    <html>
    <head>
        <title>Basic Grid</title>
        <link rel="stylesheet" href="codebase/dhtmlxgrid.css">
        <script src="codebase/dhtmlxgrid.js"></script>
    </head>
    <body>
        <div id="mygrid_container" style="width:600px;height:250px;"></div>     </body>
</html>
  2. Initialize dhtmlxGrid using the dhtmlXGridObject() constructor (use the dhtmlxEvent() function to provide your script as a handler of the 'onload' HTML event):

    "index.html" file

    <html>
    <head>
        <title>Basic Grid</title>
        <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid.css">
        <script src="codebase/dhtmlxgrid.js"></script>
    </head>
    <body>
        <div id="mygrid_container" style="width:600px;height:250px;"></div>         <script type="text/javascript">
                dhtmlxEvent(window,"load",function(){                 mygrid = new dhtmlXGridObject("mygrid_container");            });
            </script>
  </body>
</html>
    The constructor takes 1 parameter: an HTML container where the grid will be reside.

  3. Call the setImagesPath method to set the path to the folder with the source images of the grid:

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagesPath("codebase/imgs/"); //make sure you use ”/” at the end. });
  4. Call the setHeader() method to set the headers of the grid's columns:

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagesPath("codebase/imgs/");
    mygrid.setHeader("Name,Quantity,Price"); });
  5. Call the setInitWidths() method to set the width of the grid's columns in pixels:

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagesPath("codebase/imgs/");
    mygrid.setHeader("Name,Quantity,Price");
    mygrid.setInitWidths("*,150,150"); //col with '*' fills the remaining space});
  6. Call the setColAlign() method to set the horizontal alignment of the columns:

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagesPath("codebase/imgs/");
    mygrid.setHeader("Name,Quantity,Price");
    mygrid.setInitWidths("*,150,150");
    mygrid.setColAlign("left,right,right");//use right align for numeric values});
  7. Call the setSkin() method to apply a skin to the grid.

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagesPath("codebase/imgs/");
    mygrid.setHeader("Name,Quantity,Price");
    mygrid.setInitWidths("*,150,150");
    mygrid.setColAlign("left,right,right");
    mygrid.setSkin("light"); //applies the 'light' skin});
    See a list of predefined skins here

  8. Call the init() method to finish initialization and render the grid on the page:

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagesPath("codebase/imgs/");
    mygrid.setHeader("Name,Quantity,Price");
    mygrid.setInitWidths("*,150,150");
    mygrid.setColAlign("left,right,right");
    mygrid.setSkin("light");
    mygrid.init();});


Step 3. Load Data to the Grid

Now it's time to load data to the grid.

dhtmlxGrid can take data of 4 formats: XML (default), JSON, JSArray, CSV. And in this article we'll describe loading data of the default format, i.e. XML.

XML format that is used for grid's data is intuitively clear. Generally, it consists of the rows with cells, containing some basic data. Each row should have a unique identifier (it's important for the grid's ability to distinguish one row from another).

For our sample we will create a structure with rows that have 3 cells inside (as soon as we set 3 columns in the grid) and save it in a separate file.

To load data to the grid:
  1. Create an XML file in the "basic_grid " folder and name it "data.xml ".
  2. Open the "data.xml " file and add the following code into it:

    "data.xml" file

    <?xml version="1.0" encoding="UTF-8"?>
<rows>
    <row id="a">
        <cell>book 1</cell>   //1st column
        <cell>300</cell>      //2nd column
        <cell>50</cell>       //3rd column
    </row>
    <row id="b">
        <cell>book 2</cell>
        <cell>2147</cell>
        <cell>43</cell>
    </row>
    <row id="c">
        <cell>book 3</cell>
        <cell>7488</cell>
        <cell>100</cell>
    </row>
</rows>
  3. Call the load() method to load data from the "data.xml " file to the grid:

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagePath("codebase/imgs/");
    mygrid.setHeader("Name,Quantity,Price");
    mygrid.setInitWidths("*,150,150");
    mygrid.setColAlign("left,right,right");
    mygrid.setSkin("light");
    mygrid.init();
    mygrid.load("data.xml");});


Step 4. Enable Sorting in the Grid

On this step we are going to enable sorting in the grid, so the user could sort rows by values of a certain column. Sorting will be invoked by a single click on the header of a column.

dhtmlxGrid allows you to set a specific type of sorting for each column.
There are 4 such sorting types:

  • int - sorts values as integers (generally, as any number).
  • date - sorts values as dates.
  • str - sorts values as strings (case-sensitive).
  • na - an unsorted column (the column won't react on a header click).

We will sort the 1st column as string, the 2nd column as number. The 3rd column we will leave unsorted.

To learn more about sorting in the grid, read the Sorting Data article.

To enable sorting in the grid:
  1. Call the setColSorting() method to assign sorting types to columns and enable sorting for them:

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagePath("codebase/imgs/");
    mygrid.setHeader("Name,Quantity,Price");
    mygrid.setInitWidths("*,150,150");
    mygrid.setColAlign("left,right,right");
    mygrid.setSkin("light");
    mygrid.setColSorting("str,int,na"); //must be called BEFORE initialization    mygrid.init();    mygrid.load("data.xml");
});


Step 5. Set Columns' Types

The next action is to set the type of cells in a column or, shortly, the columns' types.

There are a big number of predefined types, each of which has its own code. For example:

  • 'ed' - a simple editable cell.
  • 'ro' - a readonly cell.
  • 'ch' - a checkbox.
  • 'price'- a cell with price formatting.

This code should be used during setting the type of a column. By default, all cells have the ed type.

We will leave the 1st and 2nd columns editable and assign the price format to the 3rd column.
After the types will be set, we can edit the data in cells by a double click or by pressing F2.

To set the columns' types:
  1. Call the setColTypes() method to set the columns' types:

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagePath("codebase/imgs/");
    mygrid.setHeader("Name,Quantity,Price");
    mygrid.setInitWidths("*,150,150");
    mygrid.setColAlign("left,right,right");
    mygrid.setSkin("light");
    mygrid.setColSorting("str,int,na");
    mygrid.setColTypes("ed,ed,price");   //must be called BEFORE initialization    mygrid.init();    mygrid.load("data.xml");
});
    2. Watch out! The comma-separated list of types' codes must go without spaces. Otherwise, an error will occur.


Step 6. Provide Adding/Removing Records

Now we will make our grid a bit dynamic and provide a functionality for adding and removing books' records.

At first, we will add 2 buttons on the page: “Add Book” and “Remove Book”.
Then, we will specify handler functions for the onclick event of buttons. The onclick event fires when the user clicks a button.

To know more on the topic, read the Rows Manipulations article.

To provide a possibility to add, delete records in the grid:
  1. Add 2 buttons on the page - "Add Book " and "Remove Book ":

    "index.html" file

    <body>
    <div id="mygrid_container" style="width:600px;height:150px;"></div>
    <button onclick="addBook()">Add Book</button>    <button onclick="removeBook()">Remove Book</button>     <script>
            dhtmlxEvent(window,"load",function(){...});
        </script>
</body>
  2. Specify the "addBook() " function to provide a possibility to add new rows to the grid:

    "index.html" file

    dhtmlxEvent(window,"load",function(){...});
function addBook(){    var newId = (new Date()).valueOf();               //creates a unique row id     mygrid.addRow(newId,"New book,0,0",mygrid.getRowsNum());   //adds a new row    mygrid.selectRowById(newId);                //selects the newly created row }
    The addRow method takes 3 parameters: the row's id, cells' values and row's index.
  3. Specify the "removeBook() " function to provide a possibility to remove rows from the grid:

    "index.html"

    dhtmlxEvent(window,"load",function(){...});
function removeBook(){    var selId = mygrid.getSelectedId();       //gets the Id of the selected row    mygrid.deleteRow(selId);            //deletes the row with the specified id}


Step 7. Handle the Grid's Events

On our last step we will learn how to set a custom reaction on any user's action in the grid, e.g. when a user clicks on a row in the grid.

We will provide the following behaviour: once the user selects a row, an alert box appears and shows the id of the selected row. We will use for this the onRowSelect that fires each time the user selects a row in the grid.

To add a handler function to the 'onRowSelect' event:
  1. Call the attachEvent() method to attach a handler function to the onRowSelect event:

    "index.html" file

    dhtmlxEvent(window,"load",function(){...});
mygrid.attachEvent("onRowSelect",function(rowID,celInd){    alert("The id of the selected row is "+rowID);});
    2. The onRowSelect event passes 2 parameters to the handler function: the id of the selected row and the index of the clicked cell.
    The attachEvent() method is a common way to set a handler function for all events of dhtmlxGrid

That's all. We believe you have enjoyed the tutorial and appreciated dhtmlxGrid at its true worth.

Follow our other tutorials to be a true DHTMLX expert.


Grid. Work with the Server Side

In this tutorial we'd like to tell you about implementing basic server-side operations in dhtmlxGrid: loading, adding, saving, deleting.

The tutorial is intended for developers who have already been familiar with the dhtmlxGrid component. If you haven't, please read the following tuturial at first - 'First Steps with dhtmlxGrid' .

Download the demo app here.

After you finish this tutorial, you'll get a grid that presents a list of books stored in a database. The users can add/delete books in the grid and changes will reflect in the database.


Step 1. Create an App's File

We will start by creating a file for our future app: a simple HTML file with included source files of the library.
We will use the standard edition of the dhtmlxGrid package in the dhx_skyblue skin that requires including 2 source files on the page:

  • dhtmlxgrid.js - the main grid's engine and API
  • dhtmlxgrid.css - the main file of the grid styles. It contains various predefined skins-related styles
To prepare the app's file:
  1. Download the "dhtmlxGrid " package (link to download), if you haven't already have it on your computer.
  2. Create a folder with the name "grid_server " in the root directory of your local web server.
  3. Create a subfolder with the name "codebase " in the "grid_server " folder.
  4. Extract the content of the "dhtmlxGrid/codebase " folder of the package to the "codebase " folder.
  5. Create the "index.html " file in the "grid_server " folder.
  6. Include the dhtmlxGrid's source files to index.html (all source files reside in the "codebase " folder).

    'index.html' file

    <html>
  <head>
     <title>dhtmlxGrid. Server side</title>
     <link rel="stylesheet" href="codebase/dhtmlxgrid.css">      <script src="codebase/dhtmlxgrid.js"></script>  </head>
  <body>
  </body>
</html>


Step 2. Add a Grid on the Page

Our next step is to create a grid on the page. We will present a grid with 3 columns: Name, Quantity, Price.

To create a grid on the page:
  1. Place a div container on the page and set its width and height parameters in the style attribute:

    "index.html" file

    <html>
    <head>
        <title>dhtmlxGrid. Server side</title>
        <link rel="stylesheet" href="codebase/dhtmlxgrid.css">
        <script src="codebase/dhtmlxgrid.js"></script>
    </head>
    <body>
        <div id="mygrid_container" style="width:600px; height:160px;"></div>     </body>
</html>
  2. Initialize dhtmlxGrid using the dhtmlXGridObject() constructor (use the dhtmlxEvent() function to provide your script as a handler of the 'onload' HTML event):

    "index.html" file

    <html>
    <head>
        <title>dhtmlxGrid. Server side</title>
        <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid.css">
        <script src="codebase/dhtmlxgrid.js"></script>
    </head>
    <body>
        <div id="mygrid_container" style="width:600px; height:160px;"></div>
        <script>
                dhtmlxEvent(window,"load",function(){
                mygrid = new dhtmlXGridObject("mygrid_container");             });
            </script>
    </body>
</html>
  3. Add the code below to "index.html" to configure the grid:

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagePath("codebase/imgs/"); //sets the path to the source images    mygrid.setHeader("Name,Quantity,Price");           //sets the header labels    mygrid.setInitWidths("*,150,150");     //sets the initial widths of columns    mygrid.setColAlign("left,right,right");     //sets the horizontal alignment    mygrid.setColTypes("ed,ed,price");              //sets the types of columns    mygrid.setSkin("dhx_skyblue");                     //sets the skin to apply});
    To know more about initializing and configuring dhtmlxGrid, read the First Steps with dhtmlxGrid tutorial.
  4. Call the init method to finish initialization and render the grid on the page:

    "index.html" file

    dhtmlxEvent(window,"load",function(){
    mygrid = new dhtmlXGridObject("mygrid_container");
    mygrid.setImagePath("codebase/imgs/");
    mygrid.setHeader("Name,Quantity,Price");
    mygrid.setInitWidths("*,150,150");
    mygrid.setColAlign("left,right,right");
    mygrid.setColTypes("ed,ed,price");
    mygrid.setSkin("dhx_skyblue");
    mygrid.init();});


Step 3. Load Data to the Grid

Now, we will load data to the grid. We'll use a MySQL database "sampledb " and the table "books " in it as the data source. In the grid we will present 3 properties (title, quantity, price ).

To load data we will use the PHP platform and the dhtmlxConnector library, as this is the easiest way to implement the server-side logic for a DHTMLX-based application.

dhtmlxConnector:

  1. is a server-side library that lets you access external data sources and backend systems.
  2. provides wide server-side functionality, such as data loading (static or dynamic), saving, filtering, validation etc.
  3. consists of individual component-specific connectors. For a grid, you need to use GridConnector.
  4. outputs data in the XML format

1) Make sure that your MySql, Apache servers are running and you've defined the correct directory to your app for them, otherwise the error "LoadXML" will appear.
2) Make sure that your 'ID' field in the database is set as autoincrement.

To load data to the grid:
  1. Find the db.sql file in the demo app and import it into your local database.
  2. Create a subfolder with the name "connector " in the "codebase " folder.
  3. Download the dhtmlxConnector library (link to download).
  4. Open the "dhtmlxConnector.zip " archive and extract the content of its "codebase " folder to the "connector " folder.
  5. Create a PHP file in the "grid_server " folder and name it "data.php ".
  6. Open the "data.php " file and add the following server-side code to it:

    "data.php" file

    <?php
require_once("codebase/connector/grid_connector.php");//includes connector file
//connects to the database with the name "sampledb"
$res=new PDO("mysql:dbname=sampledb;host=localhost","user","password");

$conn = new GridConnector($res);             //initializes the connector object
$conn->render_table("books","id","title,quantity,price");  //loads data from db
    Make sure that all the includes used within the connector's script don't have any whitespaces beyond the <?php and ?> tags.
    The render_table method allows loading data from a single table. As parameters, the method takes: the table's name, the id field, a list of fields to load (used as values of the grid's cells).

  7. Call the load() method to load data from the server to the grid:

    8. "index.html" file

    contactsGrid.load("data.php");      //takes the path to your data feed


Step 4. Save Data Changes on the Server

Now we need to provide a possibility to save changes made in the grid on the server.

To load data from the server it was enough to use the dhtmlxConnector library. But if we want to perform different CRUD operations and save data changes back to the server, we need to use one more helper - the dhtmlxDataProcessor library.

We will add 2 buttons on the page: “Add Book” and “Remove Book” to allow users to add/remove records. As a result, the user will be able to edit data by clicking one of the buttons or changing data directly in the grid.

To save data changes on the server:
  1. Initialize dhtmlxDataProcessor and attach it to the grid using the code as in:

    "index.html" file

    var mydp = new dataProcessor ("data.php");//inits dataProcessor
mydp.init(mygrid);//associates the dataProcessor instance with the grid
    Once the dhtmlxDataProcessor's object is initialized and attached to the grid, all the changes made in the grid are automatically saved to the DB. Each time the user adds/edits/deletes records in the grid, the appropriate records will be added/edited/deleted on the server.

  2. Add 2 buttons on the page - "Add Book " and "Remove Book ":

    "index.html" file

    <body>
    <div id="mygrid_container" style="width:600px;height:150px;"></div>
    <button onclick="addBook()">Add Book</button>    <button onclick="removeBook()">Remove Book</button>     <script>
            dhtmlxEvent(window,"load",function(){...});
        </script>
</body>

  3. Specify the "addBook() " function to provide a possibility to add new rows to the grid:

    "index.html" file

    dhtmlxEvent(window,"load",function(){...});
function addBook(){    var newId = (new Date()).valueOf();               //creates a unique row id     mygrid.addRow(newId,"New book,0,0",mygrid.getRowsNum());   //adds a new row    mygrid.selectRowById(newId);                //selects the newly created row }
    The addRow method takes 3 parameters: the row's id, cells' values and row's index.

  4. Specify the "removeBook() " function to provide a possibility to remove rows from the grid:

    "index.html"

    dhtmlxEvent(window,"load",function(){...});
function removeBook(){    var selId = mygrid.getSelectedId();       //gets the Id of the selected row    mygrid.deleteRow(selId);            //deletes the row with the specified id}

That's all. We believe you have enjoyed the tutorial and learned how to populate Grid from the server.

Follow our other tutorials to be a true DHTMLX expert.


Form. Work with the Server Side

In this tutorial we'd like to tell you about implementing basic server-side operations in dhtmlxForm: loading, changing, saving.

The tutorial is intended for developers who have already been familiar with the dhtmlxForm component. If you haven't, please read the following article at first - How to Start with dhtmlxForm?.

Download the demo app here.

After you finish this tutorial, you'll get an app that contains a form with customers' details. The "Customer 1" and "Customer 2" buttons load customers' data from database. The "Submit" button saves the changes to the database.


Step 1. Create the App's File

We will start our tutorial with preparing a file for our future app: a simple HTML file that contains source code files of the DHTMLX library.

We will use the standard edition of DHTMLX Suite in the skyblue skin that requires including 2 source files on the page:

  • dhtmlx.js
  • dhtmlx.css
To prepare the app's file:
  1. Download the "dhtmlxSuite " package (link to download).
  2. Create a folder with the name "form_serverside " in the root directory of your local web server.
  3. Create a subfolder with the name "codebase " in the "form_serverside " folder.
  4. Find the "dhtmlx_std_full.zip " file in the root of the "dhtmlxSuite " package and extract its content to the "codebase " folder.
  5. Create the "index.html " file in the "form_serverside " folder.
  6. Include the "dhtmlx.js " and "dhtmlx.css " code files to index.html (both source files reside in the "codebase " folder).

    "index.html" file

    <!DOCTYPE html>
<html>
  <head>
    <title>dhtmlxForm. Server side</title>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>     <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">   </head>
  <body>
    <script type="text/javascript">
            //the code of your application
        </script>
  </body>
</html>


Step 2. Initialize dhtmlxForm

Our next step is to add a form on the page.

To create a form, we'll need:

  1. To create a div container on the page.
  2. To specify controls for the form.
  3. To create a dhtmlxForm object with the specified controls in the specified div container.

We will specify the following controls in the form:

  • Text fields for contact's details: "Name", "Address" and "Email".
  • Buttons for loading contact's details: "Customer 1", "Customer 2".
  • A button for saving changes made in the form.
To create a form on the page:
  1. Place a div container on the page and specify the form's width and height in the 'style' attribute:

    "index.html" file

    <html>
  <head>
     <title>dhtmlxForm. Server side</title>
     <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
     <script src="codebase/dhtmlx.js"></script>
     <div id="box" style="width:250px; height:160px; background-color:white;">     </div>  </head>
  <body>
    <script>
        //the code of the application
        </script>
  </body>
</html>
  2. Specify the controls and their position in the form:

    "index.html" file

    formData = [
    {type: "block", list:[
        {type:"fieldset",  label:"Customer details", width:267, list:[
            {type:"input", name:"name",    label: "Name",    labelWidth:50},
            {type:"input", name:"address", label: "Address", labelWidth:50},
            {type:"input", name:"email",   label: "Email",   labelWidth:50},
            {type:"button",name:"save",    offsetTop:10,     value:"Submit"}
    ]}]},
    {type:"block", list:[
        {type:"button", name:"button1", value:"Customer 1",  offsetTop:10},
        {type:"newcolumn"},
        {type:"button", name:"button2", value:"Customer 2",  offsetTop:10}
    ]}
];
  3. Call the dhtmlXForm() method to create the form with the specified controls on the page:

    "index.html" file

    var myform = new dhtmlXForm("box",formData);//object constructor


Step 3. Load Data to the Form

Now, we will provide loading data to the form. Our form will present details of 2 customers: "Customer 1" and "Customer 2". We'll use a MySQL database "sampledb " and the table "customers " in it as the data source.

We will add 2 buttons: "Customer 1" and "Customer 2" to load details of a specific customer to the form. Initially, we will load details of Customer 1.

To load data we will use the PHP platform and the dhtmlxConnector library, as this is the easiest way to implement the server-side logic for a DHTMLX-based application.

dhtmlxConnector:

  1. is a server-side library that lets you access external data sources and backend systems.
  2. provides wide server-side functionality, such as data loading (static or dynamic), saving, filtering, validation etc.
  3. consists of individual component-specific connectors. For a grid, you need to use FormConnector.
  4. outputs data in the XML format

1) Make sure that your MySql, Apache servers are running and you've defined the correct directory to your app for them, otherwise the error "LoadXML" will appear.
2) Make sure that your 'ID' field in the database is set as autoincrement.

To load data to the form:
  1. Find the db.sql file in the demo app and import it into your local database.
  2. Create a subfolder with the name "connector " in the "codebase " folder.
  3. Download the dhtmlxConnector library (link to download).
  4. Open the "dhtmlxConnector.zip " archive and extract the content of its "codebase " folder to the "connector " folder.
  5. Create a PHP file in the "form_serverside " folder and name it "formdata.php ".
  6. Open the "data.php " file and add the following server-side code to it:

    "formdata.php" file

    <?php
require_once("codebase/connector/form_connector.php");//includes connector file

//connects to the database with the name "sampledb"
$res=new PDO("mysql:dbname=sampledb;host=localhost","user","password");

$conn = new FormConnector($res);     //initializes the connector object
$conn->render_table("customers","id","name,address,email");//loads data from db
    Make sure that all the includes used within the connector's script don't have any whitespaces beyond the <?php and ?> tags.
    The render_table method allows to load data from a single table. As parameters, the method takes: the table's name, the id field, a list of fields to load (used as values of the grid's cells).

  7. Call the load() method to load data from the database to the form:

    'index.html'

    myform.load('formdata.php?id=1');  //takes the path to your data feed
    As a parameter, the method takes the path to the server-side script. The path must include the id of the loaded record.
    The client side of the dhtmlxConnector functionality is already contained in the dhtmlx.js file, so we needn't to include any additional files on the page.

  8. Specify a handler function for the onButtonClick event to load customer's details on clicking the "Customer 1" and "Customer 2" buttons.

    'index.html'

    myform.attachEvent("onButtonClick", function(id){
    if (id=='button1'){
        myform.load("formdata.php?id=1")//loads data of the 1st customer (id=1)
    }
    else if (id=='button2'){
        myform.load("formdata.php?id=2")//loads data of the 2nd customer (id=2)
    }
});


Step 4. Save Data Changes on the Server

Now we need to provide a possibility to save changes made in the form on the server. We will save the changes after the user clicks the "Submit" button.

To load data from the server it was enough to use the dhtmlxConnector library. But if we want to perform different CRUD operations and save data changes back to the server, we need to use one more helper - the dhtmlxDataProcessor library.

To save data changes on the server:
  1. Initialize dhtmlxDataProcessor and attach it to the form using the code as in:

    "index.html" file

    var mydp = new dataProcessor ("formdata.php");    //inits dataProcessor
mydp.init(myform);//associates the dataProcessor instance with the form
  2. Call the save() method for the "Submit" button to send the updated data to the server each time the user clicks this button:

    "index.html" file

    myform.attachEvent("onButtonClick", function(id){
    if (id=='button1'){
        myform.load('formdata.php?id=1')//loads data of the 1st customer (id=1)
    }
    else if (id=='button2'){
        myform.load('formdata.php?id=2')//loads data of the 2nd customer (id=2)
    }
    else if (id=='save'){        myform.save();// saves data to db     }});
That's all. We believe you have enjoyed the tutorial and learned to populate dhtmlxForm from the server.

Follow our other tutorials to be a true DHTMLX expert.


Binding Form to Grid

This tutorial will show you a popular use case of dhtmlxForm: a form bound to a grid. A form will present details of the selected grid's record and allow editing this record in the database. Using the technique described in this tutorial, you can bind any other DHTMLX components operating on data.

The tutorial is intended for developers who have already been familiar with the dhtmlxGrid and dhtmlxForm components. If you haven't, please read the following tutorial at first:

  • First Steps with dhtmlxGrid
  • Grid. Work with the Server Side
  • Form. Work with the Server Side

Download the demo app here.

After you finish this tutorial, you'll get a grid that contains information about several books. Next to the grid there will be a form displaying details of the selected book. The "Submit" button will save changes (we make in the grid) in the database.


Step 1. Create the App's File

We will start our tutorial with preparing a file for our future app: a simple HTML file that contains source code files of the DHTMLX library.

We will use the standard edition of DHTMLX Suite in the skyblue skin that requires including 2 source files on the page:

  • dhtmlx.js
  • dhtmlx.css
To prepare the app's file:
  1. Download the "dhtmlxSuite " package (link to download).
  2. Create a folder with the name "grid_with_form " in the root directory of your local web server.
  3. Create a subfolder with the name "codebase " in the "grid_with_form " folder.
  4. Find the "dhtmlx_std_full.zip " file in the root of the "dhtmlxSuite " package and extract its content to the "codebase " folder.
  5. Create the "index.html " file in the "grid_with_form " folder.
  6. Include the "dhtmlx.js " and "dhtmlx.css " code files to index.html (both source files reside in the "codebase " folder).

    "index.html" file

    <!DOCTYPE html>
<html>
  <head>
    <title>Binding a form to a grid</title>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>     <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">   </head>
  <body>
    <script type="text/javascript">
        //the code of your application
    </script>
  </body>
</html>


Step 2. Add Grid on a Page

Now, we will create a grid on the page and populate it with data. Our grid will have 3 columns: Name, Quantity, Price.

We'll use a MySQL database "sampledb " and the table "books " in it as the data source. In the grid we will present 3 properties (title, quantity, price ).

To create a grid and populate it with data:
  1. Place a div container on the page and set its width and height parameters in the style attribute:

    "index.html" file

    <html>
    <head>
        <title>Binding a form to a grid</title>
        <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
        <script  src="codebase/dhtmlx.js"></script>
    </head>
    <body>
        <div id="mygrid_container" style="width:600px;height:160px;float:left;">        </div>     </body>
</html>
  2. Add the following code to the "index.html " to render a grid on the page:

    "index.html" file

    var mygrid = new dhtmlXGridObject("mygrid_container");  //creates a grid object
mygrid.setImagePath("codebase/imgs/");     //sets the path to the source images
mygrid.setHeader("Name,Quantity,Price");               //sets the header labels
mygrid.setColumnIds("fname,lname,email");               //sets the columns' ids
mygrid.init();                                   //renders the grid on the page
    It's important to set ids for the columns cause we will need them to bind a form to the grid.
    Details on initializing and configuring the grid, read in the tutorial - First Steps with dhtmlxGrid.

  3. Find the db.sql file in the [demo app](docs.dhtmlx.com/packages/tutorials/grid_with_form.zip) and import it into your local database.
  4. Create a subfolder with the name "connector " in the "codebase " folder.
  5. Download the dhtmlxConnector library (link to download).
  6. Open the "dhtmlxConnector.zip " archive and extract the content of its "codebase " folder to the "dhtmlxConnector " folder.
  7. Create a PHP file in the "grid_with_form " folder and name it "griddata.php".
  8. Open the "griddata.php" file and add the following server-side code to it:

    "griddata.php"

    <?php
require_once("codebase/connector/grid_connector.php");//includes connector file

// connects to the database with the name "sampledb"
$res=new PDO("mysql:dbname=sampledb;host=localhost","user","password");

$conn = new GridConnector($res);     //initializes the connector object
$conn->render_table("books","id","title,quantity,price");  //loads data from db
    Make sure that all the includes used within the connector's script don't have any whitespaces beyond the <?php and ?> tags.
    The render_table method allows loading data from a single table. As parameters, the method takes: the table's name, the id field, a list of fields to load (used as values of the grid's cells).

  9. Call the load() method to load data from the server to the grid:

    10. "index.html" file

    mygrid.load("griddata.php");                 //takes the path to your data feed


Step 3. Add Form on the Page

Now, we will add a form that will show the details of the book selected in the grid.

The form will have the following controls:

  • 3 text fields: "Name", "Quantity" and "Price".
  • a button "Submit".

Note, for correct running the ids of the form's fields must correspond to the ids of the grid's columns.

To create a form on the page:
  1. Place a div container on the page and specify the form's width and height in the 'style' attribute:

    "index.html" file

    <head>
    <title>dhtmlxForm. Server side</title>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
    <script src="codebase/dhtmlx.js"></script>
    <div id="mygrid_container" style="width:600px;height:160px;float:left;">
    </div>
    <div id="myform_container" style="width:350px;height:160px;"></div> </head>
  2. Specify the controls and their position in the form:

    "index.html" file

    formData = [
    {type:"fieldset",  offsetTop:0, label:"Edit Form", width:253, list:[
        {type:"input",  name:"title",    label:"Name",     offsetTop:13,
        labelWidth:60},
        {type:"input",  name:"quantity", label:"Quantity", offsetTop:7,
        labelWidth:60},
        {type:"input",  name:"price",    label:"Price",    offsetTop:7,
        labelWidth:60},
        {type:"button", name:"save",     value:"Submit",   offsetTop:18}
    ]}
];
  3. Call the dhtmlXForm() method to create the form with the specified controls on the page:

    "index.html" file

    var myform = new dhtmlXForm("myform_container",formData);   //object constructor


Step 4. Bind the Form to the Grid

Well, we've come to the key point of this tutorial: binding the grid and the form.

Data binding conception is used to link components and to define the rules of linking their related data. At present, it's the easiest way to link 2 or more DHTMLX components. You can read more about data binding in the article "Binding Data".

Once we bind the form to the grid, details of the the selected grid's record will be automatically presented in the form.

To bind the form to the grid:
  1. Call the bind method to bind the form to the grid:

    myForm.bind(myGrid);


Step 5. Save Data Changes on the Server

Now we have a form bound to a grid and can edit this grid through the form. Hovewer, the changes will be saved only on the client-side. They won't be sent to the server. To set things right, we need to initialize dataProcessor for the grid. Since you've done it, all the changes made in the grid will be reflected in the database.
We will save the changes after the user clicks the "Submit" button.

To know more on the topic, read the following tutorials:

  • Grid. Work with the Server Side
  • Form. Work with the Server Side
To save data changes on the server:
  1. Initialize dhtmlxDataProcessor and attach it to the grid using the code as in:

    "index.html" file

    var mydp = new dataProcessor ("griddata.php"); //inits dataProcessor
mydp.init(mygrid);//associates the dataProcessor instance with the grid
  2. Attach a handler function to the onButtonClick event to send the updated data to the server each time the user clicks the "Submit" button:

    "index.html" file

    myform.attachEvent("onButtonClick", function(id){
    myform.save(); //sends the values of the updated row to the server
});
That's all. We believe you have enjoyed the tutorial and known how to implement a bunch grid-form in the app.

Follow our other tutorials to be a true DHTMLX expert.


Using Connector with CodeIgniter

The tutorial shows how to use the dhtmlxConnector library with the CodeIgniter framework.

The tutorial is intended for developers who have already been familiar with the CodeIgniter framework and DHTMLX library. If you haven't, please follow the links below to get the required information:

  • www.codeigniter.com - the framework site;
  • docs.dhtmlx.com - the DHTMLX documentation.

This tutorilal discusses the usage of Connector with CodeIgniter of version 3.0. If you've got an earlier version of CodeIgniter, read the tutorial devoted to CodeIgniter 2.X.

Also, please, check that you have CodeIgniter installed on your computer. If you don’t, read "Installation Instructions" to learn how to do this.

Download the demo app here.

After you finish this tutorial, you'll get a grid, a scheduler and a gantt populated with data from a database and able to save changes back to the server.

Particularly, it will consist of 3 parts:

  1. Grid
  2. Scheduler
  3. Gantt


Step 1. Include Required Code Files

To create our app we need to add source files of 5 components:

  • dhtmlxConnector
  • dhtmlxGrid
  • dhtmlxScheduler
  • dhtmlxGantt
  • dhtmlxDataProcessor

We could download packages of each component and add the files one by one but it's not the best way. It's much easier to download the app package and copy the folder with the files from the package.

To prepare the app's file:
  1. Download the app package (link to download).
  2. Follow the directory tree "codeigniter_dhtmlx/static/lib/ " and copy the "dhtmlx", "dhtmlxGantt" and "dhtmlxScheduler" folders from the downloaded package to the root folder of your project.


Step 2. Create a Data Source

Now, let's specify what data we will load into our grid, gantt and scheduler.

In the tutorial we will use the "dhtmlx_samples.sql " database. You can use any database available or download the supplied package and import an SQL dump file "dhtmlx_samples.sql " (placed in the root folder) for creating a local database copy.

Note, if you decide to use a database other than "dhtmlx_samples.sql " you will need to adapt the stated in the tutorial code.

To specify the data source for the app:
  1. Import the "dhtmlx_samples.sql " dump file into your local database. The file resides in the root folder of the supplied package.


Step 3. Configure the Database Connectivity

To access the data we need to set up the database connectivity.

To configure the database connectivity:
  1. Follow codeigniter_dhtmlx/application/config/ and open the "database.php " file.
  2. Set at least the following variables in the file:

    "database.php" file

    $db['default']['hostname']='localhost';     // the hostname of your database server
$db['default']['username']='root';          // the username used to connect to DB
$db['default']['password']='root';          // the password used to connect to DB
$db['default']['database']='dhtmlx_samples'; // the name of DB you want to connect to


Step 4. Create a Grid

We will start the project by creating a grid in our app.
We will divide the step into 2 substeps:

  • Step 4.1. Configuring the View object
  • Step 4.2. Configuring the Conroller object

If after completing the step, you will run webhost/codeigniter_dhtmlx/grid, the app will produce the following grid that loads data from server and saves them back:

Step 4.1. Configuring the View object

Let's create a View file that will present our grid. In the view we will use a standard code that initializes dhtmlxGrid and if you have been working with this component, it won't be difficult for you to understand the technique.

If you slightly know dhtmlxGrid and will doubt what one or another command makes, refer to the following tutorials:

  • First Steps with dhtmlxGrid
  • Grid. Work with the Server Side
  • dhtmlxConnector: video tutorial
To configure the View object:
  1. Create a new file in the "views " folder and name it "GridView.php "
  2. Open the "GridView.php " file and add the following code there:

    "views/GridView.php" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="./static/lib/dhtmlx/codebase/dhtmlx.js"></script>
    <link rel="stylesheet" href="./static/lib/dhtmlx/codebase/dhtmlx.css">
</head>

<body>
    <div id="grid_here" style="width: 600px; height: 400px;"></div>
    <script type="text/javascript" charset="utf-8">
            mygrid = new dhtmlXGridObject('grid_here');
        mygrid.setHeader("Start date,End date,Text");
        mygrid.init();
        //refers to the 'data' action that we will create in the next substep
        mygrid.load("./grid/data");
        // refers to the 'data' action as well
        var dp = new dataProcessor("./grid/data");
        dp.init(mygrid);
        </script>
</body>

Step 4.2. Configuring the Controller object

In the controller, we'll need to implement 2 actions:

  1. One that loads the view.
  2. One that loads and processes data.

To load and process data we will use GridConnector. A common use of GridConnector is:

$connector = new GridConnector($db, $type);
$connector->configure($table,$id, $text, $extra,$relation_id);
$connector->render();

The GridConnector constructor takes 2 parameters:

  • $db - the DB connection variable;
  • $type - the database type.

Remember, in case of working with CodeIgniter, the parameters will always get the values:
$this->db and "PHPCI".

The configure method configures the GridConnector object without rendering data and takes 5 parameters:

  • $table - the name of a table;
  • $id - the name of the id field;
  • $text - a comma separated list of rendered data fields;
  • $extra - (optional) a comma separated list of extra fields;
  • $relation_id - (optional) used for building hierarchy in case of Tree and TreeGrid.
To configure the Controller object:
  1. Create a new file in the "controllers " folder and name it "Grid.php ".

  2. Open the "Grid.php " file and add the file necessary to work with GridConnector:

    "controllers/Grid.php" file

    <?php
use Dhtmlx\Connector\GridConnector;
?>

  3. Create the root controller class with the name "Grid ":

    "controllers/Grid.php" file

    <?php
use Dhtmlx\Connector\GridConnector;

class Grid extends CI_Controller {                                 // here you should place all your functions        }                                                                                                  ?>

  4. Create an action that will load the view:

    "controllers/Grid.php" file

    сlass Grid extends CI_Controller {
    public function index(){                    $this->load->view("GridView");      }                                   };

  5. Create an action that will load and process data. Grid will take data from the "scheduler_events" table:

    "controllers/Grid.php" file

    class Grid extends CI_Controller {
    public function index(){
        $this->load->view("GridView");
    }
    public function data(){                                         $this->load->database(); // data feed                        $connector = new GridConnector($this->db, "PHPCI");         $connector->configure(                                          "scheduler_events",                                         "event_id",                                                 "start_date, end_date, event_name"                      );                                                          $connector->render();                                   }                                                       };


Step 5. Create a Scheduler

Now we're going to add a scheduler on the page. The technique used for dhtmlxGrid is the same for all other DHTMLX components, including dhtmlxScheduler.
We will divide the step into 2 substeps again:

  • Step 5.1. Configuring the View object
  • Step 5.2. Configuring the Controller object

If after completing the step, you will run webhost/codeigniter_dhtmlx/scheduler, the app will produce the following scheduler that loads data from server and saves them back:

Step 5.1. Configuring the View object

Let's create a View file that will present our scheduler.

For a deeper learning of dhtmlxScheduler initialization, read:

  • How to start (step-by-step guide);
  • Scheduler Markup;
  • Common Configuration Instructions;
  • Server-side Integration.
To configure the View object:
  1. In the "views " folder create a new file and name it "SchedulerView.php "
  2. Open the "SchedulerView.php " file and add the following code there:

    "views/SchedulerView.php" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="./static/lib/dhtmlxScheduler/codebase/dhtmlxscheduler.js"></script>
    <link rel="stylesheet" href=".../dhtmlxScheduler/codebase/dhtmlxscheduler.css">
</head>

<body>
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    <div class="dhx_cal_header">
    </div>
    <div class="dhx_cal_data">
    </div>
</div>

<script type="text/javascript" charset="utf-8">
        document.body.onload = function() {
        scheduler.init('scheduler_here',new Date(2010,7,1),"month");
        scheduler.setLoadMode("month");
         // refers to the 'data' action that we will create in the next substep
        scheduler.load("./scheduler/data");
        // refers to the 'data' action as well
        var dp = new dataProcessor("./scheduler/data");
        dp.init(scheduler);
    };
    </script>
</body>

Step 5.2. Configuring the Controller object

In the controller, we'll use the same technique that was used for Grid. So let's implement the following actions:

  1. One that loads the view.
  2. One that loads and processes data.

To load and process data we will use SchedulerConnector. A common use of SchedulerConnector is:

$connector = new SchedulerConnector($db, $type);
$connector->configure($table,$id, $text, $extra);
$connector->render();

The SchedulerConnector constructor takes 2 parameters:

  • $db - the DB connection variable;
  • $type - the database type.

Remember, in case of working with CodeIgniter, the parameters will always get the values:
$this->db and "PHPCI".

The configure method configures the SchedulerConnector object without rendering data and takes 4 parameters:

  • $table - the name of a table;
  • $id - the name of the id field;
  • $text - a comma separated list of rendered data fields;
  • $extra - (optional) a comma separated list of extra fields.
To configure the Controller object:
  1. Create a new file in the "controllers " folder and name it "Scheduler.php ".

  2. Open the "Scheduler.php " file and apply the use keyword to include SchedulerConnector:

    "controllers/Scheduler.php" file

    <?php
use Dhtmlx\Connector\SchedulerConnector;
?>

  3. Create the root controller class with the name "Scheduler ":

    "controllers/Scheduler.php" file

    <?php
use Dhtmlx\Connector\SchedulerConnector;

class Scheduler extends CI_Controller {                 // here you should place all your functions     }                                                                                              ?>

  4. Create an action that will load the view:

    "controllers/Scheduler.php" file

    сlass Scheduler extends CI_Controller {
    public function index(){                            $this->load->view("SchedulerView");         }                                           };

  5. Create an action that will load and process data:

    "controllers/Scheduler.php" file

    class Scheduler extends CI_Controller {
    public function index(){
        $this->load->view("SchedulerView");
    }
    public function data(){                                                 $this->load->database(); // data feed                                $connector = new SchedulerConnector($this->db, "PHPCI");            $connector->configure(                                                  "scheduler_events",                                                 "event_id",                                                         "start_date, end_date, event_name"                              );                                                                  $connector->render();                                           }                                                               };


Step 6. Create a Gantt

Finally, we'll add a gantt on the page. The technique used for dhtmlxGrid is the same for all other DHTMLX components, including dhtmlxGantt.
We will divide the step into 2 substeps again:

  • Step 6.1. Configuring the View object
  • Step 6.2. Configuring the Controller object

If after completing the step, you will run webhost/codeigniter_dhtmlx/gantt, the app will produce the following gantt that loads data from server and saves them back:

Step 6.1. Configuring the View object

Let's create a View file that will present our gantt.

For a deeper learning of dhtmlxGantt initialization, read:

  • How to Start with dhtmlxGantt;
  • Exploring Ways to Configure the Gantt Chart;
  • Storing Data on the Server Side.
To configure the View object:
  1. In the "views " folder create a new file and name it "GanttView.php "
  2. Open the "GanttView.php " file and add the following code there:

    "views/GanttView.php" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="./static/lib/dhtmlxGantt/codebase/dhtmlxgantt.js"></script>
    <link rel="stylesheet" href="./static/lib/dhtmlxGantt/codebase/dhtmlxgantt.css">
</head>

<body>
    <div id="gantt_here" style='width:100%; height:250px;'></div>

    <script type="text/javascript">
            gantt.init("gantt_here", new Date(2010,7,1), new Date(2010,8,1));
        // refers to the 'data' action that we will create in the next substep
        gantt.load("./gantt/data", "xml");
        // refers to the 'data' action as well
        var dp = new dataProcessor("./gantt/data");
        dp.init(gantt);
        </script>
</body>

Step 6.2. Configuring the Controller object

The configuration of GanttConnector is the same as those of GridConnector and SchedulerConnector. Thus, we need to implement the actions below:

  1. One that loads the view.
  2. One that loads and processes data.

To load and process data we will use GanttConnector. A common use of GanttConnector is:

$controller = new GanttConnector($this->db, "PHPCI");
$controller->render_links("gantt_links", "id", "source,target,type");
$controller->render_table("gantt_tasks", "id", "start_date,duration,text,progress,parent");

The GanttConnector constructor takes 2 parameters:

  • $db - the DB connection variable;
  • $type - the database type.

Remember, in case of working with CodeIgniter, the parameters will always get the values:
$this->db and "PHPCI".

The render_links method configures connector, retrieves data from a table with links and takes 3 parameters:

  • $table - the database's table name;
  • $id - the name of the id field;
  • $links - a list of fields which will be used as data properties of a link.

The render_table method configures connector, retrieves data from a table with tasks and takes 3 parameters:

  • $table - the database's table name;
  • $id - the name of the id field;
  • $tasks - a list of fields which will be used as data properties of a task.
To configure the Controller object:
  1. Create a new file in the "controllers " folder and name it "Gantt.php ".

  2. Open the "Gantt.php " file and apply the use keyword to include GanttConnector:

    "controllers/Gantt.php" file

    <?php
use Dhtmlx\Connector\GanttConnector;
?>

  3. Create the root controller class with the name "Gantt ":

    "controllers/Gantt.php" file

    <?php
use Dhtmlx\Connector\GanttConnector;

class Gantt extends CI_Controller {                     // here you should place all your functions     }                                                                                          ?>

  4. Create an action that will load the view:

    "controllers/Gantt.php" file

    сlass Gantt extends CI_Controller {
    public function index(){                            $this->load->view("GanttView");             }                                           };

  5. Create an action that will load and process data:

    "controllers/Gantt.php" file

    class Gantt extends CI_Controller {
    public function index(){
        $this->load->view("GanttView");
    }
    public function data(){                                                             $this->load->database(); // data feed                                            $controller = new GanttConnector($this->db, "PHPCI");                           $controller->render_links("gantt_links", "id", "source,target,type");           $controller->render_table(                                                          "gantt_tasks",                                                                  "id",                                                                           "start_date,duration,text,progress,parent"                                    );                                                                           }                                                                           };
That's all. We believe you have enjoyed the tutorial and seen how easy you could integrate CodeIgniter with dhtmlxConnector. The final application logic was not the goal of this article, but interface built here is a good start for creating a fully-functional web application.

Follow our other tutorials to become a true DHTMLX expert.


Using Connector with CodeIgniter 2.X

The tutorial is intended for developers who have already been familiar with the CodeIgniter framework and DHTMLX library. If you haven't, please follow the links below to get the required information:

  • www.ellislab.com/codeigniter - the framework site;
  • docs.dhtmlx.com - the DHTMLX documentation.

Also, please, check that you have CodeIgniter installed on your computer. If you don’t, read "Installation Instructions" to learn how to do this.

Download the demo app here.

After you finish this tutorial, you'll get 2 grids and a scheduler populated with data from a database and able to save changes back to the server.

Particularly, it will consist of 3 parts:

  1. Grid;
  2. Scheduler;
  3. Grid with model class (the same grid but populated with data through the model class).


Step 1. Include Required Code Files

To create our app we need to add source files of 4 components:

  • dhtmlxConnector
  • dhtmlxGrid
  • dhtmlxScheduler
  • dhtmlxDataProcessor

We could download packages of each component and add the files one by one but it's not the best way. It's much easier to download the app package and copy the folder with the files from the package.

To prepare the app's file:
  1. Download the app package (link to download) and copy the DHTMLX folder to the root folder of your project.


Step 2. Create a Data Source

Now, let's specify what data we will load into our grids and scheduler.

In the tutorial we will use the "events.sql " database. You can use any database available or download the supplied package and import an SQL dump file "events.sql " (placed in the root folder) for creating a local database copy.
Note, if you decide to use a database other than "events.sql" you will need to adapt the stated in the tutorial code.

To specify the data source for the app:
  1. Import the "events.sql " dump file into your local database. The file resides in the root folder of the supplied package.


Step 3. Configure the Database Connectivity

To access the data we need to set up the database connectivity.

To configure the database connectivity:
  1. Follow CodeIgniter/application/config/ and open the "database.php " file.
  2. Set at least the following variables in the file:

    "database.php" file

    $db['default']['hostname']='localhost';  //the hostname of your database server
$db['default']['username']='dhxconnector'; //the username used to connect to DB
$db['default']['password']='dhxconnector'; //the password used to connect to DB
$db['default']['database']='dhxconnector'; //the name of DB you want to connect to


Step 4. Create a Grid
(using View, Controller objects)

We will start the project by creating a grid in our app.
We will divide the step into 2 substeps:

  • Step 4.1. Configuring the View object
  • Step 4.2. Configuring the Conroller object

If after completing the step, you will run webhost/grid/index, the app will produce the following grid that loads data from server and saves them back:

Step 4.1. Configuring the View object

Let's create a View file that will present our grid. In the view we will use a standard code that initializes dhtmlxGrid and if you have been working with this component, it won't be difficult for you to understand the technique.

Also, we will initialize the dataProcessor. The only moment we want to pay your attention to is the following code:

dp.action_param = "dhx_editor_status";

Initially, dataProcessor protocol is incompatible with the framework cause the framework blocks the default name of the query status parameter. And to fix it, we change the name of the parameter.

If you slightly know dhtmlxGrid and will doubt what one or another command makes, refer to the following tutorials:

  • First Steps with dhtmlxGrid
  • Grid. Work with the Server Side
  • dhtmlxConnector: video tutorial
To configure the View object:
  1. Create a new file in the "views " folder and name it "grid.php "
  2. Open the "grid.php " file and add the following code there:

    "views/grid.php" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="/dhtmlx/grid/dhtmlxcommon.js"></script>
    <script src="/dhtmlx/grid/dhtmlxgrid.js"></script>
    <script src="/dhtmlx/grid/dhtmlxgridcell.js"></script>

    <script src="/dhtmlx/dhtmlxdataprocessor.js"></script>
    <script src="/dhtmlx/connector/connector.js"></script>

    <link rel="stylesheet" href="/dhtmlx/grid/dhtmlxgrid.css">
    <link rel="stylesheet" href="/dhtmlx/grid/skins/dhtmlxgrid_dhx_skyblue.css">
</head>

<body>
    <div id="grid_here" style="width:600px; height:400px;"> </div>
    <script type="text/javascript" charset="utf-8">
            mygrid = new dhtmlXGridObject('grid_here');
        mygrid.setHeader("Start date,End date,Text");
        mygrid.init();
        // refers to the 'data' action that we will create in the next substep
        mygrid.load("./data"); // => /grid/data

        var dp =new dataProcessor("./data"); // refers to the 'data' action as well
        dp.action_param = "dhx_editor_status";
        dp.init(mygrid);
        </script>
</body>

Step 4.2. Configuring the Controller object

In the controller, we'll need to implement 2 actions:

  1. One that loads the view.
  2. One that loads and processes data.

To load and process data we will use GridConnector. A common use of GridConnector is:

$connector = new GridConnector($db, $type);
$connector->configure($table,$id, $text, $extra,$relation_id);
$connector->render();

The GridConnector constructor takes 2 parameters:

  • $db - the DB connection variable;
  • $type - the database type.

Remember, in case of working with CodeIgniter, the parameters will always get the values:
$this->db and "phpCI".

The configure method configures the GridConnector object without rendering data and takes 5 parameters:

  • $table - the name of a table;
  • $id - the name of the id field;
  • $text - a comma separated list of rendered data fields;
  • $extra - (optional) a comma separated list of extra fields;
  • $relation_id - (optional) used for building hierarchy in case of Tree and TreeGrid.
To configure the Controller object:
  1. Create a new file in the "controllers " folder and name it "grid.php ".

  2. Open the "grid.php " file and add files required for working with dhtmlxConnector:

    "controllers/grid.php" file

    <?php
    require_once("./dhtmlx/connector/grid_connector.php");
    require_once("./dhtmlx/connector/db_phpci.php");
?>

  3. Rename the query status parameter and set it to the value specified in the view file, i.e. to "dhx_editor_status " :

    "controllers/grid.php" file

    <?php
    require_once("./dhtmlx/connector/grid_connector.php");
    require_once("./dhtmlx/connector/db_phpci.php");

    DataProcessor::$action_param ="dhx_editor_status";  ?>

  4. Create the root controller class with the name "Grid ":

    "controllers/grid.php" file

    <?php
    require_once("./dhtmlx/connector/grid_connector.php");
    require_once("./dhtmlx/connector/db_phpci.php");

    DataProcessor::$action_param ="dhx_editor_status";

    class Grid extends CI_Controller {                          // here you should place all your functions         }                                                   ?>

  5. Create an action that will load the view:

    "controllers/grid.php" file

    сlass Grid extends CI_Controller {
    public function index(){                $this->load->view('grid');      }                               };

  6. Create an action that will load and process data:

    "controllers/grid.php" file

    class Grid extends CI_Controller {
    public function index(){
        $this->load->view('grid');
    }
    public function data(){                                             $this->load->database();//data feed                             $connector = new GridConnector($this->db, "phpCI");             $connector->configure(                                              "events",                                                       "event_id",                                                     "start_date,end_date,event_name"                            );                                                              $connector->render();                                       }                                                           };


Step 5. Create a Scheduler

And now, we're going to add a scheduler on the page. The technique used for dhtmlxGrid is the same for all other DHTMLX components, including dhtmlxScheduler.
We will again divide the step into 2 substeps:

  • Step 5.1. Configuring the View object
  • Step 5.2. Configuring the Controller object

If after completing the step, you will run webhost/scheduler/scheduler, the app will produce the following scheduler that loads data from server and saves them back:

Step 5.1. Configuring the View object

Let's create a View file that will present our scheduler.

Again, we'll use a standard code initializing the component plus will rename the status variable.

For a deeper learning of dhtmlxScheduler initialization, read:

  • How to start (step-by-step guide);
  • Scheduler Markup
  • Common Configuration Instructions;
  • Server-side Integration.
To configure the View object:
  1. In the "views " folder create a new file and name it "scheduler.php "
  2. Open the "scheduler.php " file and add the following code there:

    "views/scheduler.php" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="/dhtmlx/scheduler/dhtmlxscheduler.js"></script>
    <link rel="stylesheet" href="/dhtmlx/scheduler/dhtmlxscheduler_glossy.css">
</head>

<body>
    <div id="scheduler_here"
        class="dhx_cal_container"
        style='width:800px; height:600px;'
    >
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>
            <div class="dhx_cal_date"></div>
            <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
            <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
            <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
        </div>
        <div class="dhx_cal_header">
        </div>
        <div class="dhx_cal_data">
        </div>
    </div>

<script type="text/javascript" charset="utf-8">
        scheduler.config.multi_day = true;

    scheduler.config.xml_date="%Y-%m-%d %H:%i";
    scheduler.config.first_hour = 5;
    scheduler.init('scheduler_here',new Date(2010,7,5),"week");
    // refers to the 'data' action that we will create in the next substep
    scheduler.load("/scheduler/data");
    // refers to the 'data' action as well
    var dp = new dataProcessor("/scheduler/data");
    dp.action_param ="dhx_editor_status";

    dp.init(scheduler);
    </script>
</body>

Step 5.2. Configuring the Controller object

In the controller file we will repeat the technique used for dhtmlxGrid.

After that we can leave the connector file as it is. However, in order to show you how to handle events, we'll extend the connector file with handlers for formatting and validating data. Note that events handlers in CodeIgniter take the same parameters as the JavaScript handlers do.

To learn more about handling and using dhtmlxConnector events, read the following:

  • dhtmlxConnector: handling events;
  • dhtmlxConnector: formatting data;
  • dhtmlxConnector: validation.

The articles refer to the PHP version of the dhtmlxConnector. For details on other versions, see the related documentation here.

To configure the Controller object:
  1. In the "controllers " folder create a new file and name it "scheduler.php ".
  2. Open the "scheduler.php " file and add the following code there:

    "controllers/scheduler.php" file

    require_once("./dhtmlx/connector/scheduler_connector.php");
require_once("./dhtmlx/connector/db_phpci.php");
DataProcessor::$action_param ="dhx_editor_status";

class Scheduler extends CI_Controller {
    public function index()
    {
        $this->load->view('scheduler');// loads the view
    }
    public function data()
    {
        //data feed
        $this->load->database();

        $connector = new SchedulerConnector($this->db, "PHPCI");
        $connector->configure(
            "events",
            "event_id",
            "start_date, end_date, event_name"
        );
        $connector->render();
    }
}
  3. Add the beforeRender event handler to format data before rendering:

    "controllers/scheduler.php" file

    public function beforeRender($action){
    if ($action->get_id() == 10)
        //marks an event if its id is 10
        $action->set_userdata("color", "pink");
}
  4. Add the beforeProcessing event handler to validate data on the server side:

    public function beforeProcessing($action){
    //validation before saving
    if ($action->get_value("event_name") == ""){
        $action->invalid();//calls $action->invalid() if data fails validation
        $action->set_response_attribute("details", "Empty data not allowed");
    }
}


Step 6. Create a Grid
(using Model, View, Controller objects)

The technique stated on Step 4 and Step 5 works well if data is loaded from a single DB table. But if data requires more difficult loading and saving, it's better to create a separate model class.

As an example, let's create a model object for the grid we built on Step 4.

We will divide the step into 3 substeps:

  • Step 6.1. Configuring the Model object
  • Step 6.2. Configuring the View object
  • Step 6.3. Configuring the Controller object

Step 6.1. Configuring the Model object

In our model we will specify functions for:

  • Getting an array of data items;
  • Getting an individual properties of a data item;
  • Processing Insert/Update/Delete operations;
  • Validating data before saving.
To configure the Model object:
  1. In the "models " folder create a new file and name it event_model.php
  2. Open the "event_model.php " file and add the following code there:

    "models/event_model.php" file

    <?php

class Event_model extends CI_Model {
    var $event_name;
    var $start_date;
    var $end_date;

    function __construct()
    {
        parent::__construct();
    }
    //returns an array with data
    function get($request){
        $query = $this->db->get("events");
        return $query->result_array();
    }
    //the function takes values of the row data
    protected function get_values($action){
        $this->event_name   = $action->get_value("event_name");
        $this->start_date   = $action->get_value("start_date");
        $this->end_date     = $action->get_value("end_date");
    }
    //inserts a new event
    function insert($action){
        $this->get_values($action);

        if ($this->validate($action)){
           $this->db->insert("events", $this);
           $action->success($this->db->insert_id());
       }
    }
    //updates an event
    function update($action){
        $this->get_values($action);

        if ($this->validate($action)){
            $this->db->update(
                "events",
                $this,
                array("event_id" => $action->get_id())
            );
            $action->success();
        }
    }
    // validates an event before saving
    function validate($action){
        if ($this->event_name == ""){
            $action->invalid();
            $action->set_response_attribute(
                "details",
                "Empty text is not allowed"
            );
            return false;
        }
        return true;
    }
    //deletes an event
    function delete($action){
        $this->db->delete("events", array("event_id" => $action->get_id()));
        $action->success();
    }
}
?>

Step 6.2. Configuring the View object

We won't create a new view and will use the view file specified on Step 4.

Step 6.3. Configuring the Controller object

And let's create a new controller that will process our model.

The difference between the current controler and the controller file of the Step 4 lies is 2 commands:

$this->load->model("event_model");// loads the model
$connector->useModel($this->event_model);//applies the model

The commands allows us to load our model and apply it in the project.

To configure the Controller object:
  1. In the "controllers " folder create a new file and name it "gridmodel.php "
  2. Open the "gridmodel.php " file and add the following code there:

    "controllers/gridmodel.php" file

    require_once("./dhtmlx/connector/grid_connector.php");
require_once("./dhtmlx/connector/db_phpci.php");
DataProcessor::$action_param ="dhx_editor_status";

class GridModel extends CI_Controller {
    public function index()
    {
        //grid's view
        $this->load->view('grid');
    }
    public function data()
    {
        //data feed
        $this->load->database();
        $this->load->model("event_model");

        $connector = new GridConnector($this->db, "PHPCI");
        $connector->configure(
            "events",
            "event_id",
            "start_date, end_date, event_name"
        );
        $connector->useModel($this->event_model);
        $connector->render();
    }
}
That's all. We believe you have enjoyed the tutorial and seen how easy you could integrate CodeIgniter with dhtmlxConnector. The final application logic was not the goal of this article, but interface built here is a good start for creating full functional web application.

Follow our other tutorials to be a true DHTMLX expert.


Using Connector with YII

In this tutorial we would like to show you how to use the dhtmlxConnector library with the Yii framework.

The tutorial is intended for developers who have already been familiar with the Yii framework and DHTMLX library. If you haven't, please follow the links below to get the required information:

  • www.yiiframework.com - the framework site;
  • docs.dhtmlx.com - the DHTMLX documentation.

This tutorial is created for the YII framework version 2.0. To get information about the usage of Connector with the earlier versions of YII, read the Using Connector with YII 1.X docs.

Before continuing, please check that you have YII installed on your computer. If you don't, read "Installation Instructions" to learn how to do this.

Download the demo app here.

After you finish this tutorial, you'll get a grid, a scheduler and a gantt populated with data from a database and able to save changes back to the server.

Particularly, it will consist of 3 parts:

  1. Grid
  2. Scheduler
  3. Gantt


Step 1.Create the App's File

To create our app we need to add source files of 5 components:

  • dhtmlxConnector
  • dhtmlxGrid
  • dhtmlxScheduler
  • dhtmlxGantt
  • dhtmlxDataProcessor

We could download packages of each component and add the files one by one but it's not the best way. It's much easier to download the app package and copy the folder with the files from the package.

To prepare the app's file:
  1. Download the app package (link to download).
  2. Follow the directory tree "yii_dhtmlx/web/lib/ " and copy the "dhtmlx", "dhtmlxGantt" and "dhtmlxScheduler" folders from the downloaded package.


Step 2. Create a Data Source

Now, let's specify what data we will load into our grid, scheduler and gantt.

In the tutorial we will use the "dhtmlx_samples.sql " database. You can use any database available or download the supplied package and import an SQL dump file "dhtmlx_samples.sql " (placed in the root folder) for creating a local database copy.

Note, if you decide to use a database other than "dhtmlx_samples.sql" you will need to adapt the code stated in the tutorial.

To specify the data source for the app:
  1. Import the "dhtmlx_samples.sql " dump file into your local database. The file resides in the root folder of the supplied package.


Step 3. Create a Model

To access the data we need to specify the appropriate model class.

To know more about using models, read the Models article from the YII framework documentation.

To create models:
  1. Create 3 files with the names "GanttTask.php", "GanttLink.php","SchedulerEvent.php" in the "yii_dhtmlx/models" directory.
  2. Open the "GanttTask.php" file and add the following code there:

    "GanttTask.php" file

    <?php
namespace app\models;
use yii;
use yii\db\ActiveRecord;

class GanttTask extends ActiveRecord {
    public static function tableName(){
        return "gantt_tasks";
    }
    public static function primaryKey(){
        return array("id");
    }
}

  3. Add the code below into the "GanttLink.php" file:

    "GanttLink.php" file

    <?php
namespace app\models;
use yii;
use yii\db\ActiveRecord;

class GanttLink extends ActiveRecord {
    public static function tableName(){
        return "gantt_links";
    }
    public static function primaryKey(){
        return array("id");
    }
}

  4. Put the following code to the "SchedulerEvent.php" file:

    "SchedulerEvent.php" file

    <?php
namespace app\models;
use yii;
use yii\db\ActiveRecord;

class SchedulerEvent extends ActiveRecord {
    public static function tableName(){
        return "scheduler_events";
    }
    public static function primaryKey(){
        return array("event_id");
    }
}

    5. For Grid we'll use the same model as the one used for Scheduler - 'scheduler_events'.


Step 4. Create a Grid

On this step, we will create a grid.
We will divide the step into 2 substeps:

  • Step 4.1. Configuring the View object
  • Step 4.2. Configuring the Conroller object

If after completing the step, you will run webhost/yii_dhtmlx/web/grid, the app will produce the following grid that loads data from server and saves them back:

Step 4.1. Configuring the View object

Let's create a View file that will present our grid. In the view we will use a standard code that initializes dhtmlxGrid and if you have been working with this component, it won't be difficult for you to understand the technique.

Also, we will initialize dhtmlxDataProcessor. The initialization of dhtmlxDataProcessor is usual.

If you slightly know dhtmlxGrid and will doubt what one or another command makes, refer to the following tutorials:

  • First Steps with dhtmlxGrid
  • Grid. Work with the Server Side
  • dhtmlxConnector: video tutorial
To configure the View object:
  1. In the "views/grid " folder create a new file and name it "index.php "
  2. Open the "index.php " file and add the following code there:

    "views/grid/index.php" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="../lib/dhtmlx/codebase/dhtmlx.js"></script>
    <link rel="stylesheet" href="../lib/dhtmlx/codebase/dhtmlx.css">
</head>

<body>
    <div id="grid_here" style="width: 600px; height: 400px;"></div>

    <script type="text/javascript" charset="utf-8">
            mygrid = new dhtmlXGridObject('grid_here');
        mygrid.setHeader("Start date,End date,Text");
        mygrid.init();
        // refers to the 'data' action that we will create in the next substep
        mygrid.load("./grid/data");
        // refers to the 'data' action as well
        var dp = new dataProcessor("./grid/data");
        dp.init(mygrid);
        </script>
</body>

Step 4.2. Configuring the Controller object

In the controller, we'll need to implement 2 actions:

  1. One that loads the view.
  2. One that loads and processes data.

To load and process data we will use GridConnector. A common use of GridConnector is:

$connector = new GridConnector(null, "PHPYii");
$connector->configure(new $modelName,$id, $text, $extra,$relation_id);
$connector->render();

The GridConnector constructor takes 2 parameters:

  • null - null is passed, as a model, not a database is used;
  • $PHPYii - the module for working with PHP, the hardcoded value.

The configure method configures the GridConnector object without rendering data and takes 5 parameters:

  • new $modelName - the method creating a model (e.g. new SchedulerEvent());
  • $id - the name of the id field;
  • $text - a comma separated list of rendered data fields;
  • $extra - (optional) a comma separated list of extra fields;
  • $relation_id - (optional) used for building hierarchy in case of Tree and TreeGrid.
To configure the Controller object:
  1. Create a new file in the "controllers " folder and name it "GridController.php ".

  2. Open the "GridController.php " file and specify the namespace for controllers, include the GridConnector class and the method used for creating the model - SchedulerEvent()

    "controllers/GridController.php" file

    <?php
namespace app\controllers;
use Yii;
use yii\web\Controller;
use Dhtmlx\Connector\GridConnector;
use app\models\SchedulerEvent;
  3. Create the root controller class "GridController ":

    "controllers/GridController.php" file

    <?php
namespace app\controllers;
use Yii;
use yii\web\Controller;
use Dhtmlx\Connector\GridConnector;
use app\models\SchedulerEvent;

class GridController extends Controller {                // here you should place all your functions       }

  4. Create an action that will load the view:

    "controllers/GridController.php" file

    class GridController extends Controller {
    public function actionIndex() {                 return $this->render("index");          }                                       }

  5. Create an action that will load data to the Grid. For building the grid structure we'll use the 'SchedulerEvent' model:

    "controllers/GridController.php" file

    class GridController extends Controller {

    public function actionIndex() {
        return $this->render("index");
    }

    public function actionData() {                                                                                             $connector = new GridConnector(null, "PHPYii");             $connector->configure(                                          new SchedulerEvent(),                                       "event_id", "start_date, end_date, event_name"          );                                                          $connector->render();                                   }                                                       }


Step 5. Create a Scheduler

And now, we're going to add a scheduler on the page. The technique used for dhtmlxGrid is the same for all other DHTMLX components, including dhtmlxScheduler.
We will again divide the step into 2 substeps:

  • Step 5.1. Configuring the View object
  • Step 5.2. Configuring the Conroller object

If after completing the step, you will run webhost/yii_dhtmlx/web/scheduler, the app will produce the following scheduler that loads data from server and saves them back:

Step 5.1. Configuring the View object

Once again, we will use a standard code initializing the component.

For a deeper learning of dhtmlxScheduler initialization, read:

  • How to start (step-by-step guide);
  • Scheduler Markup;
  • Common Configuration Instructions;
  • Server-side Integration.
To configure the View object:
  1. In the "views/scheduler " folder create a new file and name it "index.php "
  2. Open the "index.php " file and add the following code there:

    "views/scheduler/index.php" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="../lib/dhtmlxScheduler/codebase/dhtmlxscheduler.js"></script>
    <link rel="stylesheet" href="../lib/dhtmlxScheduler/codebase/dhtmlxscheduler.css">
</head>

<body>
    <div id="scheduler_here" class="dhx_cal_container">
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>
            <div class="dhx_cal_date"></div>
            <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
            <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
            <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
        </div>
        <div class="dhx_cal_header">
        </div>
        <div class="dhx_cal_data">
        </div>
    </div>

<script type="text/javascript" charset="utf-8">
        document.body.onload = function() {
        scheduler.init('scheduler_here',new Date(2010,7,1),"month");
        scheduler.setLoadMode("month");
         // refers to the 'data' action that we will create in the next substep
        scheduler.load("./scheduler/data");
        // refers to the 'data' action as well
        var dp = new dataProcessor("./scheduler/data");
        dp.init(scheduler);
    };
    </script>
</body>

Step 5.2. Configuring the Controller object

In the controller, we'll use the same technique that was used for Grid. So let's implement the following actions:

  1. One that loads the view.
  2. One that loads and processes data.

To load and process data we will use SchedulerConnector. A common use of SchedulerConnector is:

$connector = new SchedulerConnector(null, "PHPYii");
$connector->configure(new $modelName,$id, $text, $extra);
$connector->render();

The SchedulerConnector constructor takes 2 parameters:

  • null - null is passed, as a model, not a database is used;
  • $PHPYii - the module for working with PHP, the hardcoded value.

The configure method configures the SchedulerConnector object without rendering data and takes 4 parameters:

  • new $modelName - the method creating a model (e.g. new SchedulerEvent());
  • $id - the name of the id field;
  • $text - a comma separated list of rendered data fields;
  • $extra - (optional) a comma separated list of extra fields.
To configure the Controller object:
  1. Create a new file in the "controllers " folder and name it "SchedulerController.php ".

  2. Open the "SchedulerController.php " file and specify the namespace for controllers, include the SchedulerConnector class and the used model - SchedulerEvent:

    "controllers/SchedulerController.php" file

    <?php
namespace app\controllers;
use Yii;
use yii\web\Controller;
use Dhtmlx\Connector\SchedulerConnector;
use app\models\SchedulerEvent;

  3. Create the root controller class "SchedulerController ":

    "controllers/SchedulerController.php" file

    <?php
namespace app\controllers;
use Yii;
use yii\web\Controller;
use Dhtmlx\Connector\SchedulerConnector;
use app\models\SchedulerEvent;

class SchedulerController extends Controller {           // here you should place all your functions       }

  4. Create an action that will load the view:

    "controllers/SchedulerController.php" file

    class SchedulerController extends Controller {
    public function actionIndex() {                 return $this->render("index");          }                                       }

  5. Create an action that will load data to the Scheduler. For building the grid structure we'll use the 'SchedulerEvent' model:

    "controllers/SchedulerController.php" file

    class SchedulerController extends Controller {
    public function actionIndex() {
        return $this->render("index");
    }
    public function actionData() {                                                                                                     $connector = new SchedulerConnector(null, "PHPYii");                $connector->configure(                                                  new SchedulerEvent(),                                               "event_id", "start_date, end_date, event_name"                  );                                                                  $connector->render();                                           }                                                               }


Step 6. Create a Gantt

And now, we're going to add a gantt on the page. The technique used for dhtmlxGrid is the same for all other DHTMLX components, including dhtmlxGantt.
We will divide the step into 2 substeps again:

  • Step 6.1. Configuring the View object
  • Step 6.2. Configuring the Controller object

If after completing the step, you will run webhost/yii_dhtmlx/web/gantt, the app will produce the following gantt that loads data from server and saves them back:

Step 6.1. Configuring the View object

Let's create a View file that will present our gantt.

For a deeper learning of dhtmlxGantt initialization, read:

  • How to Start with dhtmlxGantt;
  • Exploring Ways to Configure the Gantt Chart;
  • Storing Data on the Server Side.
To configure the View object:
  1. In the "views/gantt " folder create a new file and name it "index.php "
  2. Open the "index.php " file and add the following code there:

    "views/gantt/index.php" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="../lib/dhtmlxGantt/codebase/dhtmlxgantt.js"></script>
    <link rel="stylesheet" href="../lib/dhtmlxGantt/codebase/dhtmlxgantt.css">
</head>

<body>
    <div id="gantt_here" style='width:100%; height:250px;'></div>

    <script type="text/javascript">
            gantt.init("gantt_here", new Date(2010,7,1), new Date(2010,8,1));
        // refers to the 'data' action that we will create in the next substep
        gantt.load("./gantt/data", "xml");
        //  refers to the 'data' action as well
        var dp = new dataProcessor("./gantt/data");
        dp.init(gantt);
        </script>
</body>

Step 6.2. Configuring the Controller object

The configuration of GanttConnector is the same as those of GridConnector and SchedulerConnector. Thus, we need to implement the actions below:

  1. One that loads the view.
  2. One that loads and processes data.

To load and process data we will use GanttConnector. A common use of GanttConnector is:

$connector = new GanttConnector(null, "PHPYii");
$connector->render_links(new $modelName, $id, $links);
$connector->render_table(new $modelName, $id, $tasks);

The GanttConnector constructor takes 2 parameters:

  • null - null is passed, as a model, not a database is used;
  • $PHPYii - the module for working with PHP, the hardcoded value.

The render_links method configures connector, retrieves data from a table with links and takes 3 parameters:

  • new $modelName - the method creating a model (e.g.new GanttLink());
  • $id - the name of the id field;
  • $links - a list of fields which will be used as data properties of a link.

The render_table method configures connector, retrieves data from a table with tasks and takes 3 parameters:

  • new $modelName - the method creating a model (e.g.new GanttTask());
  • $id - the name of the id field;
  • $tasks - a list of fields which will be used as data properties of a task.
To configure the Controller object:
  1. Create a new file in the "controllers " folder and name it "GanttController.php ".

  2. Open the "GanttController.php " file and specify the namespace for controllers and include the GanttConnector class and two models - 'GanttLink' and 'GanttTask':

    "controllers/GanttController.php" file

    <?php
namespace app\controllers;
use Yii;
use yii\web\Controller;
use Dhtmlx\Connector\GanttConnector;
use app\models\GanttTask;
use app\models\GanttLink;
  3. Create the root controller class "GanttController ":

    "controllers/GanttController.php" file

    <?php
namespace app\controllers;
use Yii;
use yii\web\Controller;
use Dhtmlx\Connector\GanttConnector;
use app\models\GanttTask;
use app\models\GanttLink;

class GanttController extends Controller {               // here you should place all your functions       }

  4. Create an action that will load the view:

    "controllers/GanttController.php" file

    class GanttController extends Controller {
    public function actionIndex() {                 return $this->render("index");          }                                       }

  5. Create an action that will load data to the Gantt. For building the gantt structure we'll use two models - 'GanttTask' and 'GanttLink':

    "controllers/GanttController.php" file

    class GanttController extends Controller {

    public function actionIndex() {
        return $this->render("index");
    }

    public function actionData() {                                                                                                                 $connector = new GanttConnector(null, "PHPYii");                                $connector->render_links(new GanttLink(),"id","source,target,type");            $connector->render_table(                                                           new GanttTask(),                                                                "id",                                                                           "start_date,duration,text,progress,parent"                                 );                                                                           }                                                                           }
That's all. We believe you have enjoyed the tutorial and seen how easy you could integrate Yii with dhtmlxConnector. The final application logic was not the goal of this article, but the interface built here is a good start for creating a fully-functional web application.

Follow our other tutorials to become a true DHTMLX expert.


Using Connector with YII 1.X

In this tutorial we would like to show you how to use the dhtmlxConnector library with the Yii framework.

The tutorial is intended for developers who have already been familiar with the Yii framework and DHTMLX library. If you haven't, please follow the links below to get the required information:

  • www.yiiframework.com - the framework site;
  • docs.dhtmlx.com - the DHTMLX documentation.

Before continuing, please check that you have Yii installed on your computer. If you don't, read "Installation Instructions" to learn how to do this.

Download the demo app here.

After you finish this tutorial, you'll get a grid and a scheduler populated with data from a database and able to save changes back to the server.


Step 1.Create the App's File

To create our app we need to add source files of 4 components:

  • dhtmlxConnector
  • dhtmlxGrid
  • dhtmlxScheduler
  • dhtmlxDataProcessor

We could download packages of each component and add the files one by one but it's not the best way. It's much easier to download the app package and copy the folder with the files from the package.

To prepare the app's file:
  1. Download the app package (link to download) and copy the DHTMLX folder to the root folder of your project.


Step 3. Create a Model

To access the data we need to create a model class. You can make this using the built-in Web-based code generator.

For more details of such generating, read the Creating Your First Yii Application article of the framework documentation.

To create a model:
  1. Run the Model Generator, to create a model for the app.


Step 4. Create a Grid

On this step, we will create a grid.
We will divide the step into 2 substeps:

  • Step 4.1. Configuring the View object
  • Step 4.2. Configuring the Conroller object

If after completing the step, you will run webhost/cdemo/event/grid, the app will produce the following grid that loads data from server and saves them back:

Step 4.1. Configuring the View object

Let's create a View file that will present our grid. In the view we will use a standard code that initializes dhtmlxGrid and if you have been working with this component, it won't be difficult for you to understand the technique.

Also, we will initialize dhtmlxDataProcessor.Again, initialization of dhtmlxDataProcessor is usual.

If you slightly know dhtmlxGrid and will doubt what one or another command makes, refer to the following tutorials:

  • First Steps with dhtmlxGrid
  • Grid. Work with the Server Side
  • dhtmlxConnector: video tutorial
To configure the View object:
  1. In the "views " folder create a new file and name it "grid.php "
  2. Open the "grid.php " file and add the following code there:

    "views/grid.php" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="/dhtmlx/grid/dhtmlxcommon.js"></script>
    <script src="/dhtmlx/grid/dhtmlxgrid.js"></script>
    <script src="/dhtmlx/grid/dhtmlxgridcell.js"></script>

    <script src="/dhtmlx/dhtmlxdataprocessor.js"></script>
    <script src="/dhtmlx/connector/connector.js"></script>

    <link rel="stylesheet" href="/dhtmlx/grid/dhtmlxgrid.css">
    <link rel="stylesheet" href="/dhtmlx/grid/skins/dhtmlxgrid_dhx_skyblue.css">
</head>

<body>
    <div id="grid_here" style="width:600px; height:400px;"> </div>

        <script type="text/javascript" charset="utf-8">
             mygrid = new dhtmlXGridObject('grid_here');
         mygrid.setHeader("Start date,End date,Text");
         mygrid.init();
         // refers to the 'grid_data' action that we will create in the next substep
         mygrid.load("./grid_data");
         // refers to the 'grid_data' action as well
         var dp = new dataProcessor("./grid_data");
         dp.init(mygrid);
            </script>
</body>

Step 4.2. Configuring the Controller object

In the controller, we'll need to implement 2 actions:

  1. One that loads the view.
  2. One that loads and processes data.

To load and process data we will use GridConnector. A common use of GridConnector is:

$connector = new GridConnector($db, $type);
$connector->configure($table,$id, $text, $extra,$relation_id);
$connector->render();

The GridConnector constructor takes 2 parameters:

  • $db - the DB connection variable;
  • $type - the database type.

Remember, in case of working with YII, the parameters will get the values:
Events::model() (refers to the model used in the app) and "PHPYii" (the hardcoded value).

The configure method configures the GridConnector object without rendering data and takes 5 parameters:

  • $table - the name of a table. In case of YII, the parameter takes the hardcoded value - '-';
  • $id - the name of the id field;
  • $text - a comma separated list of rendered data fields;
  • $extra - (optional) a comma separated list of extra fields;
  • $relation_id - (optional) used for building hierarchy in case of Tree and TreeGrid.
To configure the Controller object:
  1. In the "controllers " folder create a new file and name it "EventController.php ".
  2. Open the "EventController.php " file and add files required for working with dhtmlxConnector:

    "controllers/EventController.php" file

    <?php
    require_once(dirname(__FILE__)."/../../../dhtmlx/connector/grid_connector.php");
    require_once(dirname(__FILE__)."/../../../dhtmlx/connector/scheduler_connector.php");
    require_once(dirname(__FILE__)."/../../../dhtmlx/connector/db_phpyii.php");
?>
  3. Create the root controller class EventController with the primary action:

    "controllers/EventController.php" file

    <?php
    require_once(dirname(__FILE__)."/../../../dhtmlx/connector/grid_connector.php");
    require_once(dirname(__FILE__)."/../../../dhtmlx/connector/scheduler_connector.php");
    require_once(dirname(__FILE__)."/../../../dhtmlx/connector/db_phpyii.php");

    class EventController extends Controller {           public function actionIndex() {                      $this->render('index');                      }                                            }                                            ?>
  4. Create an action that will load the view:

    "controllers/EventController.php" file

    class EventController extends Controller {
    public function actionIndex() {
        $this->render('index');
    }
    public function actionGrid() {                              $this->render('grid'); //loads the 'grid' view      }                                                   }
  5. Create an action that will load data to the grid:

    controllers/EventController.php

    class EventController extends Controller {
    public function actionIndex() {
        $this->render('index');
    }
    public function actionGrid() {
        $this->render('grid');
    }
    public function actionGrid_data() {                                                    $grid = new GridConnector(Events::model(), "PHPYii");                              $grid->configure("-", "event_id", "start_date, end_date, event_name");             $grid->render();                                                               }                                                                              }


Step 5. Create a Scheduler

And now, we're going to add a scheduler on the page. The technique used for dhtmlxGrid is the same for all other DHTMLX components, including dhtmlxScheduler.
We will again divide the step into 2 substeps:

  • Step 4.1. Configuring the View object
  • Step 4.2. Configuring the Conroller object

If after completing the step, you will run webhost/cdemo/event/scheduler, the app will produce the following scheduler that loads data from server and saves them back:

Step 5.1. Configuring the View object

Again, we will use a standard code initializing the component.

For a deeper learning of dhtmlxScheduler initialization, read:

  • How to start (step-by-step guide);
  • Scheduler Markup
  • Common Configuration Instructions;
  • Server-side Integration.
To configure the View object:
  1. In the "views " folder create a new file and name it "scheduler.php "
  2. Open the "scheduler.php " file and add the following code there:

    "views/scheduler.php" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="/dhtmlx/scheduler/dhtmlxscheduler.js"></script>
    <link rel="stylesheet" href="/dhtmlx/scheduler/dhtmlxscheduler_glossy.css">
</head>

<body>
    <div id="scheduler_here" class="dhx_cal_container" style='width:800px; height:600px;'>
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>
            <div class="dhx_cal_date"></div>
            <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
            <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
            <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
        </div>
        <div class="dhx_cal_header">
        </div>
        <div class="dhx_cal_data">
        </div>
    </div>

<script type="text/javascript" charset="utf-8">
        scheduler.config.multi_day = true;

    scheduler.config.xml_date="%Y-%m-%d %H:%i";
    scheduler.config.first_hour = 5;
    scheduler.init('scheduler_here',new Date(2010,7,5),"week");
     //refers to the 'data' action that we will create in the next substep
    var dp = new dataProcessor("/scheduler/data");
    scheduler.load("/scheduler/data");
    //refers to the 'data' action as well
    var dp = new dataProcessor("/scheduler/data");
    dp.action_param ="dhx_editor_status";

    dp.init(scheduler);
    </script>
</body>

Step 5.2. Configuring the Controller object

We won't create a separate controller file for the scheduler and just add the required functionality to the grid's controller.

To configure the Controller object:
  1. Create an action that will load the view displaying the scheduler in the "EventController.php " file:

    "controllers/EventController.php" file

    class EventController extends Controller {
    public function actionIndex() {
        $this->render('index');
    }
    public function actionGrid() {
        $this->render('grid');
    }
    public function actionGrid_data() {
        $grid = new GridConnector(Events::model(), "PHPYii");
        $grid->configure("-", "event_id", "start_date, end_date, event_name");
        $grid->render();
    }
    public function actionScheduler() {                                     $this->render('scheduler'); //loads the 'scheduler' view        }                                                               }
  2. Create an action that will load data to the scheduler:

    "controllers/EventController.php" file

    class EventController extends Controller {
    public function actionIndex() {
        $this->render('index');
    }
    public function actionGrid() {
        $this->render('grid');
    }
    public function actionGrid_data() {
        $grid = new GridConnector(Events::model(), "PHPYii");
        $grid->configure("-", "event_id", "start_date, end_date, event_name");
        $grid->render();
    }
    public function actionScheduler() {
        $this->render('scheduler'); //loads the 'scheduler' view
    }
    public function actionScheduler_data() {                                                 $scheduler = new SchedulerConnector(Events::model(), "PHPYii");                      $scheduler->configure("-","event_id","start_date,end_date,event_name");          $scheduler->render();                                                            }                                                                                }
That's all. We believe you have enjoyed the tutorial and seen how easy you could integrate Yii with dhtmlxConnector. The final application logic was not the goal of this article, but the interface built here is a good start for creating a fully-functional web application.

Follow our other tutorials to become a true DHTMLX expert.


Using Connector with CakePHP

In this tutorial we would like to show you how to use the dhtmlxConnector library with the CakePHP framework.

The tutorial is intended for developers who have already been familiar with the CakePHP framework and DHTMLX library. If you haven't, please follow the links below to get the required information:

  • cakephp.org - the framework site;
  • docs.dhtmlx.com - the DHTMLX documentation.

This tutorial is designed for version 3.0 of CakePHP. If you have an older verion of the framework, you can read the corresponding docs for CakePHP versions 2.x.

Before continuing, please check that you have CakePHP installed on your computer. If you don’t, read the "Installation" guide to learn how to do this.

Download the demo app here.

After you finish this tutorial, you'll get a grid, a scheduler and a gantt populated with data from a database and able to save changes back to the server.

  1. Grid
  2. Scheduler
  3. Gantt


Step 1. Include Required Code Files

To create our app we need to add source files of 5 components:

  • dhtmlxConnector
  • dhtmlxGrid
  • dhtmlxScheduler
  • dhtmlxGantt
  • dhtmlxDataProcessor

We could download packages of each component and add the files one by one but it's not the best way. It's much easier to download the app package and copy the folder with the files from the package.

To prepare the app's file:
  1. Download the app package (link to download).
  2. Follow the directory tree "cakephp_dhtmlx/webroot/lib/ " and copy the "dhtmlx", "dhtmlxGantt" and "dhtmlxScheduler" folders from the downloaded package.


Step 3. Create a Model

To access the data we need to specify the appropriate model class.

To know more about using models, read the Database Access & ORM article from the framework documentation.

To create models:
  1. Create 3 files with the names "GanttTaskTable.php", "GanttLinkTable.php","SchedulerEventTable.php" in the "cakephp_dhtmlx/src/Model/Table" directory.
  2. Open the "GanttTaskTable.php" file and add the following code there:

    "GanttTaskTable.php" file

    <?php
namespace App\Model\Table;
use Cake\ORM\Table;

class GanttTaskTable extends Table {
    public function initialize(array $config){
        $this->table('gantt_tasks');
        $this->primaryKey('id');
    }
}

  3. Add the code below into the "GanttLinkTable.php" file:

    "GanttLinkTable.php" file

    <?php
namespace App\Model\Table;
use Cake\ORM\Table;

class GanttLinkTable extends Table {
    public function initialize(array $config){
        $this->table('gantt_links');
        $this->primaryKey('id');
    }
}

  4. Put the following code to the "SchedulerEventTable.php" file:

    "SchedulerEventTable.php" file

     <?php
namespace App\Model\Table;
use Cake\ORM\Table;

class SchedulerEventTable extends Table {
    public function initialize(array $config){
        $this->table('scheduler_events');
        $this->primaryKey('event_id');
    }
}

    5. For Grid we'll use the same model as the one used for Scheduler - 'scheduler_events'.


Step 4. Create a Controller

In the controller, we need to implement 4 actions:

  1. One, that loads grid's, scheduler's and gantt's views
  2. One, that loads data to the grid
  3. One, that loads data to the scheduler
  4. One, that loads data to the gantt

To load and process data in the components, we will use Connectors. Let's have a look at the Connectors usage on the example of GridConnector:

$connector = new GridConnector(null, "PHPcake");
$connector->configure(TableRegistry::get($modelName),$id,$text,$extra,$relation_id);
$connector->render();

The GridConnector constructor takes 2 parameters:

  • $null - null is passed, as a model, not a database is used;
  • "PHPCake" - the module for working with PHP, the hardcoded value.

The configure method configures the GridConnector model object without rendering data and takes 5 parameters:

  • TableRegistry::get($modelName) - the method that returns a model;
  • $id - the name of the id field;
  • $text - a comma separated list of rendered data fields;
  • $extra - (optional) a comma separated list of extra fields;
  • $relation_id - (optional) used for building hierarchy in case of Tree and TreeGrid.
To configure the Controller object:
  1. Create 3 files in the "Controller" folder and name them "GanttController.php", "GridController.php" and "SchedulerController.php ".

  2. Open the "GridController.php " file and:

    • specify the namespace for controllers
    • include the GridConnector class
    • include the method used for creating the model - TableRegistry()
    • add the class for working with time

    "Controller/GridController.php" file

    <?php
namespace App\Controller;
use Dhtmlx\Connector\GridConnector;
use Cake\ORM\TableRegistry;
use Cake\I18n\Time;

  3. Open the "GridController.php " file and create the controller class "GridController " with the action answering for displaying the component:

    "Controller/GridController.php" file

    <?php
class GridController extends AppController {

    public function display() {
        $this->render("grid");
    }
}

    In the "GanttController.php" and "SchedulerController.php" files create the controller classes "GanttController" and "SchedulerController", respectively, the same as you created the "GridController" class. Then add the corresponding actions for displaying gantt and scheduler.

  4. Open the "GridController.php" and add an action that will load data to the grid. For building the grid structure we'll use the 'SchedulerEvent' model:

    "Controller/GridController.php" file

    class GridController extends AppController {

    public function display() {
        $this->render("grid");
    }

    public function data() {                                                                // the method is used to render dates in the right format                           Time::setToStringFormat('YYYY-MM-dd HH:mm:ss');                                     $connector = new GridConnector(null, "PHPCake");                                    $connector->configure(TableRegistry::get('SchedulerEvent'), "event_id",                 "start_date, end_date, event_name");                                            $connector->render();                                                           }
}

  5. Open the "SchedulerController.php " and add an action that will load data to the scheduler. To create the scheduler sctructure, we'll use the 'SchedulerEvent' model:

    "Controller/SchedulerController.php" file

    class SchedulerControllerController extends AppController {

    public function display() {
        $this->render("scheduler");
    }

    public function data() {                                                                // the method is used to render dates in the right format                           Time::setToStringFormat('YYYY-MM-dd HH:mm:ss');                                     $connector = new SchedulerConnector(null, "PHPCake");                               $connector->configure(TableRegistry::get('SchedulerEvent'), "event_id",                 "start_date, end_date, event_name");                                            $connector->render();                                                           }
}

  6. Create an action that will load data to the gantt. To create the Gantt's structure we'll need two models - 'GanttLink' and 'GanttTask':

    "Controller/GanttController.php" file

    class GanttController extends AppController {

    public function display() {
        $this->render("gantt");
    }

    public function data() {                                                            // the method is used to render dates in the right format                       Time::setToStringFormat('YYYY-MM-dd HH:mm:ss');                                 $connector = new GanttConnector(null, "PHPCake");                               $connector->render_links(TableRegistry::get('GanttLink'), "id",                     "source,target,type");                                                      $connector->render_table(TableRegistry::get('GanttTask'), "id",                     "start_date,duration,text,progress,parent");                            }
}

    There are 2 specific methods used for configuring Gantt Connector:
    1) The render_links method configures connector, retrieves data from a table with links and takes 3 parameters:
    • TableRegistry::get($modelName) - the method that returns a model ('GanttLink');
    • $id - the name of the id field;
    • $links - a list of fields which will be used as data properties of a link.
    2) The render_table method configures connector, retrieves data from a table with tasks and takes 3 parameters:
    • TableRegistry::get($modelName) - the method that returns a model ('GanttTask');
    • $id - the name of the id field;
    • $tasks - a list of fields which will be used as data properties of a task.


Step 5. Create a View for the Grid

Now, we will create a view for the grid. We will use a standard code initializing the component.

If after completing the step, you will run webhost/cakephp_dhtmlx/grid, the app will produce the following grid that loads data from server and saves them back:

If you slightly know dhtmlxGrid and will doubt what one or another command makes, refer to the following tutorials:

  • First Steps with dhtmlxGrid
  • Grid. Work with the Server Side
  • dhtmlxConnector: video tutorial
To configure the View object for the grid:
  1. In the "Template " folder create a subfolder "Grid "
  2. Add a new file to the "Grid " subfolder and name it "grid.ctp "
  3. Open the "grid.ctp " file and add the following code there:

    "Template/Grid/grid.ctp" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="lib/dhtmlx/codebase/dhtmlx.js"></script>
    <link rel="stylesheet" href="lib/dhtmlx/codebase/dhtmlx.css">
</head>

<body>
    <div id="grid_here" style="width: 600px; height: 400px;"></div>
    <input type="button" value='Add new row' onclick='add_row()'>
    <input type="button" value='Delete selected'
            onclick='mygrid.deleteSelectedRows()'>

    <script type="text/javascript" charset="utf-8">
            function add_row(){
            var id = mygrid.uid();
            mygrid.addRow(id, ["2010-04-01","2012-02-29","New record"]);
            mygrid.selectRowById(id);
        }
        mygrid = new dhtmlXGridObject('grid_here');
        mygrid.setHeader("Start date,End date,Text");
        mygrid.init();
        // refers to the 'grid_data' action we have created on the previous step
        mygrid.load("./grid_data");
        // refers to the 'grid_data' action as well
        var dp = new dataProcessor("./grid_data");
        dp.init(mygrid);
        </script>
</body>


Step 6. Create a View for the Scheduler

The next step is to create a view for the scheduler. Once again, we will use a standard code to initialize the component.

If after completing the step, you will run webhost/cakephp_dhtmlx/scheduler, the app will produce the following scheduler that loads data from server and saves them back:

For a deeper learning of dhtmlxScheduler initialization, read:

  • How to start (step-by-step guide);
  • Scheduler Markup;
  • Common Configuration Instructions;
  • Server-side Integration.
To configure the View object for the scheduler:
  1. Add a new folder to the "Template " folder and name it "Scheduler "
  2. In the "Scheduler " subfolder create a file and name it "scheduler.ctp "
  3. Open the "scheduler.ctp " file and add the following code there:

    "Template/Scheduler/scheduler.ctp" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="lib/dhtmlxScheduler/codebase/dhtmlxscheduler.js"></script>
    <link rel="stylesheet" href="lib/dhtmlxScheduler/codebase/dhtmlxscheduler.css">
</head>

<body>
    <div id="scheduler_here" class="dhx_cal_container"
      style='width:800px; height:600px;'>
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>
            <div class="dhx_cal_date"></div>
            <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
            <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
            <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
        </div>
        <div class="dhx_cal_header">
        </div>
        <div class="dhx_cal_data">
        </div>
    </div>

<script type="text/javascript" charset="utf-8">
        document.body.onload = function() {
        scheduler.init('scheduler_here',new Date(2010,7,1),"month");
        scheduler.setLoadMode("month");
        // refers to the 'scheduler_data' action
        scheduler.load("./scheduler_data");
        // refers to the 'scheduler_data' action as well
        var dp = new dataProcessor("./scheduler_data");
        dp.init(scheduler);
    };
    </script>
</body>


Step 7. Create a View for the Gantt

The final step is to create a view for the gantt. As with the two previous components, we'll use a standard code for initializing the component.

When you complete the step, run webhost/cakephp_dhtmlx/gantt, and the app will produce the gantt presented in the picture below. It will be able to load data from the server and save them back.

To learn more about dhtmlxGantt initialization, read the articles:

  • How to Start with dhtmlxGantt;
  • Exploring Ways to Configure the Gantt Chart;
  • Storing Data on the Server Side.
To configure the View object for the gantt:
  1. Add a new folder to the "Template " folder and name it "Gantt "
  2. In the "Gantt " subfolder create a file and name it "gantt.ctp "
  3. Open the "gantt.ctp " file and add the following code there:

    "Template/Gantt/gantt.ctp" file

    <!DOCTYPE html>
<head>
    <script src="lib/dhtmlxGantt/codebase/dhtmlxgantt.js"></script>
    <link rel="stylesheet" href="lib/dhtmlxGantt/codebase/dhtmlxgantt.css">
</head>

<body>
    <div id="gantt_here" style='width:100%; height:250px;'></div>

    <script type="text/javascript">
            gantt.init("gantt_here", new Date(2010,7,1), new Date(2010,8,1));
        // refers to the 'gantt_data' action
        gantt.load("./gantt_data", "xml");
        // refers to the 'gantt_data' action as well
        var dp = new dataProcessor("./gantt_data");
        dp.init(gantt);
        </script>
</body>
That's all. We believe you have enjoyed the tutorial and seen how easy it was to integrate CakePHP with dhtmlxConnector. The final application logic was not the goal of this article, but interface built here is a good start for creating a fully-functional web application.

Follow our other tutorials to become a true DHTMLX expert.


Using Connector with CakePHP v2.X

In this tutorial we would like to show you how to use the dhtmlxConnector library with the CakePHP framework.

The tutorial is intended for developers who have already been familiar with the CakePHP framework and DHTMLX library. If you haven't, please follow the links below to get the required information:

  • cakephp.org - the framework site;
  • docs.dhtmlx.com - the DHTMLX documentation.

Before continuing, please check that you have CakePHP installed on your computer. If you don’t, read "Installation" to learn how to do this.

Download the demo app here.

After you finish this tutorial, you'll get a grid and a scheduler populated with data from a database and able to save changes back to the server.


Step 1. Include Required Code Files

To create our app we need to add source files of 4 components:

  • dhtmlxConnector
  • dhtmlxGrid
  • dhtmlxScheduler
  • dhtmlxDataProcessor

We could download packages of each component and add the files one by one but it's not the best way. It's much easier to download the app package and copy the folder with the files from the package.

To prepare the app's file:
  1. Download the app package (link to download).
  2. Follow the directory tree "webhost/CakePHP/app/webroot/ " and copy the "DHTMLX" folder from the downloaded package.


Step 2. Create a Data Source

Now, let's specify what data we will load into our grid and scheduler.

In the tutorial we will use the "events.sql " database. You can use any database available or download the supplied package and import an SQL dump file "events.sql " (placed in the root folder) for creating a local database copy.

Note, if you decide to use a database other than "events.sql" you will need to adapt the stated in the tutorial code.

To specify the data source for the app:
  1. Import the "events.sql " dump file into your local database. The file resides in the root folder of the supplied package.


Step 3. Create a Model

To access the data we need to specify the appropriate model class.

To know more about using models, read the Models article from the framework documentation.

To create a model:
  1. Create a new file with the name "event.php " in the "Model " folder.
  2. Open the "event.php " file and add the following code there:

    "Model/event.php" file

    <?php
class Event extends AppModel
{
      var $name = 'Event';
      var $primaryKey = 'event_id';
}


Step 4. Create a Controller

In the controller, we need to implement 3 actions:

  1. One, that loads grid's and scheduler's views
  2. One, that loads data to the grid
  3. One, that loads data to the scheduler

To load and process data we will use GridConnector. A common use of GridConnector is:

$connector = new GridConnector($db, $type);
$connector->configure($table,$id, $text, $extra,$relation_id);
$connector->render();

The GridConnector constructor takes 2 parameters:

  • $db - the DB connection variable;
  • $type - the database type.

Remember, in case of working with CakePHP, the parameters will get the values:
$this→Event (refers to the model used in the app) and "PHPCake" (the hardcoded value).

The configure method configures the GridConnector object without rendering data and takes 5 parameters:

  • $table - the name of a table;
  • $id - the name of the id field;
  • $text - a comma separated list of rendered data fields;
  • $extra - (optional) a comma separated list of extra fields;
  • $relation_id - (optional) used for building hierarchy in case of Tree and TreeGrid.
To configure the Controller object:
  1. Create a new file in the "controllers " folder and name it "EventController.php ".
  2. Open the "EventController.php " file and add files required for working with dhtmlxConnector:

    "controllers/EventController.php" file

    <?php
    require_once("../Vendor/connector/grid_connector.php");
    require_once("../Vendor/connector/scheduler_connector.php");
    require_once("../Vendor/connector/db_phpcake.php");
  3. Create the root controller class "EventController " with the primary "Index " action and actions answering for displaying the components:

    "controllers/EventController.php" file

    <?php
require_once("../Vendor/connector/grid_connector.php");
require_once("../Vendor/connector/scheduler_connector.php");
require_once("../Vendor/connector/db_phpcake.php");

    class EventController extends AppController {         public function grid(){}                          public function scheduler(){}                     public function index(){}                     }
  4. Create an action that will load data to the grid:

    "controllers/EventController.php" file

    <?php
require_once("../Vendor/connector/grid_connector.php");
require_once("../Vendor/connector/scheduler_connector.php");
require_once("../Vendor/connector/db_phpcake.php");

    class EventController extends AppController {
        public function grid(){}
        public function scheduler(){}
        public function index(){}
    }
    public function grid_data(){                                                            $this->autoRender = false;                                                          $connector = new GridConnector($this->Event, "PHPCake");                            $connector->configure("events","event_id","start_date,end_date,event_name");        $connector->render();                                                           }
  5. Create an action that will load data to the scheduler:

    "controllers/EventController.php" file

    <?php
require_once("../Vendor/connector/grid_connector.php");
require_once("../Vendor/connector/scheduler_connector.php");
require_once("../Vendor/connector/db_phpcake.php");

    class EventController extends AppController {
        public function grid(){}
        public function scheduler(){}
        public function index(){}
    }
    public function grid_data(){
        $this->autoRender = false;
        $connector = new GridConnector($this->Event, "PHPCake");
        $connector->configure("events","event_id","start_date,end_date,event_name");
        $connector->render();
    }
    public function scheduler_data(){                                                       $this->autoRender = false;                                                           $connector = new SchedulerConnector($this->Event, "PHPCake");                       $connector->configure("events","event_id","start_date,end_date,event_name");        $connector->render();                                                           }


Step 5. Create a View for the Grid

Now, we will create a view for the grid. Again, we will use a standard code initializing the component.

If after completing the step, you will run webhost/event/grid, the app will produce the following grid that loads data from server and saves them back:

If you slightly know dhtmlxGrid and will doubt what one or another command makes, refer to the following tutorials:

  • First Steps with dhtmlxGrid
  • Grid. Work with the Server Side
  • dhtmlxConnector: video tutorial
To configure the View object for the grid:
  1. In the "View " folder create a subfolder "Event "
  2. Add a new file to the "Event " subfolder and name it "grid.ctp "
  3. Open the "grid.ctp " file and add the following code there:

    "View/Event/grid.ctp" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="/dhtmlx/grid/dhtmlxcommon.js"></script>
    <script src="/dhtmlx/grid/dhtmlxgrid.js"></script>
    <script src="/dhtmlx/grid/dhtmlxgridcell.js"></script>

    <script src="/dhtmlx/dhtmlxdataprocessor.js"></script>
    <script src="/dhtmlx/connector/connector.js"></script>

    <link rel="stylesheet" href="/dhtmlx/grid/dhtmlxgrid.css">
    <link rel="stylesheet" href="/dhtmlx/grid/skins/dhtmlxgrid_dhx_skyblue.css">
</head>

<body>
    <div id="grid_here" style="width:600px; height:400px;"> </div>
    <script type="text/javascript" charset="utf-8">
            mygrid = new dhtmlXGridObject('grid_here');
        mygrid.setHeader("Start date,End date,Text");
        mygrid.init();
        // refers to the 'grid_data' action we have created on the previous step
        mygrid.load("./grid_data");
        // refers to the 'grid_data' action as well
        var dp = new dataProcessor("./grid_data");
        dp.init(mygrid);
        </script>
</body>


Step 6. Create a View for the Scheduler

And the last our step is to create a view for the scheduler. Again, we will use a standard code initializing the component.

If after completing the step, you will run webhost/event/scheduler, the app will produce the following scheduler that loads data from server and saves them back:

For a deeper learning of dhtmlxScheduler initialization, read:

  • How to start (step-by-step guide);
  • Scheduler Markup
  • Common Configuration Instructions;
  • Server-side Integration.
To configure the View object for the scheduler:
  1. Add a new file to the "View/Event " folder and name it "scheduler.ctp "
  2. Open the "scheduler.ctp " file and add the following code there:

    "View/Event/scheduler.ctp" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="/dhtmlx/scheduler/dhtmlxscheduler.js"></script>
    <link rel="stylesheet" href="/dhtmlx/scheduler/dhtmlxscheduler_glossy.css">
</head>

<body>
    <div id="scheduler_here" class="dhx_cal_container"
      style='width:800px; height:600px;'>
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>
            <div class="dhx_cal_date"></div>
            <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
            <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
            <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
        </div>
        <div class="dhx_cal_header">
        </div>
        <div class="dhx_cal_data">
        </div>
    </div>

<script type="text/javascript" charset="utf-8">
        scheduler.config.multi_day = true;

    scheduler.config.xml_date="%Y-%m-%d %H:%i";
    scheduler.config.first_hour = 5;
    scheduler.init('scheduler_here',new Date(2010,7,5),"week");
    // refers to the 'scheduler_data' action
    scheduler.load("./scheduler_data");
    // refers to the 'scheduler_data' action as well
    var dp = new dataProcessor("./scheduler_data");
    dp.init(scheduler);
    </script>
</body>
That's all. We believe you have enjoyed the tutorial and seen how easy you could integrate CakePHP with dhtmlxConnector. The final application logic was not the goal of this article, but interface built here is a good start for creating a fully-functional web application.

Follow our other tutorials to become a true DHTMLX expert.


Using Connector with Laravel

In this tutorial we would like to show you how to use the dhtmlxConnector library with the Laravel framework.

The tutorial is intended for developers who have already been familiar with the Laravel framework and DHTMLX library. If you haven't, please follow the links below to get the required information:

  • www.laravel.com - the framework site;
  • docs.dhtmlx.com - the DHTMLX documentation.

Before continuing, please check that you have Laravel installed on your computer. If you don't, read Installation instructions to learn how to do this.

Download the demo app here.

After you finish this tutorial, you'll get a grid, a scheduler and a gantt populated with data from a database and able to save changes back to the server.

Particularly, it will consist of 3 parts:

  1. Grid
  2. Scheduler
  3. Gantt


Step 1.Create the App's File

To create our app we need to add source files of 5 components:

  • dhtmlxConnector
  • dhtmlxGrid
  • dhtmlxScheduler
  • dhtmlxGantt
  • dhtmlxDataProcessor

We could download packages of each component and add the files one by one but it's not the best way. It's much easier to download the app package and copy the folder with the files from the package.

To prepare the app's file:
  1. Download the app package (link to download).
  2. Follow the directory tree "laravel_dhtmlx/public/" and copy the "dhtmlx", "dhtmlxGantt" and "dhtmlxScheduler" folders from the downloaded package.


Step 3. Create a Model

To access the data we need to specify the appropriate model class.

To know more about using models, read the Eloquent ORM guide from the Laravel framework documentation.

To create models:
  1. Create 3 files with the names "GanttTask.php", "GanttLink.php","SchedulerEvent.php" in the "laravel_dhtmlx/app" directory.
  2. Open the "GanttTask.php" file and add the following code there:

    "GanttTask.php" file

    <?php
namespace App;
use Illuminate\Database\Eloquent\Model;

class GanttTask extends Model
{
    protected $table = "gantt_tasks";
    public $primaryKey = "id";
    public $timestamps = false;
}

  3. Add the code below into the "GanttLink.php" file:

    "GanttLink.php" file

    <?php
namespace App;
use Illuminate\Database\Eloquent\Model;

class GanttLink extends Model
{
    protected $table = "gantt_links";
    public $primaryKey = "id";
    public $timestamps = false;
}

  4. Put the following code to the "SchedulerEvent.php" file:

    "SchedulerEvent.php" file

    <?php
namespace App;
use Illuminate\Database\Eloquent\Model;

class SchedulerEvent extends Model
{
    protected $table = "scheduler_events";
    public $primaryKey = "event_id";
    public $timestamps = false;
}

    5. For Grid we'll use the same model as the one used for Scheduler - 'scheduler_events'.


Step 4. Create a Grid

On this step, we will create a grid.
We will divide the step into 2 substeps:

  • Step 4.1. Configuring the View object
  • Step 4.2. Configuring the Conroller object

If after completing the step, you will run webhost/laravel_dhtmlx/public/grid, the app will produce the following grid that loads data from server and saves them back:

Step 4.1. Configuring the View object

Let's create a View file that will present our grid. In the view we will use a standard code that initializes dhtmlxGrid and if you have been working with this component, it won't be difficult for you to understand the technique.

We will also initialize dhtmlxDataProcessor. The initialization of dhtmlxDataProcessor is usual.

If you slightly know dhtmlxGrid and will doubt what one or another command makes, refer to the following tutorials:

  • First Steps with dhtmlxGrid
  • Grid. Work with the Server Side
  • dhtmlxConnector: video tutorial
To configure the View object:
  1. In the "views " folder create a new file and name it "grid.php "
  2. Open the "grid.php " file and add the following code there:

    "views/grid.php" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="dhtmlx/codebase/dhtmlx.js"></script>
    <link rel="stylesheet" href="dhtmlx/codebase/dhtmlx.css">
</head>

<body>
    <div id="grid_here" style="width: 600px; height: 400px;"></div>
    <script type="text/javascript" charset="utf-8">
            mygrid = new dhtmlXGridObject('grid_here');
        mygrid.setHeader("Start date,End date,Text");
        mygrid.init();
        // refers to the 'data' action that we will create in the next substep
        mygrid.load("./grid_data");
        // refers to the 'data' action as well
        var dp = new dataProcessor("./grid_data");
        dp.init(mygrid);
        </script>
</body>

Step 4.2. Configuring the Controller object

In the controller, we'll need to implement 2 actions:

  1. One that loads the view.
  2. One that loads and processes data.

To load and process data we will use GridConnector. A common use of GridConnector is:

$connector = new GridConnector(null, "PHPLaravel");
$connector->configure(new SchedulerEvent(),"event_id","start_date,end_date,event_name");
$connector->render();

The GridConnector constructor takes 2 parameters:

  • null - null is passed, as a model, not a database is used;
  • $PHPLaravel - the module for working with PHP, the hardcoded value.

The configure method configures the GridConnector object without rendering data and takes 5 parameters:

  • new $modelName - the method creating a model (e.g. new SchedulerEvent());
  • $id - the name of the id field;
  • $text - a comma separated list of rendered data fields;
  • $extra - (optional) a comma separated list of extra fields;
  • $relation_id - (optional) used for building hierarchy in case of Tree and TreeGrid.
To configure the Controller object:
  1. Create a new file in the "controllers " folder and name it "GridController.php ".

  2. Open the "GridController.php " file and specify the namespace for controllers and include the GridConnector class and the method used for creating the model - SchedulerEvent():

    "controllers/GridController.php" file

    <?php
namespace App\Http\Controllers;
use App\SchedulerEvent;
use Dhtmlx\Connector\GridConnector;

  3. Create the root controller class "GridController ":

    "controllers/GridController.php" file

    <?php
namespace App\Http\Controllers;
use App\SchedulerEvent;
use Dhtmlx\Connector\GridConnector;

class GridController extends Controller {                // here you should place all your functions       }

  4. Create an action that will load data to the view and render the grid:

    "controllers/GridController.php" file

    class GridController extends Controller
{
    public function data() {                                            $connector = new GridConnector(null, "PHPLaravel");             $connector->configure(                                              new SchedulerEvent(),                                           "event_id",                                                     "start_date, end_date, event_name"                          );                                                              $connector->render();                                       }                                                           }

    It is also possible to use the result of the query instead of the model, e.g.:
    $connector->configure(
    SchedulerEvent::where('user_id', '=', 1)->get(),
    "event_id",
    "start_date, end_date, event_name"
);


Step 5. Create a Scheduler DHTMLX Docs

Documentation
  • Step 1.Create the App's File
  • Step 2. Create a Data Source
  • Step 3. Create a Model
  • Step 4. Create a Grid
  • Step 5. Create a Scheduler
    • Step 5.1. Configuring the View object
    • Step 5.2. Configuring the Controller object
  • Step 6. Create a Gantt
Start Tutorials Using Connector with Laravel

Step 5. Create a Scheduler

And now, we're going to add a scheduler on the page. The technique used for dhtmlxGrid is the same for all other DHTMLX components, including dhtmlxScheduler.
We will again divide the step into 2 substeps:

  • Step 5.1. Configuring the View object
  • Step 5.2. Configuring the Conroller object

If after completing the step, you will run webhost/laravel_dhtmlx/public/scheduler, the app will produce the following scheduler that loads data from server and saves them back:

Step 5.1. Configuring the View object

We will use a standard code initializing the component again.

For a deeper learning of dhtmlxScheduler initialization, read:

  • How to start (step-by-step guide);
  • Scheduler Markup
  • Common Configuration Instructions;
  • Server-side Integration.
To configure the View object:
  1. In the "views " folder create a new file and name it "scheduler.php "
  2. Open the "scheduler.php " file and add the following code there:

    "views/scheduler.php" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="dhtmlxScheduler/codebase/dhtmlxscheduler.js"></script>
    <link rel="stylesheet" href="dhtmlxScheduler/codebase/dhtmlxscheduler.css">
</head>

<body>
    <div id="scheduler_here" class="dhx_cal_container">
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>
            <div class="dhx_cal_date"></div>
            <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
            <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
            <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
        </div>
        <div class="dhx_cal_header">
        </div>
        <div class="dhx_cal_data">
        </div>
    </div>

    <script type="text/javascript" charset="utf-8">
            document.body.onload = function() {
            scheduler.init('scheduler_here',new Date(2010,7,1),"month");
            scheduler.setLoadMode("month");
            // refers to the 'data' action that we will create in the next substep
            scheduler.load("./scheduler_data");
            // refers to the 'data' action as well
            var dp = new dataProcessor("./scheduler_data");
            dp.init(scheduler);
        };
    </script>
</body>

Step 5.2. Configuring the Controller object

In the controller, we'll need to implement 2 actions:

  1. One that loads the view.
  2. One that loads and processes data.

To load and process data we will use SchedulerConnector. A common use of SchedulerConnector is:

$connector = new SchedulerConnector(null, "PHPLaravel");
$connector->configure(new SchedulerEvent(),"event_id","start_date,end_date,event_name");
$connector->render();

The GridConnector constructor takes 2 parameters:

  • null - null is passed, as a model, not a database is used;
  • $PHPLaravel - the module for working with PHP, the hardcoded value.

The configure method configures the SchedulerConnector object without rendering data and takes 4 parameters:

  • new $modelName - the method creating a model (e.g.new SchedulerEvent());
  • $id - the name of the id field;
  • $text - a comma separated list of rendered data fields;
  • $extra - (optional) a comma separated list of extra fields.
To configure the Controller object:
  1. Create a new file in the "controllers " folder and name it "SchedulerController.php ".

  2. Open the "SchedulerController.php " file and specify the namespace for controllers and include the SchedulerConnector class and the used model - SchedulerEvent

    "controllers/SchedulerController.php" file

    <?php
namespace App\Http\Controllers;
use App\SchedulerEvent;
use Dhtmlx\Connector\SchedulerConnector;

  3. Create the root controller class "SchedulerController ":

    "controllers/SchedulerController.php" file

    <?php
namespace App\Http\Controllers;
use App\SchedulerEvent;
use Dhtmlx\Connector\SchedulerConnector;

class SchedulercController extends Controller {              // here you should place all your functions       }

  4. Create an action that will load data to the view and render the scheduler:

    "controllers/SchedulerController.php" file

    class SchedulerController extends Controller
{
    public function data() {                                                $connector = new SchedulerConnector(null, "PHPLaravel");            $connector->configure(                                                  new SchedulerEvent(),                                               "event_id",                                                         "start_date, end_date, event_name"                              );                                                                  $connector->render();                                           }                                                               }

    It is also possible to use the result of the query instead of the model, e.g.:
    $connector->configure(
    SchedulerEvent::where('user_id', '=', 1)->get(),
    "event_id",
    "start_date, end_date, event_name"
);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers
  • Form Builder
  • LibCompiler
  • Optimus Framework
  • Skin Builder
  • Snippet Editor
  • Visual Designer
  • Helpers


Step 6. Create a Gantt DHTMLX Docs

Documentation
  • Step 1.Create the App's File
  • Step 2. Create a Data Source
  • Step 3. Create a Model
  • Step 4. Create a Grid
  • Step 5. Create a Scheduler
  • Step 6. Create a Gantt
    • Step 6.1. Configuring the View object
    • Step 6.2. Configuring the Controller object
Start Tutorials Using Connector with Laravel

Step 6. Create a Gantt

And now, we're going to add a gantt on the page. The technique used for dhtmlxGrid is the same for all other DHTMLX components, including dhtmlxGantt.
We will divide the step into 2 substeps again:

  • Step 6.1. Configuring the View object
  • Step 6.2. Configuring the Controller object

If after completing the step, you will run webhost/laravel_dhtmlx/public/gantt, the app will produce the following gantt that loads data from server and saves them back:

Step 6.1. Configuring the View object

Let's create a View file that will present our gantt.

For a deeper learning of dhtmlxGantt initialization, read:

  • How to Start with dhtmlxGantt;
  • Exploring Ways to Configure the Gantt Chart;
  • Storing Data on the Server Side.
To configure the View object:
  1. In the "views " folder create a new file and name it "gantt.php "
  2. Open the "gantt.php " file and add the following code there:

    "views/gantt.php" file

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script src="dhtmlxGantt/codebase/dhtmlxgantt.js"></script>
    <link rel="stylesheet" href="dhtmlxGantt/codebase/dhtmlxgantt.css">
</head>

<body>
    <div id="gantt_here" style='width:100%; height:250px;'></div>
    <script type="text/javascript">
            // sets the date format that is used to parse data from the data set
        gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
        gantt.init("gantt_here", new Date(2010,7,1), new Date(2010,8,1));
        // refers to the 'data' action that we will create in the next substep
        gantt.load("./gantt_data", "xml");
        // refers to the 'data' action as well
        var dp = new dataProcessor("./gantt_data");
        dp.init(gantt);
        </script>
</body>

Step 6.2. Configuring the Controller object

The configuration of GanttConnector is the same as those of GridConnector and SchedulerConnector. Thus, we need to implement the actions below:

  1. One that loads the view.
  2. One that loads and processes data.

To load and process data we will use GanttConnector. A common use of GanttConnector is:

$connector = new GanttConnector(null, "PHPLaravel");
$connector->render_links(new $modelName, $id, $links);
$connector->render_table(new $modelName, $id, $tasks);

The GanttConnector constructor takes 2 parameters:

  • null - null is passed, as a model, not a database is used;
  • $PHPLaravel - the module for working with PHP, the hardcoded value.

The render_links method configures connector, retrieves data from a table with links and takes 3 parameters:

  • new $modelName - the method creating a model for links (new GanttLink());
  • $id - the name of the link id;
  • $links - a comma-separated list of rendered links.

The render_table method configures connector, retrieves data from a table with tasks and takes 3 parameters:

  • new $modelName - the method creating a model for tasks (new GanttTask());
  • $id - the name of the task id;
  • $tasks - a comma separated list of rendered tasks.
To configure the Controller object:
  1. Create a new file in the "controllers " folder and name it "GanttController.php ".

  2. Open the "GanttController.php " file and specify the namespace for controllers and include the GanttConnector class and two models - 'GanttLink' and 'GanttTask':

    "controllers/GanttController.php" file

    <?php
namespace App\Http\Controllers;
use App\GanttTask;
use App\GanttLink;
use Dhtmlx\Connector\GanttConnector;

  3. Create the root controller class "GanttController ":

    "controllers/GanttController.php" file

    <?php
namespace App\Http\Controllers;
use App\GanttTask;
use App\GanttLink;
use Dhtmlx\Connector\GanttConnector;

class GanttController extends Controller {               // here you should place all your functions       }

  4. Create an action that will load data to the view and render the gantt:

    "controllers/GanttController.php" file

    class GanttController extends Controller
{
    public function data() {                                                            $connector = new GanttConnector(null, "PHPLaravel");                            $connector->render_links(new GanttLink(), "id", "source,target,type");          $connector->render_table(                                                           new GanttTask(),                                                                "id",                                                                           "start_date,duration,text,progress,parent"                                 );                                                                           }                                                                           }

    It is also possible to use the result of the query instead of the model, e.g.:
    $connector->render_links(
    GanttLink::where('user_id', '=', 1)->get(),
    "id",
    "source,target,type"
);
    and
    $connector->render_table(
    GanttTask::where('user_id', '=', 1)->get(),
    "id",
    "start_date,duration,text,progress,parent"
);
That's all. We believe you have enjoyed the tutorial and seen how easy you could integrate Laravel with dhtmlxConnector. The final application logic was not the goal of this article, but the interface built here is a good start for creating a fully-functional web application.

Follow our other tutorials to become a true DHTMLX expert.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers
  • Form Builder
  • LibCompiler


Accordion DHTMLX Docs

Documentation
  • Accordion
    • dhtmlXAccordion API
    • dhtmlXAccordionCell API
    • Initializing Accordion on a Page
    • Accordion Skins
    • Icons in the Header
    • Single Mode and Multi Mode
    • Accordion Offsets
    • Manipulating Cells
    • Docking/Undocking Cells
    • Iterator
    • Using Windows from Accordion
    • Attaching Components
    • Attaching Menu/Status Bar
    • Attaching HTML
    • Attaching URL
    • Attaching Google Maps
    • Progress Bar
    • Different Content in the Same Cell
    • Coloring Text Selection
    • Migration from 3.6 to 4.0
Start

Accordion

dhtmlxAccordion is a component that provides an easy and effective way of placing different types of content on a single page. It's a very flexible and easy-to-use content manager, compatible with other DHTMLX components that can be attached to dhtmlxAccordion without any difficulties (supports only vertical layout).

API reference
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
Related resources
  • You may download dhtmlxAccordion from dhtmlx.com
  • Check online samples for dhtmlxAccordion
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Creating Accordion on a Page

  • Accordion source files
  • Constructor
  • Full-screen init
  • Init in an HTML element
  • Init in a window
  • Init in a cell of layout
  • Recommended init way
 Discusses the ways of Accordion's initialization on a page.

Configuring Accordion

  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
 Describes the possibilities of configuring Accordion appearance, setting modes of work and usage of icons in cells headers.

Operating Accordion and Its Cells

  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
 Tells about manipulating Accordion's cells, showing Popup from Accordion and using iterator.

Operating the Content

  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
 Covers integration of dhtmlxAccordion with other DHTMLX components and 3rd party components.

Other

  • Migration from 3.6 to 4.0
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXAccordion API DHTMLX Docs

Documentation
  • dhtmlXAccordion API
    • Methods
    • Events
    • Others
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

dhtmlXAccordion API

Methods
addItem | adds a new item to Accordion
attachEvent | adds any user-defined handler to available events
attachFooter | attaches footer to component's bottom
attachHeader | attaches header to component's top
attachMenu | attaches dhtmlxMenu to component's top
attachRibbon | attaches dhtmlxRibbon to component's top
attachStatusBar | attaches a status bar object to component's bottom
attachToolbar | attaches dhtmlxToolbar to component's top
cells | returns dhtmlXCellObject object by id
clearIcon | clears an item's icon
closeItem | closes an item
detachEvent | detaches a handler from an event
detachFooter | detaches footer from component's bottom
detachHeader | detaches header from component's top
detachMenu | detaches dhtmlxMenu from component's top
detachRibbon | detaches dhtmlxRibbon from component's top
detachStatusBar | detaches status bar object from component's bottom
detachToolbar | detaches dhtmlxToolbar from component's top
enableDND | enables drag-n-drop
enableMultiMode | enables multi mode in accordion (more than one cell opened at time), disabled by default
forEachItem | iterator, calls a user-defined function n-times
getAttachedMenu | returns dhtmlxMenu instance attached to component's top
getAttachedRibbon | returns dhtmlxRibbon instance attached to component's top
getAttachedStatusBar | returns status bar object attached to component's bottom
getAttachedToolbar | returns dhtmlxToolbar instance attached to component's top
getText | returns item's text
hideItem | hides an item
hideMenu | hides dhtmlxMenu attached to component's top
hideRibbon | hides dhtmlxRibbon attached to component's top
hideStatusBar | hides status bar object attached to component's bottom
hideToolbar | hides dhtmlxToolbar attached to component's top
isActive | returns true if item is opened
isItemHidden | returns true if item is hidden
loadJSON | init accordion from json file
loadStruct | loads data to the component via XML or JSON, usually component config
loadXML | init accordion from xml file
moveOnTop | moves an item to the top
openItem | opens an item
progressOff | hides progress indicator for full component
progressOn | shows progress indicator for full component
removeItem | removes an existing item
setActive | opens an item
setEffect | sets an effect
setIcon | sets an item's icon (header's icon)
setIconsPath | sets path to icons
setIconset | sets the font awesome iconset
setItemHeight | sets item's height for multimode
setOffset | sets vertical offset between cells
setOffsets | sets offsets for parent container from each side
setSizes | changes object instance's size according to the outer container
setSkin | sets skin
setSkinParameters | change skin params
setText | sets item's text
showItem | shows an item
showMenu | shows dhtmlxMenu attached to component's top
showRibbon | shows dhtmlxRibbon attached to component's top
showStatusBar | shows status bar object attached to component's bottom
showToolbar | shows dhtmlxToolbar attached to component's bottom
unload | destructor
Events
onActive | occurs when the user clicks left mouse button on item's heading
onBeforeActive | occurs when the user clicks on an item, but before this item becomes active and open
onBeforeDrag | fires when a user clicks on an item, but before the dragging is started
onContentLoaded | fires when content is loaded into cell via attachURL()
onDock | fires when the window docks into the accordion
onDrop | fires when dnd ended and the dragged cell's position changed
onUnDock | fires when the cell docks into the window
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Other
dhxWins link to dhtmlXWindows instance
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • addItem
    • attachEvent
    • attachFooter
    • attachHeader
    • attachMenu
    • attachRibbon
    • attachStatusBar
    • attachToolbar
    • cells
    • clearIcon
    • closeItem
    • detachEvent
    • detachFooter
    • detachHeader
    • detachMenu
    • detachRibbon
    • detachStatusBar
    • detachToolbar
    • enableDND
    • enableMultiMode
    • forEachItem
    • getAttachedMenu
    • getAttachedRibbon
    • getAttachedStatusBar
    • getAttachedToolbar
    • getText
    • hideItem
    • hideMenu
    • hideRibbon
    • hideStatusBar
    • hideToolbar
    • isActive
    • isItemHidden
    • loadJSON
    • loadStruct
    • loadXML
    • moveOnTop
    • openItem
    • progressOff
    • progressOn
    • removeItem
    • setActive
    • setEffect
    • setIcon
    • setIconsPath
    • setIconset
    • setItemHeight
    • setOffset
    • setOffsets
    • setSizes
    • setSkin
    • setSkinParameters
    • setText
    • showItem
    • showMenu
    • showRibbon
    • showStatusBar
    • showToolbar
    • unload
  • Events
  • Others
Start Accordion dhtmlXAccordion API

Methods

addItem | adds a new item to Accordion
attachEvent | adds any user-defined handler to available events
attachFooter | attaches footer to component's bottom
attachHeader | attaches header to component's top
attachMenu | attaches dhtmlxMenu to component's top
attachRibbon | attaches dhtmlxRibbon to component's top
attachStatusBar | attaches a status bar object to component's bottom
attachToolbar | attaches dhtmlxToolbar to component's top
cells | returns dhtmlXCellObject object by id
clearIcon | clears an item's icon
closeItem | closes an item
detachEvent | detaches a handler from an event
detachFooter | detaches footer from component's bottom
detachHeader | detaches header from component's top
detachMenu | detaches dhtmlxMenu from component's top
detachRibbon | detaches dhtmlxRibbon from component's top
detachStatusBar | detaches status bar object from component's bottom
detachToolbar | detaches dhtmlxToolbar from component's top
enableDND | enables drag-n-drop
enableMultiMode | enables multi mode in accordion (more than one cell opened at time), disabled by default
forEachItem | iterator, calls a user-defined function n-times
getAttachedMenu | returns dhtmlxMenu instance attached to component's top
getAttachedRibbon | returns dhtmlxRibbon instance attached to component's top
getAttachedStatusBar | returns status bar object attached to component's bottom
getAttachedToolbar | returns dhtmlxToolbar instance attached to component's top
getText | returns item's text
hideItem | hides an item
hideMenu | hides dhtmlxMenu attached to component's top
hideRibbon | hides dhtmlxRibbon attached to component's top
hideStatusBar | hides status bar object attached to component's bottom
hideToolbar | hides dhtmlxToolbar attached to component's top
isActive | returns true if item is opened
isItemHidden | returns true if item is hidden
loadJSON | init accordion from json file
loadStruct | loads data to the component via XML or JSON, usually component config
loadXML | init accordion from xml file
moveOnTop | moves an item to the top
openItem | opens an item
progressOff | hides progress indicator for full component
progressOn | shows progress indicator for full component
removeItem | removes an existing item
setActive | opens an item
setEffect | sets an effect
setIcon | sets an item's icon (header's icon)
setIconsPath | sets path to icons
setIconset | sets the font awesome iconset
setItemHeight | sets item's height for multimode
setOffset | sets vertical offset between cells
setOffsets | sets offsets for parent container from each side
setSizes | changes object instance's size according to the outer container
setSkin | sets skin
setSkinParameters | change skin params
setText | sets item's text
showItem | shows an item
showMenu | shows dhtmlxMenu attached to component's top
showRibbon | shows dhtmlxRibbon attached to component's top
showStatusBar | shows status bar object attached to component's bottom
showToolbar | shows dhtmlxToolbar attached to component's bottom
unload | destructor
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

addItem

adds a new item to Accordion

void addItem(string|number id,string text, [boolean open,number height,string icon] );

Parameters

id | string|number | item's id
text | string | item's text
open | boolean | optional, open cell on init
height | number | optional, item's height (multi mode only)
icon | string | optional, path to icon

Example

var myAcc = new dhtmlXAccordionObject(...);

// adding items
myAcc.addItem("item_a", "The Secret of Monkey Island", true, null, "icon.png");
myAcc.addItem("item_b", "Monkey Island 2: LeChuck's Revenge");
myAcc.addItem("item_c", "The Curse of Monkey Island");

Details

If the parameter "open" isn't specified, the default behaviour is:

  • single mode - true for the 1st item (i.e. opens the 1st added item);
  • multimode - true for all items.

The parameter "height" in the multi mode can have the "*" value (means "auto"). In this case the logic will be the following:

For example, you have a multi mode accordion attached to a window with 3 autoheight cells. When all the cells are expanded, each cell has 1/3 of window's height. When one of them collapsed, each expanded cell will have 1/2 of window's height minus the height of the collapsed cell. If two cells collapsed - the expanded cell will occupy all the available space.

Change log

params: open, height and icon - added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachFooter DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

attachFooter

attaches footer to component's bottom

void attachFooter(string|number|HTMLElement id, [number height] );

Parameters

id | string|number|HTMLElement | id or DOM element
height | number | optional, footer height

Example

dhxComponent.attachFooter("my_footer");

Details

If height is not specified, component will try to detect it automatically. In this case you'd better specify it in CSS:

#my_footer {
    padding-top: 2px;
    background-color: white;
}

#my_footer .my_footer_text {
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 10px;
    height: 70px; /* for autodetect */
    border: 1px solid #a4bed4
}
<div id="my_footer">
    <div class="my_footer_text">
        Hi! I'm footer!
    </div>
</div>

You can use visibility:hidden style for keeping your element hidden while it is not attached to a component, after attaching the style will be changed to visibility:visible.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHeader DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

attachHeader

attaches header to component's top

void attachHeader(string|number|HTMLElement id, [number height] );

Parameters

id | string|number|HTMLElement | id or DOM element
height | number | optional, header height

Example

dhxComponent.attachHeader("my_header");

Details

If height is not specified, component will try to detect it automatically. In this case you'd better specify it in CSS:

#my_header {
    padding-bottom: 2px;
    background-color: white;
}

#my_header .my_header_text {
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 10px;
    height: 70px; /* for autodetect */
    border: 1px solid #a4bed4
}
<div id="my_header">
    <div class="my_header_text">
        Hi! I'm header!
    </div>
</div>

You can use visibility:hidden style for keeping your element hidden while it is not attached to component. After attaching the style will be changed to visibility:visible.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMenu DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

attachMenu

attaches dhtmlxMenu to component's top

object attachMenu( [object conf] );

Parameters

conf object optional, menu config

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.attachMenu({
    icons_path: "imgs/menu/icons/",
    json: "data/json/menu.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachRibbon DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

attachRibbon

attaches dhtmlxRibbon to component's top

object attachRibbon( [object conf] );

Parameters

conf object optional, ribbon config

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.attachRibbon({
    icons_path: "imgs/ribbon/icons/",
    json: "data/json/ribbon.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachStatusBar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

attachStatusBar

attaches a status bar object to component's bottom

object attachStatusBar( [object conf] );

Parameters

conf object optional, status bar init params

Returns

object status bar object

Example

/* conf param properties */
{
    text:   "Text", // status bar init text
    height: 20      // status bar init height
}

/* init/attach status bar */

// default behaviour
var sbObj = dhxComponent.attachStatusBar();

// with text
var sbObj = dhxComponent.attachStatusBar({text: "Loading..."});

// with text and custom height
var sbObj = dhxComponent.attachStatusBar({text: "Loading...", height: 30});

/* operations with status bar object */

// set text
sbObj.setText("Page was successfuly loaded");

// get text
var text = sbObj.getText();

Change log

conf param was added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToolbar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

attachToolbar

attaches dhtmlxToolbar to component's top

object attachToolbar( [object conf] );

Parameters

conf object optional, toolbar config

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.attachToolbar({
    icons_path: "imgs/toolbar/icons/",
    json: "data/json/toolbar.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cells DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

cells

returns dhtmlXCellObject object by id

dhtmlXCellObject cells(string|number id);

Parameters

id string|number item id

Returns

dhtmlXCellObject dhtmlXCellObject instance

Example

myAcc.cells(id).setText("New Text");

// the same
var cell = myAcc.cells(id);
cell.setText("New Text");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearIcon DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

clearIcon

clears an item's icon

void clearIcon();

Deprecated

new usage

myAcc.cells(id).clearIcon();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


closeItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

closeItem

closes an item

void closeItem();

Deprecated

new usage

myAcc.cells(id).close();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachFooter DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

detachFooter

detaches footer from component's bottom

void detachFooter();

Example

dhxComponent.detachFooter();

Details

footer DOM element will be attached to body with visibility:hidden css style

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachHeader DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

detachHeader

detaches header from component's top

void detachHeader();

Example

dhxComponent.detachHeader();

Details

header DOM element will be attached to body with visibility:hidden css style

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachMenu DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

detachMenu

detaches dhtmlxMenu from component's top

void detachMenu();

Example

var myMenu = dhxComponent.attachMenu();

// detach
dhxComponent.detachMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachRibbon DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

detachRibbon

detaches dhtmlxRibbon from component's top

void detachRibbon();

Example

var myRibbon = dhxComponent.attachRibbon();

// detach
dhxComponent.detachRibbon();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachStatusBar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

detachStatusBar

detaches status bar object from component's bottom

void detachStatusBar();

Example

var sbObj = dhxComponent.attachStatusBar();

// detach
dhxComponent.detachStatusBar();
sbObj = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachToolbar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

detachToolbar

detaches dhtmlxToolbar from component's top

void detachToolbar();

Example

var myToolbar = dhxComponent.attachToolbar();

// detach
dhxComponent.detachToolbar();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDND DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

enableDND

enables drag-n-drop

void enableDND();

Example

var myAcc = new dhtmlXAccordion({
    parent: "accObj",
    multi_mode: true,
    // you can also enable dnd from api-init
    // dnd: true,
    items: [
        { id: "a1", text: "Main Page" },
        { id: "a2", text: "Site Navigation" },
        { id: "a3", text: "Support & Feedback" },
        { id: "a4", text: "Comments" }
    ]
});

myAcc.enableDND();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMultiMode DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

enableMultiMode

enables multi mode in accordion (more than one cell opened at time), disabled by default

void enableMultiMode( [string yScrollMode,number defaultHeight] );

Parameters

yScrollMode | string | optional, "auto" or "scroll" to set overflow style for parent
defaultHeight | number | optional, change default height for items (90 by default)

Example

var myAcc = new dhtmlXAccordion(...);

// first enabling multimode
myAcc.enableMultiMode();

// then adding items
myAcc.adItem("item_a", "The Secret of Monkey Island", true);
myAcc.adItem("item_b", "Monkey Island 2: LeChuck's Revenge");
myAcc.adItem("item_c", "The Curse of Monkey Island");
...

Details

If you plan to use the multi mode, you need to enable it before adding items

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

forEachItem

iterator, calls a user-defined function n-times

void forEachItem(function handler);

Parameters

handler function a user-defined function, dhtmlXCellObject is passed as incoming argument

Example

myAcc.forEachItem(function(cell){
    // cell => myAcc.cells(id)
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedMenu DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

getAttachedMenu

returns dhtmlxMenu instance attached to component's top

dhtmlXMenuObject getAttachedMenu();

Returns

dhtmlXMenuObject dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.attachMenu();

// somewhere in other place
var attachedMenu = dhxComponent.getAttachedMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedRibbon DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

getAttachedRibbon

returns dhtmlxRibbon instance attached to component's top

dhtmlXRibbon getAttachedRibbon();

Returns

dhtmlXRibbon dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.attachRibbon();

// somewhere in other place
var attachedRibbon = dhxComponent.getAttachedRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedStatusBar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

getAttachedStatusBar

returns status bar object attached to component's bottom

object getAttachedStatusBar();

Returns

object StatusBar instance

Example

var myStatusBar = dhxComponent.attachStatusBar();

// somewhere in other place
var attachedStatusBar = dhxComponent.getAttachedStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedToolbar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

getAttachedToolbar

returns dhtmlxToolbar instance attached to component's top

dhtmlXToolbarObject getAttachedToolbar();

Returns

dhtmlXToolbarObject dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.attachToolbar();

// somewhere in other place
var attachedToolbar = dhxComponent.getAttachedToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getText DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

getText

returns item's text

void getText();

Deprecated

new usage

var text = myAcc.cells(id).getText();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

hideItem

hides an item

void hideItem();

Deprecated

new usage

myAcc.cells(id).hide();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMenu DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

hideMenu

hides dhtmlxMenu attached to component's top

void hideMenu();

Example

dhxComponent.hideMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideRibbon DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

hideRibbon

hides dhtmlxRibbon attached to component's top

void hideRibbon();

Example

dhxComponent.hideRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideStatusBar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

hideStatusBar

hides status bar object attached to component's bottom

void hideStatusBar();

Example

dhxComponent.hideStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideToolbar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

hideToolbar

hides dhtmlxToolbar attached to component's top

void hideToolbar();

Example

dhxComponent.hideToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isActive DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

isActive

returns true if item is opened

void isActive();

Deprecated

new usage

var isOpened = myAcc.cells(id).isOpened();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isItemHidden DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

isItemHidden

returns true if item is hidden

void isItemHidden();

Deprecated

new usage

var isVisible = myAcc.cells(id).isVisible();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadJSON DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

loadJSON

init accordion from json file

void loadJSON();

Deprecated

new usage

myAcc.loadStruct(data, callback);
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadStruct DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

loadStruct

loads data to the component via XML or JSON, usually component config

promise loadStruct(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.loadStruct('<data><node id="a1".../></data>');

// json/xml from server
myComponent.loadStruct("server/data.xml");

// local json/xml with callback
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.loadStruct('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.loadStruct("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.loadStruct(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure response has the header "Content-Type: text/xml" for XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

JSON Format

{
    skin: "dhx_skyblue",    // optional, skin
    multi_mode: false,      // optional, true for multimode
    icons_path: "icons/",   // optional, path for icons if they will be used
    items: [
        {
            id:     "a1",       // required, will be generated automatically if empty
            text:   "Main Page" // required, header text
                                // you can use <span style='color:red;'>Text</span>
            height: 150,        // optional, item height (multi mode only)
            icon:   "icon.png", // optional, icon for header
            open:   true        // optional, open on init
                                // single mode - open first item if not set
                                // multi mode - open any item if not set
        },
        {id: "a2", ...},
        {id: "a3", ...}
    ]
    // deprecated from 4.0:
    icon_path: "icons/"     // => icons_path: "icons/"
    items: [
        {
            img: "icon.png" // => icon: "icon.png"
        }
    ]
}

XML Format

<?xml version="1.0" encoding="UTF-8"?>
<accordion                      // required, root tag
    skin      = "dhx_skyblue"   // optional, skin
    multiMode = "true"          // optional, true for multimode
    iconsPath = "icons/"        // optional, path for icons if they will be used
>
    <cell                       // required, tag for item
            id     = "a1"       // required, will be generated automatically if empty
            height = "150"      // optional, item height (multi mode only)
            icon   = "icon.png" // optional, icon for header
            open   = "true"     // optional, open on init
    >
        Main Page               // required, header text
    </cell>
    <cell id="a2" ...>text2</cell>
    <cell id="a3" ...>text3</cell>
</accordion>

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadXML DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

loadXML

init accordion from xml file

void loadXML();

Deprecated

new usage

myAcc.loadStruct(data, callback);
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveOnTop DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

moveOnTop

moves an item to the top

void moveOnTop();

Deprecated

new usage

myAcc.cells(id).moveOnTop();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


openItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

openItem

opens an item

void openItem();

Deprecated

new usage

myAcc.cells(id).open();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOff DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

progressOff

hides progress indicator for full component

void progressOff();

Example

dhxComponent.progressOff();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOn DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

progressOn

shows progress indicator for full component

void progressOn();

Example

dhxComponent.progressOn();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


removeItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

removeItem

removes an existing item

void removeItem(string|number id);

Parameters

id string|number item's id

Example

myAcc.removeItem(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setActive DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

setActive

opens an item

void setActive();

Deprecated

new usage

myAcc.cells(id).open();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setEffect DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

setEffect

sets an effect

void setEffect();

Deprecated

effects are enabled for modern browsers

Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIcon DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

setIcon

sets an item's icon (header's icon)

void setIcon();

Deprecated

new usage

myAcc.cells(id).setIcon("icon.png");
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconsPath DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

setIconsPath

sets path to icons

void setIconsPath(string path);

Parameters

path string path to folder with icons

Example

var myAcc = new dhtmlXAccordion(...);
myAcc.setIconsPath("icons/");
myAcc.addItem("a1", "Item 1", true, null, "icon.png");
myAcc.addItem("a2", "Item 2", false, null, "icon2.png");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconset DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

setIconset

sets the font awesome iconset

void setIconset(string name);

Parameters

name string "awesome"

Example

myAcc.setIconset("awesome");

Related samples

  • Font awesome
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemHeight DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

setItemHeight

sets item's height for multimode

void setItemHeight();

Deprecated

new usage

myAcc.cells(id).setHeight(height);
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOffset DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

setOffset

sets vertical offset between cells

void setOffset(number offset);

Parameters

offset number offset in px

Example

myAcc.setOffset(5);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOffsets DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

setOffsets

sets offsets for parent container from each side

void setOffsets(object conf);

Parameters

conf object offsets config

Example

// init component
var myComponent = new dhtmlXComponent(...);

// setting offsets for parent container
// this also works for document.body init
myComponent.setOffsets({
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
});

// also you can specify offset only for a single direction
myComponent.setOffsets({
    bottom: 10
});

// or for several directions
myComponent.setOffsets({
    right: 10,
    left: 10
});

Change log

added in 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSizes DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

setSizes

changes object instance's size according to the outer container

void setSizes();

Example

// an object that will be used as accordion's parent container
<div id="accObj" style="width: 300px; height: 500px;"> </div>

// init accordion:
var myAcc = new dhtmlXAccordion("accObj");

// when parent container's dimension is changed...
var parentObj = document.getElementById("accObj");
parentObj.style.width = "250px";
parentObj.style.height = "400px";

// ...you need to adjust accordion
myAcc.setSizes();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

setSkin

sets skin

void setSkin(string skin);

Parameters

skin string "dhx_skyblue", "dhx_web", "dhx_terrace"

Example

myAcc.setSkin("dhx_web");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkinParameters DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

setSkinParameters

change skin params

void setSkinParameters();

Deprecated

new usage

myAcc.setOffset(5);
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setText DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

setText

sets item's text

void setText();

Deprecated

new usage

myAcc.cells(id).setText(text);
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

showItem

shows an item

void showItem();

Deprecated

new usage

myAcc.cells(id).show();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMenu DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

showMenu

shows dhtmlxMenu attached to component's top

void showMenu();

Example

dhxComponent.showMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRibbon DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

showRibbon

shows dhtmlxRibbon attached to component's top

void showRibbon();

Example

dhxComponent.showRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showStatusBar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

showStatusBar

shows status bar object attached to component's bottom

void showStatusBar();

Example

dhxComponent.showStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showToolbar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

showToolbar

shows dhtmlxToolbar attached to component's bottom

void showToolbar();

Example

dhxComponent.showToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearIcon
  • closeItem
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableDND
  • enableMultiMode
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getText
  • hideItem
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isItemHidden
  • loadJSON
  • loadStruct
  • loadXML
  • moveOnTop
  • openItem
  • progressOff
  • progressOn
  • removeItem
  • setActive
  • setEffect
  • setIcon
  • setIconsPath
  • setIconset
  • setItemHeight
  • setOffset
  • setOffsets
  • setSizes
  • setSkin
  • setSkinParameters
  • setText
  • showItem
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Accordion dhtmlXAccordion API Methods

unload

destructor

void unload();

Example

var myAcc = new dhtmlXAccordion(...);

// unloading
myAcc.unload();
myAcc = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onActive
    • onBeforeActive
    • onBeforeDrag
    • onContentLoaded
    • onDock
    • onDrop
    • onUnDock
    • onXLE
    • onXLS
  • Others
Start Accordion dhtmlXAccordion API

Events

onActive | occurs when the user clicks left mouse button on item's heading
onBeforeActive | occurs when the user clicks on an item, but before this item becomes active and open
onBeforeDrag | fires when a user clicks on an item, but before the dragging is started
onContentLoaded | fires when content is loaded into cell via attachURL()
onDock | fires when the window docks into the accordion
onDrop | fires when dnd ended and the dragged cell's position changed
onUnDock | fires when the cell docks into the window
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onActive DHTMLX Docs

Documentation
  • onActive
  • onBeforeActive
  • onBeforeDrag
  • onContentLoaded
  • onDock
  • onDrop
  • onUnDock
  • onXLE
  • onXLS
Start Accordion dhtmlXAccordion API Events

onActive

occurs when the user clicks left mouse button on item's heading

void onActive(string|number id,boolean state){ ... };

Parameters

id | string|number | cell id
state | boolean | single mode - always true, multimode - true/false

Example

var myAcc = new dhtmlXAccordion(...);

myAcc.attachEvent("onActive", function(id, state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeActive DHTMLX Docs

Documentation
  • onActive
  • onBeforeActive
  • onBeforeDrag
  • onContentLoaded
  • onDock
  • onDrop
  • onUnDock
  • onXLE
  • onXLS
Start Accordion dhtmlXAccordion API Events

onBeforeActive

occurs when the user clicks on an item, but before this item becomes active and open

boolean onBeforeActive(string|number id,boolean state){ ... };

Parameters

id | string|number | cell id
state | boolean | single mode - always true, multimode - true/false (next item state)

Returns

boolean "return true" - allows cell to be opened, "return false" - otherwise

Example

var myAcc = new dhtmlXAccordion(...);

myAcc.attachEvent("onBeforeActive", function(id, state) {
   // your code here
   return true; // allow opening
});

Related samples

  • onActive/onBeforeActive events
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDrag DHTMLX Docs

Documentation
  • onActive
  • onBeforeActive
  • onBeforeDrag
  • onContentLoaded
  • onDock
  • onDrop
  • onUnDock
  • onXLE
  • onXLS
Start Accordion dhtmlXAccordion API Events

onBeforeDrag

fires when a user clicks on an item, but before the dragging is started

boolean onBeforeDrag(string|number id,number index){ ... };

Parameters

id | string|number | cell id
index | number | current cell index (starting from 0)

Returns

boolean "return true" - allows cell to be dragged, "return false" - otherwise

Example

var myAcc = new dhtmlXAccordion(...);

myAcc.attachEvent("onBeforeDrag", function(id, index){
    // your code here
    return true; // allow dragging
});

Related samples

  • Drag-n-Drop
Change log

added in 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onContentLoaded DHTMLX Docs

Documentation
  • onActive
  • onBeforeActive
  • onBeforeDrag
  • onContentLoaded
  • onDock
  • onDrop
  • onUnDock
  • onXLE
  • onXLS
Start Accordion dhtmlXAccordion API Events

onContentLoaded

fires when content is loaded into cell via attachURL()

void onContentLoaded(string|number id){ ... };

Parameters

id string|number cell id

Example

var myAcc = new dhtmlXAccordion(...);

myAcc.attachEvent("onContentLoaded", function(id){
    // your code here
});

myAcc.cells("a1").attachURL("test_page_1.html");
myAcc.cells("a2").attachURL("test_page_2.html", true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDock DHTMLX Docs

Documentation
  • onActive
  • onBeforeActive
  • onBeforeDrag
  • onContentLoaded
  • onDock
  • onDrop
  • onUnDock
  • onXLE
  • onXLS
Start Accordion dhtmlXAccordion API Events

onDock

fires when the window docks into the accordion

void onDock(string|number id){ ... };

Parameters

id string|number cell id

Example

var myAcc = new dhtmlXAccordion(...);

myAcc.attachEvent("onDock", function(id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDrop DHTMLX Docs

Documentation
  • onActive
  • onBeforeActive
  • onBeforeDrag
  • onContentLoaded
  • onDock
  • onDrop
  • onUnDock
  • onXLE
  • onXLS
Start Accordion dhtmlXAccordion API Events

onDrop

fires when dnd ended and the dragged cell's position changed

void onDrop(string|number id,number indexOld,number indexNew){ ... };

Parameters

id | string|number | cell id
indexOld | number | cell index before dnd
indexNew | number | cell index after dnd

Example

var myAcc = new dhtmlXAccordion({
    parent: "accObj",
    multi_mode: true,
    dnd: true,
    items: [
        { id: "a1", text: "Main Page" },
        { id: "a2", text: "Site Navigation" },
        { id: "a3", text: "Support & Feedback" },
        { id: "a4", text: "Comments" }
    ]
});

myAcc.attachEvent("onDrop", function(id, indexOld, indexNew){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onUnDock DHTMLX Docs

Documentation
  • onActive
  • onBeforeActive
  • onBeforeDrag
  • onContentLoaded
  • onDock
  • onDrop
  • onUnDock
  • onXLE
  • onXLS
Start Accordion dhtmlXAccordion API Events

onUnDock

fires when the cell docks into the window

void onUnDock(string|number id){ ... };

Parameters

id string|number cell id

Example

var myAcc = new dhtmlXAccordion(...);

myAcc.attachEvent("onUnDock", function(id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onActive
  • onBeforeActive
  • onBeforeDrag
  • onContentLoaded
  • onDock
  • onDrop
  • onUnDock
  • onXLE
  • onXLS
Start Accordion dhtmlXAccordion API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onActive
  • onBeforeActive
  • onBeforeDrag
  • onContentLoaded
  • onDock
  • onDrop
  • onUnDock
  • onXLE
  • onXLS
Start Accordion dhtmlXAccordion API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • dhxWins
Start Accordion dhtmlXAccordion API

Others

dhxWins link to dhtmlXWindows instance
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhxWins DHTMLX Docs

Documentation
  • dhxWins
Start Accordion dhtmlXAccordion API Others

dhxWins

link to dhtmlXWindows instance

dhtmlXWindows dhxWins;

Example

var myAcc = new dhtmlXAccordion(...);

// if windows js/css included on page,
// link to dhxWins available here,
// i.e. you can perform basic operations
myAcc.dhxWins.attachViewportTo("myViewport");

// undocking cell
myAcc.cells(id).undock();

// from this moment - you can see window
// with content detached from cell
var w1 = myAcc.dhxWins.window(id);

// now you can change window's settings
w1.setPosition(10, 10);
w1.setDimension(400, 400);

// if you need to open extra window,
// no needs to create another dhxWins instance, you can use current
// just make sure window id will not crossed with existing
// accordion cells ids
var w2 = myAcc.dhxWins.createWindow("w2", 1, 1, 100, 100);
w2.attachHTMLString("alert_message, ok/cancel buttons");
w2.button("close").hide();
w2.denyResize();
w2.denyPark();
w2.setModal(true);
w2.center();

Details
  • make sure you included corresponding windows js/css files on page
  • link to dhxWins available right after accordion inited
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXAccordionCell API DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
    • Methods
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

dhtmlXAccordionCell API

Methods
appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
clearIcon | clears (removes) cell's icon
close | closes a cell (only header is visible)
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
dock | docks content from the window to accordion cell
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getFrame | returns an iframe object when an URL is attached to a cell
getId | returns the id of a cell
getText | returns cell's text
getViewName | returns the name of the current view
hide | hides cell
hideHeader | hides the header of an accordion cell
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
isHeaderVisible | returns true if the header is visible
isOpened | returns true if cell is opened
isVisible | returns true if cell visible
moveOnTop | moves cell to the top
open | opens a cell
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
setHeight | sets cell's height (multi mode only)
setIcon | sets cell's icon (header's icon)
setText | sets cell's text
show | shows an item
showHeader | shows a cell's header
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
undock | undocks content from accordion cell to the window
unloadView | unloads the specified view
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • appendObject
    • attachAccordion
    • attachCarousel
    • attachChart
    • attachDataView
    • attachEditor
    • attachForm
    • attachGrid
    • attachHTMLString
    • attachLayout
    • attachList
    • attachMap
    • attachMenu
    • attachObject
    • attachRibbon
    • attachScheduler
    • attachSidebar
    • attachStatusBar
    • attachTabbar
    • attachToolbar
    • attachTree
    • attachTreeView
    • attachURL
    • attachVault
    • clearIcon
    • close
    • detachMenu
    • detachObject
    • detachRibbon
    • detachStatusBar
    • detachToolbar
    • dock
    • getAttachedMenu
    • getAttachedObject
    • getAttachedRibbon
    • getAttachedStatusBar
    • getAttachedToolbar
    • getFrame
    • getId
    • getText
    • getViewName
    • hide
    • hideHeader
    • hideMenu
    • hideRibbon
    • hideStatusBar
    • hideToolbar
    • isHeaderVisible
    • isOpened
    • isVisible
    • moveOnTop
    • open
    • progressOff
    • progressOn
    • reloadURL
    • setHeight
    • setIcon
    • setText
    • show
    • showHeader
    • showInnerScroll
    • showMenu
    • showRibbon
    • showStatusBar
    • showToolbar
    • showView
    • undock
    • unloadView
Start Accordion dhtmlXAccordionCell API

Methods

appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
clearIcon | clears (removes) cell's icon
close | closes a cell (only header is visible)
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
dock | docks content from the window to accordion cell
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getFrame | returns an iframe object when an URL is attached to a cell
getId | returns the id of a cell
getText | returns cell's text
getViewName | returns the name of the current view
hide | hides cell
hideHeader | hides the header of an accordion cell
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
isHeaderVisible | returns true if the header is visible
isOpened | returns true if cell is opened
isVisible | returns true if cell visible
moveOnTop | moves cell to the top
open | opens a cell
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
setHeight | sets cell's height (multi mode only)
setIcon | sets cell's icon (header's icon)
setText | sets cell's text
show | shows an item
showHeader | shows a cell's header
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
undock | undocks content from accordion cell to the window
unloadView | unloads the specified view
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


appendObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

appendObject

attaches an object to a cell without clearing cell content

void appendObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

dhxComponent.cells(id).appendObject("div_a");
dhxComponent.cells(id).appendObject("div_b");
dhxComponent.cells(id).appendObject("div_c");

Details

  • style "display:none" will be removed automatically after attaching, it's useful to keep content hidden while not attached

  • for this mode a cell will add scrolls automatically, there's no need to specify width/height to the attached object (divs without specified dimension are usually stretched to 100% of width and height adjusted to content)

<div id="div_a" style="display:none;"> ... </div>
<div id="div_b"> ... </div>
<div id="div_c"> ... </div>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachAccordion DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachAccordion

attaches dhtmlxAccordion to a cell

dhtmlXAccordion attachAccordion( [object conf] );

Parameters

conf object optional, accordion config for object-api init

Returns

dhtmlXAccordion dhtmlXAccordion instance

Example

var myAcc = dhxComponent.cells(id).attachAccordion();
myAcc.addItem("a1", "First item", true);
myAcc.addItem("a2", "Second item");

// or
var myAcc = dhxComponent.cells(id).attachAccordion({
    icons_path: "icons/",
    items: [
        { id: "a1", text: "Main Page", icon: "flag_red.png" },
        { id: "a2", text: "Navigation", icon: "flag_green.png" },
        { id: "a3", text: "Feedback", icon: "flag_blue.png" }
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachCarousel DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachCarousel

attaches a carousel object to a cell

object attachCarousel(number width,number height, [object conf] );

Parameters

width | number | the width of a carousel
height | number | the height of a carousel
conf | object | optional, the config of a carousel for object-api init

Returns

object dhtmlXCarousel instance

Example

var myCarousel = dhxComponent.cells(id).attachCarousel(400, 300, conf){
    ...
});

Change log

added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachChart DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachChart

attaches dhtmlxChart to a cell

dhtmlXChart attachChart(object conf);

Parameters

conf object chart conf (please, check chart docs for details)

Returns

dhtmlXChart dhtmlXChart instance

Example

var myChart = dhxComponent.cells(id).attachChart({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachDataView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachDataView

attaches dhtmlxDataView to a cell

dhtmlXDataView attachDataView(object conf);

Parameters

conf object dataview conf (please, check DataView docs for details)

Returns

dhtmlXDataView dhtmlXDataView instance

Example

var myDataView = dhxComponent.cells(id).attachDataView({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEditor DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachEditor

attaches dhtmlxEditor to a cell

dhtmlXEditor attachEditor();

Returns

dhtmlXEditor dhtmlXEditor instance

Example

var myEditor = dhxComponent.cells(id).attachEditor({
    // editor config here
});

Details

For details about Editor initialization, read the Object Constructor article.

More info about attaching Editor to other components is given in the article Adding Editor to DHTMLX Components.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachForm DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachForm

attaches dhtmlxForm to a cell

dhtmlXForm attachForm(object conf);

Parameters

conf object form conf (please, check form docs for details)

Returns

dhtmlXForm dhtmlXForm instance

Example

var myForm = dhxComponent.cells(id).attachForm({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachGrid DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachGrid

attaches dhtmlxGrid to a cell

dhtmlXGridObject attachGrid( [object config] );

Parameters

config object optional, an object with the Grid configuration

Returns

dhtmlXGridObject dhtmlXGridObject instance

Example

// without parameters
var myGrid = dhxComponent.cells(id).attachGrid();

// passing a config object as a parameter
grid1 = myLayout.cells("a").attachGrid({
    image_path:'codebase/imgs/',
    columns: [{
        label: "Column A",
        width: 100,
        type: "ro",
        sort: "int",
        align: "right"
    },{
        label: "Column B",
        width: 250,
        type: "ed",
        sort: "str",
        align: "left"
    }],
    multiselect: true,
    xml: "grid.xml"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHTMLString DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachHTMLString

attaches HTML content to a cell

void attachHTMLString(string htmlString);

Parameters

htmlString string an HTML string to attach

Example

dhxComponent.cells(id).attachHTMLString("<div>some content</div>");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachLayout DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachLayout

attaches dhtmlxLayout to a cell

dhtmlXLayoutObject attachLayout(string|object conf);

Parameters

conf string|object layout pattern or api-init config

Returns

dhtmlXLayoutObject dhtmlXLayoutObject instance

Example

// pattern only
var myLayout = dhxComponent.cells(id).attachLayout("4H");

// api-init config
var myLayout = dhxComponent.cells(id).attachLayout({
    pattern: "4H",
    cells: [
        {id: "a", text: "Navigation", width: 100, header: false},
        {id: "b", text: "Advertisement", height: 100},
        {id: "c", text: "Main Page"},
        {id: "d", text: "Links", collapse: true}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachList DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachList

attaches dhtmlxList to a cell

dhtmlXList attachList(object conf);

Parameters

conf object list conf (please, check List docs for details)

Returns

dhtmlXList dhtmlXList instance

Example

var myList = dhxComponent.cells(id).attachList({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMap DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachMap

attaches Google Maps to a cell

object attachMap( [object opts] );

Parameters

opts object optional, map options (please, check Google docs for details)

Returns

object google.maps.Map object

Example

var GMaps = dhxLayout.cells(id).attachMap();
//or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = dhxLayout.cells(id).attachMap(mapParams);

Details

Please, check Google docs for details.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachMenu

attaches dhtmlxMenu to a cell

object attachMenu( [object conf] );

Parameters

conf object optional, menu config

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.cells(id).attachMenu({
    icons_path: "imgs/menu/icons/",
    json: "data/json/menu.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachObject

attaches an HTML object to a cell

void attachObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

dhxComponent.cells(id).attachObject("objectId");

Details
  • style "display:none" (if set) will be removed automatically after attaching, useful to keep content hidden while not attached
<div id="objectId" style="display: none;">...</div>
  • for this mode cell will not render native scrolls, so you need to use the following style: "width: 100%; height: 100%; overflow: auto;" to make attached object's scrolls appear when necessary
div#objectId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}
See also
  • API
    • detachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


attachRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachRibbon

attaches dhtmlxRibbon to a cell

object attachRibbon( [object conf] );

Parameters

conf object optional, ribbon config

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.cells(id).attachRibbon({
    icons_path: "imgs/ribbon/icons/",
    json: "data/json/ribbon.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachScheduler DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachScheduler

attaches dhtmlxScheduler to a cell

object attachScheduler( [Date day,string mode,string contId,object scheduler] );

Parameters

day | Date | (optional) js date object, initial date in scheduler, current date by default
mode | string | (optional) name of the initial mode ("month", "day", "week"), "week" by default
contId | string | (optional) extended config, please see below
scheduler | object | (optional) dhtmlxScheduler object (another instance, only PRO version of scheduler)

Returns

object dhtmlXScheduler instance

Example

var myScheduler = dhxComponent.cells(id).attachScheduler();

// or
var myScheduler = dhxComponent.cells(id).attachScheduler(null, "month");

//or
var sTabs = '<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>'+
            '<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>'+
            '<div class="dhx_cal_tab" name="month_tab" style="right:280px;"></div>'+
            '<div class="dhx_cal_tab" name="timeline_tab" style="right:76px;"></div>';

var myScheduler = dhxComponent.cells(id).attachScheduler(null, "month", sTabs);

Details

There are two possible values of the contId parameter:

  • the id of the div that specifies the entire scheduler configuration
  • a string with the tabs' divs. In this case a scheduler will be rendered with the default configuration, except for the tabs: they can be presented by the default "day", "week", "month" members or by any other tabs' collection
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachSidebar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachSidebar

attaches dhtmlxSidebar to a cell

object attachSidebar( [object conf] );

Parameters

conf object optional, sidebar config for api-init

Returns

object dhtmlxSidebar instance

Example

var mySidebar = dhxComponent.cells(id).attachSidebar({
    items: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachStatusBar

attaches a status bar to a cell

obj attachStatusBar( [object conf] );

Parameters

conf object optional, status bar init params

Returns

obj status bar object

Example

/* conf param properties */
{
    text:   "Text", // status bar init text
    height: 20,     // status bar init height
    paging: true    // (optional) true to use for grid paging
}

/* init/attach status bar */

// default behavior
var sbObj = dhxComponent.cells(id).attachStatusBar();

// with text
var sbObj = dhxComponent.cells(id).attachStatusBar({text: "Loading..."});

// with text and custom height
var sbObj = dhxComponent.cells(id).attachStatusBar({text: "Loading...", height: 30});

/* operations with status bar object */

// set text
sbObj.setText("Page was successfully loaded");

// get text
var text = sbObj.getText();

Details

Since version 4.1 toolbar can be attached into statusbar in order to be used for paging in grid:

// first attach status bar
dhxComponent.cells(id).attachStatusBar({
    text:   "<div id='pagingArea'></div>",
    paging: true
});

// then init paging in grid
myGrid.enablePaging(true, 9, 3, "pagingArea");
myGrid.setPagingSkin("toolbar");
Change log
  • conf param was added in version 4.0
  • paging:true added in 4.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTabbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachTabbar

attaches dhtmlxTabbar to a cell

object attachTabbar( [object conf] );

Parameters

conf object optional, tabbar config for API-initialization

Returns

object dhtmlXTabbar instance

Example

var myTabbar = dhxComponent.cells(id).attachTabbar({
    align: "right",
    mode: "bottom",
    tabs: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Details

The old parameter used for tabbar initialization - "mode" is deprecated since version 4.0 and is replaced with "conf".

To set the tabs mode, use conf.mode:

// old deprecated
var myTabbar = dhxComponent.cells(id).attachTabbar("bottom");
// new usage
var myTabbar = dhxComponent.cells(id).attachTabbar({mode:"bottom"});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachToolbar

attaches dhtmlxToolbar to a cell

object attachToolbar( [object conf] );

Parameters

conf object optional, toolbar config

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.cells(id).attachToolbar({
    icons_path: "imgs/toolbar/icons/",
    json: "data/json/toolbar.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTree DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachTree

attaches dhtmlxTree to a cell

object attachTree( [string|number rootId] );

Parameters

rootId string|number (optional) tree root id (check Tree docs for details)

Returns

object dhtmlXTreeObject instance

Example

var myTree = dhxComponent.cells(id).attachTree();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTreeView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachTreeView

attaches dhtmlxTreeView to a cell

object attachTreeView( [object conf] );

Parameters

conf object optional, treeview config

Returns

object dhtmlXTreeViewObject instance

Example

var myTreeView = dhxComponent.cells(id).attachTreeView({
    items: [
        {id: 1, text: "Books", open: 1, items: [
            {id: 2, text: "Turned at Dark / C. C. Hunter"},
            {id: 3, text: "Daire Meets Ever / Alyson Noël"}
        ]}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachURL DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachURL

attaches the specified URL to a cell

void attachURL(string url, [boolean ajax,boolean|object postData] );

Parameters

url | string | URL to attach
ajax | boolean | (optional) if set to true, the URL will be loaded by AJAX (async GET), false by default
postData | boolean|object | (optional) performs POST request (true for a simple post or an object with params)

Example

/* iframe */
// GET
dhxComponent.cells(id).attachURL("page.html");
// POST
dhxComponent.cells(id).attachURL("page.html", null, true);
// POST with params
dhxComponent.cells(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

/* by ajax */
// GET
dhxComponent.cells(id).attachURL("page.html", true);
// POST
dhxComponent.cells(id).attachURL("page.html", true, true);
// POST with params
dhxComponent.cells(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Details

important notes:

  • to prevent caching in some browsers, an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • loading is async, so to proceed with content, you need onContentLoaded event
  • learn how to control attached content here
Change log

postData param and the ability to perform POST request are added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachVault DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

attachVault

attaches dhtmlxVault to a cell

dhtmlXVaultObject attachVault(object conf);

Parameters

conf object Vault config for object-api initialization

Returns

dhtmlXVaultObject dhtmlxVault instance

Example

var myVault = dhxComponent.cells(id).attachVault({
    uploadUrl:      "http://my_mega_server/upload_handler.php",
    swfUrl:         "http://my_mega_server/upload_handler.php",
    slUrl:          "http://my_mega_server/upload_handler.php",
    swfPath:        "dhxvault.swf",
    slXap:          "dhxvault.xap"
});

Details

if separate component files are used - dhtmlxvault.js should be included after dhtmlxcontainer.js

Change log

added in 3.6.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearIcon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

clearIcon

clears (removes) cell's icon

void clearIcon();

Example

myAcc.cells(id).clearIcon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


close DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

close

closes a cell (only header is visible)

void close(boolean callEvent);

Parameters

callEvent boolean set to true to call the onActive event

Example

myAcc.cells(id).close(callEvent);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

detachMenu

detaches dhtmlxMenu from a cell

void detachMenu();

Example

var myMenu = dhxComponent.cells(id).attachMenu();

// detach
dhxComponent.cells(id).detachMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

detachObject

detaches any attached content from a cell

void detachObject( [boolean remove,string|number|HTMLElement moveTo] );

Parameters

remove | boolean | (optional) set to true to remove the content permanently, false by default
moveTo | string|number|HTMLElement | (optional) the object's id or the object itself to move content to (if the "remove" parameter is set to false)
Details

Let's consider possible behavior, depending on which we pass particular parameters to the method.

Assuming that we have attached Grid to the component's cell:

var myGrid = dhxComponent.cells(id).attachGrid();

In case we need to detach Grid later, there are several possible options:

1) calling the detachObject() method without parameters:

dhxComponent.cells(id).detachObject();

The Grid object won't be completely removed. It will be attached to the document.body outside the component's container and hidden with the display:none property.

2) calling the detachObject() method with the "remove" parameter set to true:

dhxComponent.cells(id).detachObject(true);

The cell will be cleared. You need to clear the Grid object to remove it permanently.

myGrid = null;

3) calling the detachObject() method with the "remove" parameter set to false and passing an object (object's id) as the second parameter:

// assuming that a node with the id="tempNode" exists
dhxComponent.cells(id).detachObject(false, "tempNode");

The Grid object won't be completely removed. It will be moved to the "tempNode" container and hidden with the display:none property.

Note also that if you call dhxComponent.unload(), the attached content will be removed permanently.

See also
  • API
    • attachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


detachRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

detachRibbon

detaches dhtmlxRibbon from a cell

void detachRibbon();

Example

var myRibbon = dhxComponent.cells(id).attachRibbon();

// detach
dhxComponent.cells(id).detachRibbon();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

detachStatusBar

detaches status bar from a cell

void detachStatusBar();

Example

var sbObj = dhxComponent.cells(id).attachStatusBar();

// detach
dhxComponent.cells(id).detachStatusBar();
sbObj = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

detachToolbar

detaches dhtmlxToolbar from a cell

void detachToolbar();

Example

var myToolbar = dhxComponent.cells(id).attachToolbar();

// detach
dhxComponent.cells(id).detachToolbar();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dock DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

dock

docks content from the window to accordion cell

void dock();

Example

var myAcc = new dhtmlXAccordion({
    parent: "accObj",
    items: [
        {id: "a1", text: "Red", open: true},
        {id: "a2", text: "Green"},
        {id: "a3", text: "Blue"}
    ]
});
myAcc.cells("a1").dock();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

getAttachedMenu

returns dhtmlxMenu instance attached to a cell

object getAttachedMenu();

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.cells(id).attachMenu();

// somewhere in a different place
var attachedMenu = dhxComponent.cells(id).getAttachedMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

getAttachedObject

returns the object attached to a cell

string|object getAttachedObject();

Returns

string|object attached object

Example

var myGrid = dhxComponent.cells(id).attachGrid({...});

// somewhere in other place
var obj = dhxComponent.cells(id).getAttachedObject();
if (typeof(window.dhtmlXGridObject) == "function" && obj instanceof dhtmlXGridObject) {
    // code related to grid
} else {
    // some other code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

getAttachedRibbon

returns dhtmlxRibbon instance attached to a cell

object getAttachedRibbon();

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.cells(id).attachRibbon();

// somewhere in other place
var attachedRibbon = dhxComponent.cells(id).getAttachedRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

getAttachedStatusBar

returns status bar object attached to a cell

object getAttachedStatusBar();

Returns

object status bar instance

Example

var myStatusBar = dhxComponent.cells(id).attachStatusBar();

// somewhere in a different place
var attachedStatusBar = dhxComponent.cells(id).getAttachedStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

getAttachedToolbar

returns dhtmlxToolbar instance attached to a cell

object getAttachedToolbar();

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.cells(id).attachToolbar();

// somewhere in a different  place
var attachedToolbar = dhxComponent.cells(id).getAttachedToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFrame DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

getFrame

returns an iframe object when an URL is attached to a cell

HTMLElement getFrame();

Returns

HTMLElement an iframe object

Example

// as loading is async, you need to do it through an event
dhxComponent.attachEvent("onContentLoaded", function(id){

    // get frame
    var ifr = dhxComponent.cells(id).getFrame();

    // access to iframe's element
    var elem = ifr.contentWindow.document.getElementById("someId");
    elem.innerHTML = "some text";

    // access to iframe's function
    // make sure that the function is in the iframe's window scope
    ifr.contentWindow.someFunc();

});

// and then attach an URL
dhxComponent.cells(id).attachURL("server/page.php?param=value");

Details

You can learn how to manage the attached content from the article Attaching URL.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getId DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

getId

returns the id of a cell

string|number getId();

Returns

string|number the cell's id

Example

dhxComponent.forEachCell(function(cell){
    var id = cell.getId();
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getText DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

getText

returns cell's text

string getText();

Returns

string cell's text

Example

var text = dhxAcc.cells(id).getText();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getViewName DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

getViewName

returns the name of the current view

string getViewName();

Returns

string view name

Example

var name = dhxComponent.cells(id).getViewName();

Details

The default view name is "def", it is created automatically when a cell is created

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hide DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

hide

hides cell

void hide();

Example

myAcc.cells(id).hide();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideHeader DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

hideHeader

hides the header of an accordion cell

void hideHeader();

Example

myAcc.cells(id).hideHeader();

Change log

added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

hideMenu

hides dhtmlxMenu attached to a cell

void hideMenu();

Example

dhxComponent.cells(id).hideMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

hideRibbon

hides dhtmlxRibbon attached to a cell

void hideRibbon();

Example

dhxComponent.cells(id).hideRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

hideStatusBar

hides status bar object attached to a cell

void hideStatusBar();

Example

dhxComponent.cells(id).hideStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

hideToolbar

hides dhtmlxToolbar attached to a cell

void hideToolbar();

Example

dhxComponent.cells(id).hideToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isHeaderVisible DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

isHeaderVisible

returns true if the header is visible

boolean isHeaderVisible();

Returns

boolean true if the header is visible

Example

var state = myAcc.cells(id).isHeaderVisible();

Change log

added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isOpened DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

isOpened

returns true if cell is opened

boolean isOpened();

Returns

boolean true if opened

Example

var isOpened = myAcc.cells(id).isOpened();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isVisible DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

isVisible

returns true if cell visible

boolean isVisible();

Returns

boolean true if cell is visible

Example

var isVisible = myAcc.cells(id).isVisible();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveOnTop DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

moveOnTop

moves cell to the top

void moveOnTop();

Example

myAcc.cells(id).moveOnTop();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


open DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

open

opens a cell

void open(boolean callEvent);

Parameters

callEvent boolean set to true to call the onActive event

Example

myAcc.cells(id).open(callEvent);

Details

in case of single mode - currently opened cell will be closed

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOff DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

progressOff

hides the progress indicator in a cell

void progressOff();

Example

dhxComponent.cells(id).progressOff();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOn DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

progressOn

shows the progress indicator in a cell

void progressOn();

Example

dhxComponent.cells(id).progressOn();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


reloadURL DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

reloadURL

reloads the attached URL in a cell

void reloadURL();

Example

dhxComponent.cells(id).reloadURL();

Details

reloads both iFrame/AJAX attached, keeps postData and params, if any

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setHeight DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

setHeight

sets cell's height (multi mode only)

void setHeight(type height);

Parameters

height type height for whole cell (with header)

Example

var myAcc = new dhtmlXAccordion("accObj");
myAcc.enableMultiMode();

// static height
myAcc.cells(id).setHeight(200);

// for dyn height
myAcc.cells(id).setHeight("*");

// dyn height from api-init
var myAcc = new dhtmlXAccordion({
    parent: "accObj",
    multi_mode: true,
    items: [
        {id: "a1", text: "Text", height: "*"},
        ...
    ]
});

Details

There's a dynamic height mode in the multi mode. This mode is set for a cell through the setHeight("*"). It is important that a parent must have a fixed height for a dynamic height mode to work properly. If an accordion is attached to a layout, a window, a tabbar or to another accordion, the parent height is calculated automatically.

<!-- make sure parent have specified height -->
<div id="accObj" style="width: 300px; height: 400px;"></div>
// init
var myAcc = new dhtmlXAccordion("accObj");

The main feature of this mode is that an opened dynamic cell will take all the free space. If there are more than one dynamic cells opened, free space is equally divided among them.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIcon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

setIcon

sets cell's icon (header's icon)

void setIcon(string icon);

Parameters

icon string filepath

Example

myAcc.cells(id).setIcon("icon.png");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setText DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

setText

sets cell's text

void setText(type text);

Parameters

text type new text

Example

myAcc.cells(id).setText("New Text");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

show

shows an item

void show();

Example

myAcc.cells(id).show();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showHeader DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

showHeader

shows a cell's header

void showHeader();

Example

myAcc.cells(id).showHeader();

Change log

added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showInnerScroll DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

showInnerScroll

shows inner cell scrolls

void showInnerScroll();

Example

dhxComponent.cells(id).showInnerScroll();

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

showMenu

shows dhtmlxMenu attached to a cell

void showMenu();

Example

dhxComponent.cells(id).showMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

showRibbon

shows dhtmlxRibbon attached to a cell

void showRibbon();

Example

dhxComponent.cells(id).showRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

showStatusBar

shows status bar object attached to a cell

void showStatusBar();

Example

dhxComponent.cells(id).showStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

showToolbar

shows dhtmlxToolbar attached to a cell

void showToolbar();

Example

dhxComponent.cells(id).showToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

showView

shows the specified view, creates a new one if it doesn't exist

boolean showView(string name);

Parameters

name string view name

Returns

boolean true if view was accessed first time, false otherwise

Example

// here is an example how to initialize content
// in several views on demand inside of a cell

// 1) for the default view "def" we will simply attach an URL
// 2) for the "grid" view  we will attach menu and grid
// 3) and for the "tree" view we will attach toolbar and tree

var myMenu;
var myGrid;
var myToolbar;
var myTree;

// the default view is ready right after component initialization
dhxComponent.cells(id).attachURL("http://somedomain.com/page.html");

function initView(name) {
    // assuming that this function will be called after some user action
    // like a button click or some other
    var state = dhxComponent.cells(id).showView(name);
    if (state == true) {
        // first call, initializes corresponding components
        if (name == "grid") {
            myMenu = dhxComponent.cells(id).attachMenu();
            myGrid = dhxComponent.cells(id).attachGrid();
        } else if (name == "tree") {
            myToolbar = dhxComponent.cells(id).attachToolbar();
            myTree = dhxComponent.cells(id).attachTree();
        }
    }
}

Details

The default view name is "def", it is created automatically when a cell is created

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


undock DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

undock

undocks content from accordion cell to the window

void undock( [number x,number y,number width,number height] );

Parameters

x | number | optional, window x-position
y | number | optional, window y-position
width | number | optional, window width
height | number | optional, window height

Example

var myAcc = new dhtmlXAccordion({
    parent: "accObj",
    items: [
        {id: "a1", text: "Red", open: true},
        {id: "a2", text: "Green"},
        {id: "a3", text: "Blue"}
    ]
});
myAcc.cells("a1").undock();
// or
myAcc.cells("a1").undock(10, 10, 320, 200);

Change log

params: x, y, width, height - added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unloadView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearIcon
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHeaderVisible
  • isOpened
  • isVisible
  • moveOnTop
  • open
  • progressOff
  • progressOn
  • reloadURL
  • setHeight
  • setIcon
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Accordion dhtmlXAccordionCell API Methods

unloadView

unloads the specified view

void unloadView(string name);

Parameters

name string view name

Example

// create test view and switch to it
var state = dhxComponent.cells(id).showView("test_view");
console.log(state); // true

// attach some content
dhxComponent.cells(id).attachMenu();
dhxComponent.cells(id).attachGrid();

// go back to default view
var state = dhxComponent.cells(id).showView("def");
console.log(state); // false

// unload test_view
dhxComponent.cells(id).unloadView("test_view");

// open test_view again
var state = dhxComponent.cells(id).showView("test_view");
console.log(state); // true

// attach some content
dhxComponent.cells(id).attachMenu();
dhxComponent.cells(id).attachGrid();

// unload test_view
dhxComponent.cells(id).unloadView("test_view");

// check active view
var name = dhxComponent.cells(id).getViewName();
console.log(name); // "test_view"

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing Accordion on a Page DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
    • Accordion source files
    • Constructor
    • Full-screen init
    • Init in an HTML element
    • Init in a window
    • Init in a cell of layout
    • Recommended init way
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Initializing Accordion on a Page

Accordion source files

To start working with dhtmlxAccordion, you need to include accordion js/css files on a page.

In order to use dhtmlxAccordion as a separate component, you need to include its source files on the page. There are two of them:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxaccordion.css">
    <script src="codebase/dhtmlxaccordion.js"></script>
</head>

If you use dhtmlxAccordion as a part of "dhtmlxSuite" package, you need to have 2 files included:

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

dhtmlxaccordion js/css files are parts of dhtmlx js/css correspondingly, so there is no need to include them separately.

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Constructor

After you've included the necessary source files, you can initialize Accordion object.

var myAcc = new dhtmlXAccordion({

    parent:     "accObj",       // id/object, parent container for accordion
    icons_path: "../icons/",    // string, path to icons, optional
    skin:       "dhx_skyblue",  // string, accordion's skin, optional
    multi_mode: true,           // boolean, true to enable multimode
    dnd:        true,           // boolean, true to enable drag-n-drop

    items: [    // accordion cells section
        {
            id:     "a1",       // item id, required
            text:   "Text",     // string, header's text (html allowed)
            icon:   "icon.png", // string, header's icon, optional
            open:   true,       // boolean, true to open/false to close item on init
            height: 200         // number, cell's height (multimode only)
        },
        {...},  // other items
        {...}
    ]

});

// old way
var myAcc = new dhtmlXAccordion(parent, skin);

// where:
parentId    // id/object, a parent container where layout will be located
skin        // string, optional, "dhx_skyblue", "dhx_web", "dhx_terrace"

Full-screen init

Generally, to create a full-screen accordion on a page, use the code as in:

<html>
<head>
<style>
    /* it's important to set width/height to 100% for fullscreen init */
    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        overflow: hidden;
    }

</style>
<script>
    var myAcc;
    function doOnLoad() {
        myAcc = new dhtmlXAccordion({
            parent: document.body,  // parent container
            items: [...]            // accordion's cells and other config
        });
    }
</script>
</head>
<body onload="doOnLoad();">

</body>
</html>

If you need, you can set offsets for Accordion in the full screen mode.

Init in an HTML element

To initialize dhtmlxAccordion in an HTML element, do the following:

1) create an HTML element where the accordion will be placed later, don't forget to specify its width and height:

<div id="accObj" style="position: relative; width: 360px; height: 400px;"></div>

The height and width of the container can't be set in percentage, they are specified in pixels only.

2) create a dhtmlXAccordion object and place it into the HTML object that you've just created:

var myAcc = new dhtmlXAccordion({
    parent: "accObj",   // id or object for parent container
    items: [...]        // accordion's cells and other config
});
//or
var myAcc = new dhtmlXAccordion({
    parent: document.getElementById("accObj"),
    items: [...]
});
// old way still works
var myAcc = new dhtmlXAccordion("accObj");

Init in a window

To create an accordion in a window, do the following:

1) create a dhtmlxWindows object:

var dhxWins = new dhtmlXWindows();
var accWin = dhxWins.createWindow("w1", 20, 20, 600, 400);

The following parameters are passed to dhxWins.createWindow():

  • w1 - the id of the window;
  • 20, 20 - the left and the top positions of the window;
  • 600, 400 - the width and the height of the window.

2) call the attachAccordion method to render an accordion in the window:

var myAcc = new accWin.attachAccordion();
// or using a more extended config
var myAcc = new accWin.attachAccordion({
    items: [...]
});

Init in a cell of layout

To create a new accordion in a cell of a layout, do the following:

1) create a dhtmlXLayoutObject object:

var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L"
});

2) attach accordion to a cell of the layout with the attachAccordion method:

var myAcc = myLayout.cells("a").attachAccordion();
// or using a more extended config
var myAcc = myLayout.cells("a").attachAccordion({
    items: [...]
});

Recommended init way

<html>
<head>
<script>
    var myAcc;
    function doOnLoad() {
        myAcc = new dhtmlXAccordion({
            // config here
        });
    }
</script>
</head>
<body onload="doOnLoad();">

</body>
</html>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Accordion Skins DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Accordion Skins

The following predefined skins are available:

"material" (default)

"dhx_skyblue"

"dhx_web"

"dhx_terrace"

<!-- here we will place accordion --->
<div id="accObj" style="position: relative; width: 360px; height: 400px;"></div>

The "material" skin is used by default. Depending on the attached CSS skin-file, accordion will try to detect skin automatically. You just need to initialize the accordion:

var myAcc = new dhtmlXAccordion({
    parent: "accObj"
    items: [...]
});

In order to set skin manually use the following code:

var myAcc = new dhtmlXAccordion({
    parent: "accObj",
    skin: "dhx_web",
    items: [...]
});

You can also specify a skin as the 2nd param of the old-style init way:

var myAcc = new dhtmlXAccordion("accObj", "dhx_web");

Finally, you can set a skin by using the setSkin method:

var myAcc = new dhtmlXAccordion({
    parent: "accObj"
});
myAcc.setSkin("dhx_web");

If the predefined skins don't fit you, try to create your own one with the help of the SkinBuilder tool. Read the details here.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Icons in the Header DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
    • Font Awesome icons in Accordion
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Icons in the Header

You have a possibility to add an icon to the header's pane before the text label.

It can be done on the initialization stage or on-demand from any code line (say, you need to update icons depending on cell's content). All you need to do is to specify the icons path (the path to the folder where icons are located) and the icons you want to set for the cells.

// on init stage
var myAcc = new dhtmlXAccordion({
    parent: "accObj",                   // parent container
    icons_path: "../icons/",            // common icons path
    items: [
        {
            id: "a1",                   // item id
            text: "Header with icon",   // header's text
            icon: "flag_green.png"      // header's icon
    ]
});

// somewhere in the code

// firstly, you need to specify the path to icons,
// you need to set it once, if all the icons are located in the same folder
myAcc.setIconsPath("../icons/");

// then change the icons
myAcc.cells(id).setIcon("flag_green.png");
myAcc.cells(otherId).setIcon("flag_red.png");

In case you want to remove any item's icon - use the clearIcon() method:

myAcc.cells(id).clearIcon();

Related sample: Icons Manipulation

Font Awesome icons in Accordion

You can use Font Awesome icons in dhtmlxAccordion.

This possibility can be enabled in two ways:

1) during accordion initialization

myAcc = new dhtmlXAccordion({
    iconset: "awesome"
});

2) after accordion initialization, using the setIconset method:

myAcc.setIconset("awesome");

Related sample: Font awesome

Follow the Font Awesome homepage to learn more about icons.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Single Mode and Multi Mode DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Single Mode and Multi Mode

There are two modes available for accordion: Single mode and Multi mode.

Single mode refers to the accordion's behavior when only one item can be opened. For this mode the end-user's click operations on Accordion items are the following:

1) a click on a collapsed item - expands this item, and collapses the one that was expanded before;

2) a click on an expanded item - yields no result.

Multi mode refers to the accordion's behavior when all the items can be opened at the same time. For this mode the end-user's clicks on Accordion items work as follows:

1) a click on a collapsed item - expands this item;

2) a click on an expanded item - collapses this item.

The single mode is activated by default. To enable the multi mode you should call the method enableMultiMode() before adding items or you can enable this mode on the initialization stage.

// on init stage
var myAcc = new dhtmlXAccordion({
    parent:     "accObj",   // accordion container
    multi_mode: true,       // enable multimode
    items: [...]
});

// or after init but before adding items
var myAcc = new dhtmlXAccordion(...);
myAcc.enableMultiMode(true);
// and only then, add items
myAcc.addItem("a1", "Main Page");
myAcc.addItem("a2", "Site Navigation");

Related sample: MultiMode

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Accordion Offsets DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Accordion Offsets

dhtmlxAccordion supports offsets that can be useful in full-screen init. For example, to add a logo to the header or company's info to the footer.

1) you can set offset on the initialization stage:

var myAcc = new dhtmlXAccordionObject({
    parent: document.body,
    items:[...],
    offsets: {
        top: 10,
        right: 20,
        bottom: 30,
        left: 40
    }
});

2) or you can set it from JS code:

myAcc.setOffsets({
    top: 10,
    right: 20,
    bottom: 30,
    left: 40
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Manipulating Cells DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
    • Adding cells
    • Accessing cells
    • Setting/getting header text
    • Opening/closing cells
    • Showing/hiding cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Manipulating Cells

Adding cells

A new item can be added to accordion with the help of the method addItem():

var item = myAcc.addItem(id, text, open, height, icon);

The parameters of this method are:

  • id - item id
  • text - header text
  • open - true/false - opened/closed on the adding stage
  • height - number, item height (multimode)
  • icon - string, header icon

If the parameter "open" isn't specified, the default behavior is:

  • single mode - true for the 1st item (i.e. opens the 1st added item);
  • multimode - true for all items.

The parameter "height" in the multi mode can have the "*" value (means "auto"). In this case the logic will be the following:

For example, you have a multi mode accordion attached to a window with 3 autoheight cells. When all the cells are expanded, each cell has 1/3 of window's height. When one of them collapsed, each expanded cell will have 1/2 of window's height minus the height of the collapsed cell. If two cells collapsed - the expanded cell will occupy all the available space.

Accessing cells

For working with accordion we need to access its items. To get access to items you should use their ids (the ids that you specified on the addItem() stage).

Items are referred to as cells. Thus, we can access any accordion's item in the following way:

var item = myAcc.cells(id);

The method will return the cell's object.

Setting/getting header text

The header text of an accordion item can be set/changed in this way:

myAcc.cells(id).setText(text);

The setText() method takes the only parameter:

  • text - header text of the added item.

Item's header text can be easily received through the method getText():

var text = myAcc.cells(id).getText(); // returns current item's header text

Opening/closing cells

The current active item becomes inactive/closed, when some another item is set active from the page, or from script with the help of the open() method:

myAcc.cells(id).open();

The method close() should be used to close (collapse) an accordion's item:

myAcc.cells(id).close();

Showing/hiding cells

Any item in the accordion can be easily shown/hidden by means of two corresponding methods (show()/hide()):

myAcc.cells(id).show();
myAcc.cells(id).hide();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Docking/Undocking Cells DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Docking/Undocking Cells

Each cell of the accordion can be docked or undocked.

What do the "docked/undocked" states mean?

All cells in the accordion are docked by default.

The undocked cells are those cells which were taken out of the accordion and displayed in a separate window. Note, to undock a cell you need to have dhtmlxWindows's source files included on the page.

A docked cell

An undocked cell

To undock a cell, use the undock method:

myAcc.cells(id).undock();

To dock a cell back, use the dock method:

myAcc.cells(id).dock();

When a cell undocked you can operate with the window, for this purpose use:

myAcc.dhxWins.window(id).doSome(...);

The window's id is the same as the cell's id.

Related sample: Dock / undock cells

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Iterator

The method forEachItem() calls a user-defined function for every existing item and passes an item's object into it. It can be useful when you need to apply the same operation to all items.

myAcc.forEachItem(function(cell){
    // your code here
});
// or
function doWithItem(cell){
    // your code here
});
myAcc.forEachItem(doWithItem);

For example, you can use setText() method to set the same text for headers of all the items in the accordion:

myAcc.forEachItem(function(cell){
    cell.setText("new text");
});

Related sample: Iterator

cons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
    • Start Accordion

    Iterator

    The method forEachItem() calls a user-defined function for every existing item and passes an item's object into it. It can be useful when you need to apply the same operation to all items.

    myAcc.forEachItem(function(cell){
    // your code here
});
// or
function doWithItem(cell){
    // your code here
});
myAcc.forEachItem(doWithItem);

    For example, you can use setText() method to set the same text for headers of all the items in the accordion:

    myAcc.forEachItem(function(cell){
    cell.setText("new text");
});

    Related sample: Iterator

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


Using Windows from Accordion DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Using Windows from Accordion

Sometimes while using accordion you may need to show a pop-up window. If windows .js/.css files are included on the page, there's no need to create an extra windows instance, as the accordion has one already (it is used for the "dock/undock" functionality)

// creating an accordion instance
var myAcc = new dhtmlXAccordion("accObj");
...
// creating a pop-up window from the accordion's windows instance
var popupWindow = myAcc.dhxWins.createWindow("popupWindow", ...);

If you're using the "dock/undock" functionality at the same time, you need to make sure your windows ids and the accordion's windows ids will not overwrite each other.

Remember: accordion uses the same ids for windows and for its cells. You've specified these ids by the addItem() method.

You can read more details here.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Components DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
    • Getting the attached component
    • Detaching components
    • Scheduler specificity
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Attaching Components

Almost all DHTMLX components can be attached directly to a cell by the corresponding method.

Accordion
dhxComponent.cells(id).attachAccordion();
Carousel
dhxComponent.cells(id).attachCarousel();
Chart
dhxComponent.cells(id).attachChart();
DataView
dhxComponent.cells(id).attachDataView();
Editor
dhxComponent.cells(id).attachEditor();
Form
dhxComponent.cells(id).attachForm();
Grid
dhxComponent.cells(id).attachGrid();
Layout
dhxComponent.cells(id).attachLayout();
List
dhxComponent.cells(id).attachList();
Menu
dhxComponent.cells(id).attachMenu();
Ribbon
dhxComponent.cells(id).attachRibbon();
Scheduler
dhxComponent.cells(id).attachScheduler();
Sidebar
dhxComponent.cells(id).attachSidebar();
StatusBar
dhxComponent.cells(id).attachStatusBar();
Tabbar
dhxComponent.cells(id).attachTabbar();
Toolbar
dhxComponent.cells(id).attachToolbar();
Tree
dhxComponent.cells(id).attachTree();
TreeView
dhxComponent.cells(id).attachTreeView();

We highly recommend you to follow this way of attaching components, as it guarantees proper rendering and correct resizing of embedded components in relation to their parent container.

Please note that attaching of Menu, Ribbon, Toolbar and StatusBar into a cell has some peculiarities. For details check the article Attaching Menu/Status Bar.

Make sure you've included the corresponding .js/.css files of the related component on a page, for example:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxgrid.css">
    <script src="dhtmlxgrid.js"></script>
</head>

Getting the attached component

There is a possibility to get link to the attached component:

var attached = dhxComponent.cells(id).getAttachedObject();
if (window.dhtmlXGridObject != null && attached instanceof window.dhtmlXGridObject) {
    console.log("An attached grid detected");
}

Detaching components

// attach
var myAcc = dhxComponent.cells(id).attachAccordion({...});

// detach later
dhxComponent.cells(id).detachObject(true);
myAcc = null;

Scheduler specificity

Please note, the attachScheduler method differs from other attaching methods. The difference is that attachScheduler not only attaches the component but also initializes it - creates an instance with the predefined structure.

Therefore:

  • The attachScheduler method doesn't return a component object;
  • The attachScheduler method can be called only once;
  • If you need to set some configuration options for the scheduler, set them before attaching scheduler to the layout.
var myLayout = new dhtmlXLayoutObject(document.body, "3L");
myLayout.cells("a").setWidth(800);

// configure scheduler if needed
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
// then attach it to layout
myLayout.cells("a").attachScheduler(new Date(), "month");
// load some data
scheduler.load("../common/events.xml");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Menu/Status Bar

You can use Menu, Toolbar and Ribbon components as a menu bar and attach them to the top of a cell. A cell can also have a simple status bar at the bottom added with the help of the StatusBar component.

You can attach several of these components at a time together with other content of a Layout-based component.

Attaching Menu

1) Include dhtmlxMenu source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxmenu.css">
    <script src="dhtmlxmenu.js"></script>
</head>

2) Call the corresponding function:

var myMenu = dhxComponent.cells(id).attachMenu({
    // menu conf here
});

3) Learn more about dhtmlxMenu from the related documentation.

Attaching Toolbar

1) Include dhtmlxToolbar source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxtoolbar.css">
    <script src="dhtmlxtoolbar.js"></script>
</head>

2) Call the corresponding function:

var myToolbar = dhxComponent.cells(id).attachToolbar({
    // toolbar conf here
});

3) Learn more about dhtmlxToolbar from the related documentation.

Attaching Ribbon

1) Include dhtmlxRibbon source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxribbon.css">
    <script src="dhtmlxribbon.js"></script>
</head>

2) Call the corresponding function:

var myRibbon = dhxComponent.cells(id).attachRibbon({
    // ribbon conf here
});

3) Learn more about dhtmlxRibbon from the related documentation.

Attaching StatusBar

1) There's no need to include extra .js/.css files.

2) Call the corresponding function:

var sbObj = dhxComponent.cells(id).attachStatusBar({
    // status bar config here, optional
    text:   "some text here",   // status bar text
    height: 35                  // custom height
});

// set status bar text
sbObj.setText("New text");

// get status bar text
var text = sbObj.getText();

What else?

1) You can show/hide any attached control without unloading it from memory, for example:

dhxComponent.cells(id).showMenu();
dhxComponent.cells(id).hideMenu();

2) You can detach and unload the attached control completely, for example:

// init
var myMenu = dhxComponent.cells(id).attachMenu({...});

// detach later
dhxComponent.cells(id).detachMenu();
myMenu = null;

3) You can get link to the component's instance:

var myMenu = dhxComponent.cells(id).getAttachedMenu();
if (myMenu == null) {
    // not inited
    myMenu = dhxComponent.cells(id).attachMenu({...});
}


Attaching HTML DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
    • Attaching HTML object
    • Appending HTML object
    • Attaching HTML string
    • Detaching object
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Attaching HTML

There is a possibility to attach HTML objects and HTML strings to a cell. Several HTML objects can be attached at a time.

Attaching HTML object

<div id="objId">Some text</div>
// attach by id
dhxComponent.cells(id).attachObject("objId");
// or attach by link
var obj = document.getElementById("objId");
dhxComponent.cells(id).attachObject(obj);

in this mode a cell doesn't render scrolls by default, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Appending HTML object

This way is the same as attaching an object, but the current cell's content isn't removed:

dhxComponent.cells(id).appendObject("otherObjId");

in this mode a cell will add scrolls automatically, so there's no need to specify width/height to the attached object.

Attaching HTML string

dhxComponent.cells(id).attachHTMLString('<div id="objId">Some text</div>');

in this mode scrolls aren't rendered by default as well, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Detaching object

Any attached object or HTML string can be detached from a cell with the help of the detachObject() method:

// attach
dhxComponent.cells(id).attachObject("objId");

// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to "true", the object will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching URL DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
    • Attaching via iFrame
    • Attaching via AJAX
    • Using onContentLoaded event
    • Accessing the attached content
    • Accessing parent from attached page
    • Detaching URLs
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Attaching URL

A cell has a possibility to attach URLs. It can be done by using iFrames and AJAX calls.

In the case of iFrames call, an iFrame will be created inside of a cell, and your URL will be attached as a separate page (it will have access to your code as you will have control over the content inside of the iFrame).

In the case of AJAX call, the content returned by the server will be placed inside of a div.

  • a common function used for both methods is attachURL(), the only difference is that the 2nd argument is set to true for AJAX call
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
  • loading is async, so to proceed with content, you need to use the "onContentLoaded" event

Attaching via iFrame

GET request

dhxComponent.cells(id).attachURL("page.html");

POST request without params

dhxComponent.cells(id).attachURL("page.html", null, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

Attaching via AJAX

GET request

dhxComponent.cells(id).attachURL("page.html", true);

POST request without params

dhxComponent.cells(id).attachURL("page.html", true, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Using onContentLoaded event

As it was said above, loading is async, so to proceed with content, you need to use the "onContentLoaded" event:

// firstly add the event
dhxComponent.attachEvent("onContentLoaded", function(id){
    // page.html id loaded, your code here
});

// now attach a URL
dhxComponent.cells(id).attachURL("page.html");

Accessing the attached content

This part is related to the iFrame-mode only.

Assuming the code below has been attached:

<html>
<head>
    <script>
        function myFunc() {
            console.log("I'm attached function");
        }
    </script>
</head>
<body>
    <div id="attachedObject">
        Some text here
    </div>
</body>
</html>

Firstly, you need to get an iFrame object from the cell where the attached content is located:

var ifr = dhxComponent.cells(id).getFrame();

Now you can access the elements:

// make sure an element exists
var elem = ifr.contentWindow.document.getElementById("attachedObject");
elem.innerHTML = "Some new text here";

and call some JS code:

// make sure function exists and located in the iFrame's window scope
ifr.contentWindow.someFunc();

Accessing parent from attached page

This part is related to the iFrame-mode only.

If you need to make some actions with a cell from the attached page (for example, hide the window by clicking some button on the page or collapse a layout's cell) this can be done in the following way:

<!-- this attached page.html -->
<script>
    function controlParent() {
        parent.myLayout.cells(id).collapse();   // collapse layout's cell
        parent.myWins.window(id).hide();        // hiding a window
    }
</script>

Any variable or function can be acccessed but make sure it is declared in a global window scope.

Detaching URLs

Any attached URL can be detached from a cell by using the detachObject() method:

// attach
dhxComponent.cells(id).attachURL("page.html");

// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to true, the object (iFrame or a div with AJAX content) will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Google Maps

There's a possibility to attach Google Maps to a cell.

Firstly, include the corresponding .js file on your page:

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>

And then initialize a cell with a map inside on the page:

var GMaps = myLayout.cells("b").attachMap(); // applies default parameters

// or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = myLayout.cells(id).attachMap(mapParams);

Related sample: Integration with Google Maps

lls
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
    • Start Accordion

    Attaching Google Maps

    There's a possibility to attach Google Maps to a cell.

    Firstly, include the corresponding .js file on your page:

    <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>

    And then initialize a cell with a map inside on the page:

    var GMaps = myLayout.cells("b").attachMap(); // applies default parameters

// or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = myLayout.cells(id).attachMap(mapParams);

    Related sample: Integration with Google Maps

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


Progress Bar

A progress control is a state indicator. It can be used to indicate content loading or updating. While the cell is visually disabled and not accessible for user actions the progress is enabled.

This functionality will not start automatically when some content is loaded into a cell, it needs to be triggered by calling the appropriate API method.

Here is the code for a cell's progress control:

// turning progress on
dhxComponent.cells(id).progressOn();

// turning progress off
dhxComponent.cells(id).progressOff();

In practical scenario, you can place the progressOn() call before loading data in some component, and progressOff() in data loading callback, for example:

var myLayout;
var myGrid;

// init layout and attach grid
function initControls() {
    myLayout = new dhtmlXLayoutObject({
        parent: "layoutObj",
        pattern: "2U"
    });
    myGrid = myLayout.cells("a").attachGrid();
    loadGridData(true);
}

// load/reload grid data
function loadGridData(firstLoad) {
    myLayout.cells("a").progressOn();
    if (firstLoad == true) {
        myGrid.load("server.php", doOnGridLoaded);
    } else {
        myGrid.updateFromXML("server.php", true, false, doOnGridLoaded);
    }
}

// grid dataload callback
function doOnGridLoaded() {
    myLayout.cells("a").progressOff();
}
<body onload="initControls();">
    <div id="layoutObj" style="width: 600px; height: 400px;"></div>
    <input type="button" value="refresh grid" onclick="loadGridData();"></div>
</body>

Each time you will click the button, the loadGridData() method will be called and you will see the progress of loading over the cell with grid.


Different Content in the Same Cell DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Different Content in the Same Cell

Cells have a possibility to show different content in the same cell. This feature is called "views". Each cell shows the view "def" by default. You can easily switch to the other view and init different content.

Let's see how it works. We will create a "3L" layout and attach some components to the cell "b".

var myLayout = new dhtmlXLayoutObject("layoutObj", "3L");

Currently, the view "def" is selected. There's no need to call any extra commands to make it active, just attach the content you need:

var myMenu = myLayout.cells("b").attachMenu();
var myGrid = myLayout.cells("b").attachGrid();

Now let's show another view and attach some other content to it:

myLayout.cells("b").showView("tree");

At this moment the cell hides the currently active views ("def" in our case) and shows the requested one. You can name the view as you wish, it's necessary just to determine which view to show. As we haven't attached any components, the "tree" view looks like an empty cell.

Now let's attach some content to the view "tree":

myTree = myLayout.cells("b").attachTree();
myToolbar = myLayout.cells("b").attachToolbar();

Now let's go back to the view "def" and see what happens:

myLayout.cells("b").showView("def");

As you can see, now the view "tree" becomes hidden and the view "def" is restored and active.

In the above example we're using layout just to show you how the described functionality works. Views are the feature of a cell, so they are enabled in all the components that use cells: accordion, layout, tabbar and windows.

Related sample: Views

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Coloring Text Selection DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Coloring Text Selection

Sometimes you need to make the selected text look like a common skin. To set a custom color for the selection, use the following technique:

1) Define a CSS class with ::selection and ::-moz-selection pseudo-elements inside:

.my_style::selection {
    color: #454544;
    background-color: #fffcda;
}
.my_style::-moz-selection {
    color: #454544;
    background-color: #fffcda;
}

2) Set the above specified CSS class for the required object:

<div id="layoutObj"></div>
<div id="objId">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
<div id="objId2" class="my_style">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "2U",
    cells: [
        {id: "a", text: "Default selection"},
        {id: "b", text: "Custom selection"}
    ]
});

myLayout.cells("a").attachObject("objId");
myLayout.cells("b").attachObject("objId2");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration from 3.6 to 4.0 DHTMLX Docs

Documentation
  • dhtmlXAccordion API
  • dhtmlXAccordionCell API
  • Initializing Accordion on a Page
  • Accordion Skins
  • Icons in the Header
  • Single Mode and Multi Mode
  • Accordion Offsets
  • Manipulating Cells
  • Docking/Undocking Cells
  • Iterator
  • Using Windows from Accordion
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Accordion

Migration from 3.6 to 4.0

1) In the new version of DHTMLX Library the names of some methods were changed. We've made these changes as the previous names of the methods under question didn't reflect their functionality precisely, which could cause ambiguity or misunderstanding.

2) Since the release of the latest version of DHTMLX library some functionality has been removed. It was made as this functionality is no longer needed and therefore isn't supported.

3) Functionality moved from object to object

There were changes in the methods of layout components (Layout, Windows, Accordion, Tabbar). It concerns the methods that don't operate on the components in whole, but affect their cells (windows, tabs) directly.

Such methods have earlier been called through myAcc object and now they are called through myAcc.cells() object. Be careful, as the names of these methods are also changed to more logical ones.

Up to version 3.6 | From version 4.0
Function names changed
myAcc.loadJSON(data, callback) | myAcc.loadStruct(data, callback)
myAcc.loadXML(data, callback) | myAcc.loadStruct(data, callback)
myAcc.setSkinParameters(ofsBetween, ofsCont) | myAcc.setOffset(ofsBetween)
Functionality was removed
myAcc.setEffect(mode) | Since 4.0 effects are enabled for modern browsers by default
Functionality moved from object to object
myAcc.setIcon(id, icon) | myAcc.cells(id).setIcon(icon)
myAcc.clearIcon(id) | myAcc.cells(id).clearIcon()
myAcc.setActive(id) | myAcc.cells(id).open()
myAcc.isActive(id) | myAcc.cells(id).isOpened()
myAcc.openItem(id) | myAcc.cells(id).open()
myAcc.closeItem(id) | myAcc.cells(id).close()
myAcc.moveOnTop(id) | myAcc.cells(id).moveOnTop()
myAcc.setItemHeight(id,h) | myAcc.cells(id).setHeight(h)
myAcc.setText(id,text) | myAcc.cells(id).setText(text)
myAcc.getText(id) | myAcc.cells(id).getText()
myAcc.showItem(id) | myAcc.cells(id).show()
myAcc.hideItem(id) | myAcc.cells(id).hide()
myAcc.isItemHidden(id) | myAcc.cells(id).isVisible()
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Calendar DHTMLX Docs

Documentation
  • Calendar
    • dhtmlXCalendar API
    • dhtmlXDoubleCalendar API
    • How to Start with Calendar
    • Object Constructor
    • Setting Skins
    • Date Formatting
    • Localizing Calendar
    • Operating Calendar
    • Handling Events
Start

Calendar

dhtmlxCalendar is a component that can take the form either of a popup datepicker or a flat calendar. Being a smart datepicker solution for users' websites or applications, this component is really easy to use and fully customizable to fit everyone's needs. Complete JavaScript API is provided to help users to save time on configuring.

API reference
  • dhtmlXCalendar API
  • dhtmlXDoubleCalendar API
Related resources
  • You may download dhtmlxCalendar from dhtmlx.com
  • Check online samples for dhtmlxCalendar
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Creating and Configuring Calendar

  • How to Start with Calendar
  • Object Constructor
  • Setting Skins
  • Date Formatting
  • Localizing Calendar
 Covers the initialization of Calendar on a page and the ways of specifying such settings as skins, date format and localization.

Working with Calendar

  • Operating Calendar
  • Handling Events
 Includes the operations that can be performed with Calendar and available events.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXCalendar API DHTMLX Docs

Documentation
  • dhtmlXCalendar API
    • Methods
    • Events
    • Others
  • dhtmlXDoubleCalendar API
  • How to Start with Calendar
  • Object Constructor
  • Setting Skins
  • Date Formatting
  • Localizing Calendar
  • Operating Calendar
  • Handling Events
Start Calendar

dhtmlXCalendar API

Methods
attachEvent | adds any user-defined handler to available events
attachObj | attaches a calendar to an input field
clearInsensitiveDays | enables the dates disabled by the setInsensitiveDays method
clearSensitiveRange | enables the dates disabled by the setInsensitiveRange/setSensitiveRange
clearTooltip | removes the tooltip set by the setTooltip() method
close | hides calendar
detachEvent | detaches a handler from an event
detachObj | detaches the calendar from an input field
disableDays | disables certain dates of each week, month or year
draw | renders calendar
enableDays | enables the dates disabled by the disableDays method
enableIframe | enables iframe background for calendar
getCellDimension | returns dimension of the specified date cell
getDate | returns the currently selected date
getFormatedDate | returns formatted date as a string
getPopup | returns dhtmlXPopup instance which was initialized for tooltips
getWeekNumber | returns the week number of the specified date
hide | hides a calendar
hideTime | hides the time panel
hideToday | hides the Today and Clear buttons
hideWeekNumbers | hides a column with weeks numbers at the left side of the calendar
isVisible | returns true if calendar currenmly visible
loadUserLanguage | sets a new language interface for the calendar
setDate | makes the specified date selected
setDateFormat | sets the date format
setFormatedDate | sets date using specified date format
setHolidays | set dates as holidays
setInsensitiveDays | disables specified dates in the calendar
setInsensitiveRange | sets a range of inactive dates in the calendar
setMinutesInterval | sets a minutes interval in the time selector
setParent | sets a parent container for the calendar
setPosition | sets a calendar's position when it's attached to input
setSensitiveRange | sets a range of active dates in the calendar
setSkin | sets a skin for a calendar
setTooltip | sets a tooltip for the specified dates
setWeekStartDay | sets the starting day of weeks
setYearsRange | change years range in selector
show | shows a calendar
showMonth | makes the specified month/year as currently visible in the calendar
showTime | shows the time panel
showToday | shows the Today and Clear buttons
showWeekNumbers | adds a column with weeks numbers to the left side of the calendar
unload | destructor, unloads the calendar
Events
onArrowClick | fires when the user clicks on an arrow in the calendar's header
onBeforeChange | fires before the user clicks on a date in the calendar
onButtonClick | fires when the user clicks today or clear buttons
onChange | fires when the user changes a month, a year or time in the selector
onClick | fires when the user clicks on a date in a calendar
onHide | fires when a calendar becomes hidden (useful when attached to an input)
onMouseOut | fires when the user moves the mouse cursor out of the specified date
onMouseOver | fires when the user moves the mouse cursor over the specified date
onPopupHide | fires when a popup becomes hidden
onPopupShow | fires when a popup becomes visible
onShow | fires when the calendar becomes visible (useful when attached to an input)
onTimeChange | fires when the user changes time in the selector
Other
lang | define default language for all calendar instances
langData | here you can keep your custom calendar languages
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • attachEvent
    • attachObj
    • clearInsensitiveDays
    • clearSensitiveRange
    • clearTooltip
    • close
    • detachEvent
    • detachObj
    • disableDays
    • draw
    • enableDays
    • enableIframe
    • getCellDimension
    • getDate
    • getFormatedDate
    • getPopup
    • getWeekNumber
    • hide
    • hideTime
    • hideToday
    • hideWeekNumbers
    • isVisible
    • loadUserLanguage
    • setDate
    • setDateFormat
    • setFormatedDate
    • setHolidays
    • setInsensitiveDays
    • setInsensitiveRange
    • setMinutesInterval
    • setParent
    • setPosition
    • setSensitiveRange
    • setSkin
    • setTooltip
    • setWeekStartDay
    • setYearsRange
    • show
    • showMonth
    • showTime
    • showToday
    • showWeekNumbers
    • unload
  • Events
  • Others
Start Calendar dhtmlXCalendar API

Methods

attachEvent | adds any user-defined handler to available events
attachObj | attaches a calendar to an input field
clearInsensitiveDays | enables the dates disabled by the setInsensitiveDays method
clearSensitiveRange | enables the dates disabled by the setInsensitiveRange/setSensitiveRange
clearTooltip | removes the tooltip set by the setTooltip() method
close | hides calendar
detachEvent | detaches a handler from an event
detachObj | detaches the calendar from an input field
disableDays | disables certain dates of each week, month or year
draw | renders calendar
enableDays | enables the dates disabled by the disableDays method
enableIframe | enables iframe background for calendar
getCellDimension | returns dimension of the specified date cell
getDate | returns the currently selected date
getFormatedDate | returns formatted date as a string
getPopup | returns dhtmlXPopup instance which was initialized for tooltips
getWeekNumber | returns the week number of the specified date
hide | hides a calendar
hideTime | hides the time panel
hideToday | hides the Today and Clear buttons
hideWeekNumbers | hides a column with weeks numbers at the left side of the calendar
isVisible | returns true if calendar currenmly visible
loadUserLanguage | sets a new language interface for the calendar
setDate | makes the specified date selected
setDateFormat | sets the date format
setFormatedDate | sets date using specified date format
setHolidays | set dates as holidays
setInsensitiveDays | disables specified dates in the calendar
setInsensitiveRange | sets a range of inactive dates in the calendar
setMinutesInterval | sets a minutes interval in the time selector
setParent | sets a parent container for the calendar
setPosition | sets a calendar's position when it's attached to input
setSensitiveRange | sets a range of active dates in the calendar
setSkin | sets a skin for a calendar
setTooltip | sets a tooltip for the specified dates
setWeekStartDay | sets the starting day of weeks
setYearsRange | change years range in selector
show | shows a calendar
showMonth | makes the specified month/year as currently visible in the calendar
showTime | shows the time panel
showToday | shows the Today and Clear buttons
showWeekNumbers | adds a column with weeks numbers to the left side of the calendar
unload | destructor, unloads the calendar
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachObj DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

attachObj

attaches a calendar to an input field

string|number attachObj(string|number|HTMLElement input);

Parameters

input string|number|HTMLElement input id, input DOM element

Returns

string|number attachment id, you can use it for detachObj(id) later
Details

Any calendar instance can be attached to several inputs. You can do it using the following ways:

1) to pass the input id:

<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
var myCalendar = new dhtmlXCalendarObject(["input1","input2"]);
var objId = myCalendar.attachObj("input3");

2) to pass the input DOM element:

<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
var myCalendar = new dhtmlXCalendarObject(["input1","input2"]);
var inputObj = document.getElementById("input3");
myCalendar.attachObj(inputObj);

3) for an input with an icon:

<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
<img id="icon" src="calendar.gif" border="0">
var myCalendar = new dhtmlXCalendarObject(["input1", "input2"]);
myCalendar.attachObj({input: "input3", button: "icon"});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearInsensitiveDays DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

clearInsensitiveDays

enables the dates disabled by the setInsensitiveDays method

void clearInsensitiveDays();

Example

myCalendar.clearInsensitiveDays();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearSensitiveRange DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

clearSensitiveRange

enables the dates disabled by the setInsensitiveRange/setSensitiveRange

void clearSensitiveRange();

Example

myCalendar.clearSensitiveRange();

Details

if a date is set as a string, it should correspond to the format specified by the setDateFormat() method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearTooltip DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

clearTooltip

removes the tooltip set by the setTooltip() method

void clearTooltip(Date|string date);

Parameters

date Date|string the date you want to remove a tooltip from

Example

// set tooltip
myCalendar.setTooltip("2014-03-08", "International Women's Day");

// clear it later
myCalendar.clearTooltip("2014-03-08");

See also
  • API
    • setTooltip
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


close DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

close

hides calendar

void close();

Deprecated

from version 2.5

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachObj DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

detachObj

detaches the calendar from an input field

void detachObj(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement input id, input DOM element, id returned by attachObj()
Details

Possible ways of using this method are the following:

1) to pass the input id:

<input type="text" id="input1">
<input type="text" id="input2">
var myCalendar = new dhtmlXCalendarObject(["input1","input2"]);
myCalendar.detachObj("input2");

2) to pass the input DOM element:

<input type="text" id="input1">
<input type="text" id="input2">
var myCalendar = new dhtmlXCalendarObject(["input1","input2"]);
var inputObj = document.getElementById("input2");
myCalendar.detachObj(inputObj);

3) for an input with an icon:

<input type="text" id="input">
<img id="icon" src="calendar.gif" border="0">
var myCalendar = new dhtmlXCalendarObject({input: "input", button: "icon"});
myCalendar.detachObj({input: "input", button: "icon"});

4) to pass the id returned by the attachObj() method:

<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
var myCalendar = new dhtmlXCalendarObject(["input1","input2"]);
var objId = myCalendar.attachObj("input3");
myCalendar.detachObj(objId);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disableDays DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

disableDays

disables certain dates of each week, month or year

void disableDays(string mode,string|number|array date);

Parameters

mode | string | "week", "month", "year"
date | string|number|array | dates you want to make inactive
Details

1) week mode, 2nd param - numbers from 1 to 7, 1 relates to Monday, 7 - to Sunday

// disables every Monday of each week in the calendar
myCalendar.disableDays("week", 1);

// disables every Monday and Tuesday of each week in the calendar
myCalendar.disableDays("week", [1, 2]);

2) month mode, 2nd param - numbers from 1 to 31, appropriate day of the month

// disables 1st day of each month
myCalendar.disableDays("month", 1);

// disables 1st, 2nd, 5th, 6th and 19th day of each month
myCalendar.disableDays("month", [1, 2, 5, 6, 19]);

3) year mode, 2nd param - Date Object or string, year not affected on script logic

// disables the 1st of January of each year in the calendar
myCalendar.disableDays("year", "2011-01-01");

// disables the 1st and the 2nd of January of each year in the calendar
myCalendar.disableDays("year", ["2011-01-01", "2011-01-02"]);

if the date is set as a string, it should correspond to the format specified by the setDateFormat() method

See also
  • API
    • enableDays
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


draw DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

draw

renders calendar

void draw();

Deprecated

from version 2.5

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDays DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

enableDays

enables the dates disabled by the disableDays method

void enableDays(string mode);

Parameters

mode string "week", "month" or "year"

Example

// disables the 1st of January of each year in the calendar
myCalendar.disableDays("year", "2011-01-01");

// disables every Tuesday of each week in the calendar
myCalendar.disableDays("week", 2);

// enables the dates disabled in the "year" mode only,
// i.e. the 1st of January of each year
myCalendar.enableDays("year");

Details

if a date is set as a string, it should correspond to the format specified by the setDateFormat() method

See also
  • API
    • disableDays
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


enableIframe DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

enableIframe

enables iframe background for calendar

void enableIframe(boolean mode);

Parameters

mode boolean enable/disable

Example

function is_my_page_have_selects() {
    // your code here
    ...
    return true; // or false
}

if (navigator.userAgent.indexOf("MSIE 6.0") >= 0 && is_my_page_have_selects()) {
    myCalendar.enableIframe(true);
}

Details

Old versions of IE have issue with rendering DIV over SELECT, last one always on top. This can be fixed by putting IFRAME under DIV

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCellDimension DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

getCellDimension

returns dimension of the specified date cell

object getCellDimension(Date|string date);

Parameters

date Date|string Date object or string in the current date format

Returns

object cell dimension

Example

var dim = myCalendar.getCellDimension("2013-01-01");
console.log(dim);
// result:
{
    x: 100, // x-coord
    y: 100, // y-coord
    w: 27,  // width
    h: 24   // height
}

Details

if the cell is located out of the rendered month - dim is null

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getDate DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

getDate

returns the currently selected date

Date|string getDate(boolean isFormatted);

Parameters

isFormatted boolean if true - returns date as string in current date format

Returns

Date|string the selected date

Example

var d = myCalendar.getDate();
console.log(d); // {Fri Mar 01 2013 16:00:00 GMT+0300}

var d = myCalendar.getDate(true);
console.log(d); // "2013-03-01"

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFormatedDate DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

getFormatedDate

returns formatted date as a string

string getFormatedDate(string format,Date date);

Parameters

format | string | the date format (if omitted, the current date format is used)
date | Date | the date to apply the specified format to (if omitted, the current date is used)

Returns

string date of the corresponding format

Example

// for date which is currently selected
var d = myCalendar.getFormatedDate("%d/%m/%y");

// for today
var d = myCalendar.getFormatedDate("%d/%m/%y", new Date());

Details

See the available date formats

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getPopup DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

getPopup

returns dhtmlXPopup instance which was initialized for tooltips

dhtmlXPopup getPopup();

Returns

dhtmlXPopup dhtmlXPopup instance or null

Example

// we do not recommend using such constructions in your linear code
// popup is initialized after the user hovers over any
// date with attached tooltip at least once
var myPop = myCalendar.getPopup();

// the best way if you plan to attach "heavy" content like grid
// there's no need to specify the 2nd arg - text, only if "loading..."
var lastDate = null;
var myPop = null;
var myGrid = null;

myCalendar.setTooltip("2013-01-01", "Loading...", true, true);

myCalendar.attachEvent("onPopupShow", function(date){
    // inside of the event handler 'this' points to myCalendar

    // save popup date if a user will move mouse away while response goes to the server
    lastDate = this.getFormatedDate("%Y-%m-%d", date);

    // load heavy content from server
    window.dhx.ajax.get("server.php?date="+lastDate, function(r){
        // assuming that response was the following (in json format):
        {state: true, date: "2013-01-01", gridConf: {...} }

        // date param the same as was in request
        var t = null;
        try { eval("t="+r.xmlDoc.responseText); } catch(e){};
        if (t != null && lastDate != null && t.state == true && lastDate == t.date) {
            if (!myPop) myPop = myCalendar.getPopup(); // we need it once
            myGrid = myPop.attachGrid();
            myGrid.load(t.gridConf, "json"); // or something like
        }
    });
});

myCalendar.attachEvent("onPopupHide", function(){
    if (myGrid != null) {
        // unload the grid
        myPop.clear();
        myGrid = null;
    }
    // clear date, we will check it in the callback (above)
    // to make sure the popup is still visible
    lastDate = null;
});

// you can also skip grid reinit and just use grid.updateFromXML

Details

  • to be 100% sure that the popup is inited when you call getPopup(), we added onPopupShow event. It will fire every time the tooltip becomes visible. You can attach any content into it.

  • almost the same logic can be used to show popups over cells. But instead of tooltips and "onPopupShow" you can use onMouseOver/onMouseOut events, init popup manually and getCellDimension to determine the cell's x,y (where to show the popup).

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getWeekNumber DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

getWeekNumber

returns the week number of the specified date

number getWeekNumber(Date|string date);

Parameters

date Date|string the date you want to get the week number of

Returns

number week number

Example

var w = myCalendar.getWeekNumber(new Date(2013, 0, 1)); // w => 1

// or
myCalendar.setDateFormat("%Y-%m-%d");
var w = myCalendar.getWeekNumber("2013-01-11"); // t => 2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hide DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

hide

hides a calendar

void hide();

Example

myCalendar.hide();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideTime DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

hideTime

hides the time panel

void hideTime();

Example

myCalendar.hideTime();

See also
  • API
    • showTime
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


hideToday DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

hideToday

hides the Today and Clear buttons

void hideToday();

Example

myCalendar.hideToday();

See also
  • API
    • showToday
    • Change log

    added in version 4.6

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


hideWeekNumbers DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

hideWeekNumbers

hides a column with weeks numbers at the left side of the calendar

void hideWeekNumbers();

Example

myCalendar.hideWeekNumbers();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isVisible DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

isVisible

returns true if calendar currenmly visible

boolean isVisible();

Returns

boolean true/false

Example

var isVisible = myCalendar.isVisible();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadUserLanguage DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

loadUserLanguage

sets a new language interface for the calendar

void loadUserLanguage(string lang);

Parameters

lang string the name of a language

Example

// add once, make sure dhtmlxcalendar.js is loaded
dhtmlXCalendarObject.prototype.langData["de"] = {
    // date format for inputs
    dateformat: "%d.%m.%Y",
    // header format
    hdrformat: "%F %Y",
    // full names of months
    monthesFNames: [
        "Januar","Februar","März","April","Mai","Juni","Juli",
        "August","September","Oktober","November","Dezember"
    ],
    // short names of months
    monthesSNames: [
        "Jan","Feb","Mär","Apr","Mai","Jun",
        "Jul","Aug","Sep","Okt","Nov","Dez"
    ],
    // full names of days
    daysFNames: [
        "Sonntag","Montag","Dienstag","Mittwoch",
        "Donnerstag","Freitag","Samstag"
    ],
    // short names of days
    daysSNames: [
        "So","Mo","Di","Mi",
        "Do","Fr","Sa"
    ],
    // starting day of a week. Number from 1(Monday) to 7(Sunday)
    weekstart: 1,
    // the title of the week number column
    weekname: "w",
    // name of the "Today" button
    today: "Heute",
    // name of the "Clear" button
    clear: "Reinigen"
};

// init calendar
var myCalendar = new dhtmlXCalendarObject("input");
myCalendar.loadUserLanguage("de");

Details

To apply language settings once for all calendar instances, use (before init):

// make sure dhtmlxcalendar.js is loaded
dhtmlXCalendarObject.prototype.lang = "de";

Related sample: Custom language

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDate DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setDate

makes the specified date selected

void setDate(Date|string date);

Parameters

date Date|string the date you want to make selected

Example

myCalendar.setDate(new Date(2011,5,8));

// or
myCalendar.setDate("2011-06-08"); // assuming that date format is "%Y-%m-%d"

Details

the date should be defined either in the default date format ("%Y-%m-%d") or in the format that was indicated in the setDateFormat() method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDateFormat DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setDateFormat

sets the date format

void setDateFormat(string format);

Parameters

format string date format

Example

myCalendar.setDateFormat("%d/%m/%y");

Details

default date format is "%Y-%m-%d"

%d | day as a number with leading zero, 01..31
%j | day as a number, 1..31
%D | short name of the day, Su Mo Tu...
%l | full name of the day, Sunday Monday Tuesday...
%m | month as a number with leading zero, 01..12
%n | month as a number, 1..12
%M | short name of the month, Jan Feb Mar...
%F | full name of the month, January February March...
%y | year as a number, 2 digits
%Y | year as a number, 4 digits
%h | hours 12-format with leading zero, 01..12)
%g | hours 12-format, 1..12)
%H | hours 24-format with leading zero, 01..24
%G | hours 24-format, 1..24
%i | minutes with leading zero, 01..59
%s | seconds with leading zero, 01..59
%a | am or pm
%A | AM or PM
%% | escape for %
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setFormatedDate DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setFormatedDate

sets date using specified date format

void setFormatedDate(string format,string date);

Parameters

format | string | the date format (if omitted, the currently set date format will be used)
date | string | the date in the format specified by the first parameter

Example

// selects the 3rd June 2011
myCalendar.setFormatedDate("%d/%m/%Y", "03/06/2011");

Details

date formats

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setHolidays DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setHolidays

set dates as holidays

void setHolidays(Date|string|array date);

Parameters

date Date|string|array dates you want to set as holidays, if null - clears all holidays

Example

// sets September 25, 2011 as a holiday
myCalendar.setHolidays("2011-09-25");

// sets a single holiday
myCalendar.setHolidays("2011-06-01");

// or
myCalendar.setHolidays(new Date(2011,5,1));

// sets several holidays
myCalendar.setHolidays(["2011-06-01,2011-06-02,2011-06-03"]);

// or
myCalendar.setHolidays(["2011-06-01","2011-06-02,2011-06-03"]);

// or
myCalendar.setHolidays(["2011-06-01","2011-06-02","2011-06-03"]);

// or
myCalendar.setHolidays([new Date(2011,5,1),"2011-06-02,2011-06-03"]);

// clears all holidays
myCalendar.setHolidays(null);

Details

i.e. you can pass single date or array with dates as a param, each single date can be 2+ dates comma-separated, date object also allowed.

If the date is set as a string, it should correspond to the format specified by the setDateFormat() method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setInsensitiveDays DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setInsensitiveDays

disables specified dates in the calendar

void setInsensitiveDays(Date|string|array date);

Parameters

date Date|string|array dates you want to set as inactive

Example

// disables a single day
myCalendar.setInsensitiveDays("2011-06-01");

// or
myCalendar.setInsensitiveDays(new Date(2011,5,1));

// disables several days
myCalendar.setInsensitiveDays(["2011-06-01,2011-06-02,2011-06-03"]);

// or
myCalendar.setInsensitiveDays(["2011-06-01","2011-06-02","2011-06-03"]);

// or
myCalendar.setInsensitiveDays([new Date(2011,5,1), new Date(2011,5,2)]);

// July-10-2011, July-11-2011, July-17-2011, July-18-2011 will be dimmed
myCalendar.setInsensitiveDays(["2011-07-10","2011-07-11","2011-07-17","2011-07-18"]);

Details

If the date is set as a string, it should correspond to the format specified by the setDateFormat() method.

To optimize the work of the calendar in case you have several dates, we recommend you to call the method once and pass the whole array into it, instead of calling the method for each element of the array.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setInsensitiveRange DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setInsensitiveRange

sets a range of inactive dates in the calendar

void setInsensitiveRange(Date|string from,Date|string to);

Parameters

from | Date|string | limits the start date of the range to a particular date (in order not to limit the start date of the range, pass null)
to | Date|string | limits the end date of the range to a particular date (in order not to limit the end date of the range, pass null)
Details

Usage

// sets a range of inactive dates (inclusive)
myCalendar.setInsensitiveRange(from, to);

// sets a range of inactive dates from the specified date (inclusive)
myCalendar.setInsensitiveRange(from, null);

// sets a range of inactive dates before the specified date (inclusive)
myCalendar.setInsensitiveRange(null, to);

Examples

// all dates starting from July 08, 2011 will be dimmed
myCalendar.setInsensitiveRange("2011-07-08", null);

// the 1st of June 2011, the 2nd of June 2011 and the 3rd of June 2011 will be dimmed
myCalendar.setInsensitiveRange("2011-06-01", "2011-06-03");

// all dates until the 1st of June, 2011 (inclusive) will be dimmed
myCalendar.setInsensitiveRange(null, "2011-06-01");

If the date is set as a string, it should correspond to the format specified by the setDateFormat() method

See also
  • API
    • setSensitiveRange
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setMinutesInterval DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setMinutesInterval

sets a minutes interval in the time selector

void setMinutesInterval(number interval);

Parameters

interval number the time interval in minutes, possible values: 1, 5, 10, 15

Example

// sets a 10-minute interval
myCalendar.setMinutesInterval(10);

Details

1 - will give you ability to enter any minute from 01..59
5 - shows 00, 05, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55
10 - shows 00, 10, 20, 30, 40, 50
15 - shows 00, 15, 30, 45

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setParent DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setParent

sets a parent container for the calendar

void setParent(string|number|HTMLElement container);

Parameters

container string|number|HTMLElement object id or object DOM element
Details

<div id="box" style="height:300px; position:relative;"></div>
<div id="box2" style="height:300px; position:relative;"></div>
var myCalendar = new dhtmlXCalendarObject("box");
myCalendar.show();
// change parent
myCalendar.setParent("box2");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setPosition DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setPosition

sets a calendar's position when it's attached to input

void setPosition(string pos);

Parameters

pos string the position of a calendar when it's attached to input

Example

myCalendar.setPosition("right"); // "bottom"

Details

when a calendar is attached to a custom parent, you can pass x and y coordinates directly

// sets left and top offsets of a calendar
myCalendar.setPosition(10, 20);

// sets just left offset of a calendar
myCalendar.setPosition(10);

// sets just top offset of a calendar
myCalendar.setPosition(null, 20);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSensitiveRange DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setSensitiveRange

sets a range of active dates in the calendar

void setSensitiveRange(Date|string from,Date|string to);

Parameters

from | Date|string | limits the start date of the range to a particular date (in order not to limit the start date of the range, pass null)
to | Date|string | limits the end date of the range to a particular date (in order not to limit the end date of the range, pass null)
Details

Usage

// sets a range of active dates from the specified date (inclusive)
myCalendar.setSensitiveRange(from, null);

// sets a range of active dates before the specified date (inclusive)
myCalendar.setInsensitiveRange(null, to);

// sets a range of active dates (inclusive)
myCalendar.setSensitiveRange(from, to);

// sets a range of active dates out of the specified dates
myCalendar.setInsensitiveRange(until, from);

Examples

// all dates starting from July 08, 2011 will be sensitive
myCalendar.setSensitiveRange("2011-07-08", null);

// June 1, 2011, June 2, 2011 and June 3, 2011 will be sensitive
myCalendar.setSensitiveRange("2011-06-01", "2011-06-03");

// all dates until the 1st of June, 2011 (inclusive) will be sensitive
myCalendar.setSensitiveRange(null, "2011-06-01");

If the date is set as a string, it should correspond to the format specified by the setDateFormat() method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setSkin

sets a skin for a calendar

void setSkin(string skin);

Parameters

skin string "dhx_skyblue", "dhx_web", "dhx_terrace"

Example

myCalendar.setSkin("dhx_terrace");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setTooltip DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setTooltip

sets a tooltip for the specified dates

void setTooltip(Date|string|array date,string text,boolean showIcon,boolean usePopup);

Parameters

date | Date|string|array | dates you want to set the tooltip for
text | string | tooltip text
showIcon | boolean | true to show an icon in the top-right corner of the cell
usePopup | boolean | true to use dhtmlXPopup

Example

// single date
myCalendar.setTooltip(new Date(2013,01,04), "some text");

// or
myCalendar.setTooltip("2011-06-01", "some text");

// sets several days
myCalendar.setTooltip(["2011-06-01", "2011-06-02"], "some text");

// or
myCalendar.setTooltip([new Date(2011,5,1), new Date(2011,5,2)], "some text");

// with icon
myCalendar.setTooltip("2011-06-01", "some text", true);

// use popup
myCalendar.setTooltip("2011-06-01", "some text", true, true);

See also
  • API
    • clearTooltip
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setWeekStartDay DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setWeekStartDay

sets the starting day of weeks

void setWeekStartDay(number day);

Parameters

day number 1 - for Monday, ..., 7 - for Sunday

Example

// weeks start with Monday
myCalendar.setWeekStartDay(1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setYearsRange

change years range in selector

void setYearsRange();

Deprecated

from version 2.5

l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-5M5RCSJ');
Samples Forum Support
Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

setYearsRange

change years range in selector

void setYearsRange();

Deprecated

from version 2.5

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show

shows a calendar

void show( [string id] );

Parameters

id string the id of the HTML input a calendar is attached to

Example

<input type="text" id="cal_2">

myCalendar.show("cal_2");

See also
  • Articles
    • Operating Calendar
    • attachEvent
    • attachObj
    • clearInsensitiveDays
    • clearSensitiveRange
    • clearTooltip
    • close
    • detachEvent
    • detachObj
    • disableDays
    • draw
    • enableDays
    • enableIframe
    • getCellDimension
    • getDate
    • getFormatedDate
    • getPopup
    • getWeekNumber
    • hide
    • hideTime
    • hideToday
    • hideWeekNumbers
    • isVisible
    • loadUserLanguage
    • setDate
    • setDateFormat
    • setFormatedDate
    • setHolidays
    • setInsensitiveDays
    • setInsensitiveRange
    • setMinutesInterval
    • setParent
    • setPosition
    • setSensitiveRange
    • setSkin
    • setTooltip
    • setWeekStartDay
    • setYearsRange
    • show
    • showMonth
    • showTime
    • showToday
    • showWeekNumbers
    • unload
    Start Calendar dhtmlXCalendar API Methods

    show

    shows a calendar

    void show( [string id] );

    Parameters

    id string the id of the HTML input a calendar is attached to

    Example

    <input type="text" id="cal_2">

myCalendar.show("cal_2");

    See also
  • Articles
    • Operating Calendar
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


showMonth DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

showMonth

makes the specified month/year as currently visible in the calendar

void showMonth(Date|string date);

Parameters

date Date|string month/year you want to show

Example

// shows June, 2011
myCalendar.showMonth(new Date(2011,5,1));

// or shows January, 2013
myCalendar.showMonth("2013-01-01");

Details

if you want always show your custom month/year ignoring the selected date (when a calendar is attached to an input or a form) - the onShow event will be useful

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showTime DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

showTime

shows the time panel

void showTime();

Example

myCalendar.showTime();

See also
  • API
    • hideTime
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


showToday DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

showToday

shows the Today and Clear buttons

void showToday();

Example

myCalendar.showToday();

Details

The buttons are hidden by default

See also
  • API
    • hideToday
    • Change log

    added in version 4.6

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


showWeekNumbers DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

showWeekNumbers

adds a column with weeks numbers to the left side of the calendar

void showWeekNumbers();

Example

myCalendar.showWeekNumbers();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • attachEvent
  • attachObj
  • clearInsensitiveDays
  • clearSensitiveRange
  • clearTooltip
  • close
  • detachEvent
  • detachObj
  • disableDays
  • draw
  • enableDays
  • enableIframe
  • getCellDimension
  • getDate
  • getFormatedDate
  • getPopup
  • getWeekNumber
  • hide
  • hideTime
  • hideToday
  • hideWeekNumbers
  • isVisible
  • loadUserLanguage
  • setDate
  • setDateFormat
  • setFormatedDate
  • setHolidays
  • setInsensitiveDays
  • setInsensitiveRange
  • setMinutesInterval
  • setParent
  • setPosition
  • setSensitiveRange
  • setSkin
  • setTooltip
  • setWeekStartDay
  • setYearsRange
  • show
  • showMonth
  • showTime
  • showToday
  • showWeekNumbers
  • unload
Start Calendar dhtmlXCalendar API Methods

unload

destructor, unloads the calendar

void unload();

Example

myCalendar.unload();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onArrowClick
    • onBeforeChange
    • onButtonClick
    • onChange
    • onClick
    • onHide
    • onMouseOut
    • onMouseOver
    • onPopupHide
    • onPopupShow
    • onShow
    • onTimeChange
  • Others
Start Calendar dhtmlXCalendar API

Events

onArrowClick | fires when the user clicks on an arrow in the calendar's header
onBeforeChange | fires before the user clicks on a date in the calendar
onButtonClick | fires when the user clicks today or clear buttons
onChange | fires when the user changes a month, a year or time in the selector
onClick | fires when the user clicks on a date in a calendar
onHide | fires when a calendar becomes hidden (useful when attached to an input)
onMouseOut | fires when the user moves the mouse cursor out of the specified date
onMouseOver | fires when the user moves the mouse cursor over the specified date
onPopupHide | fires when a popup becomes hidden
onPopupShow | fires when a popup becomes visible
onShow | fires when the calendar becomes visible (useful when attached to an input)
onTimeChange | fires when the user changes time in the selector
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onArrowClick DHTMLX Docs

Documentation
  • onArrowClick
  • onBeforeChange
  • onButtonClick
  • onChange
  • onClick
  • onHide
  • onMouseOut
  • onMouseOver
  • onPopupHide
  • onPopupShow
  • onShow
  • onTimeChange
Start Calendar dhtmlXCalendar API Events

onArrowClick

fires when the user clicks on an arrow in the calendar's header

void onArrowClick(Date date,Date nextdate){ ... };

Parameters

date | Date | initially selected month
nextdate | Date | newly selected month

Example

myCalendar.attachEvent("onArrowClick", function(date, nextdate){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeChange DHTMLX Docs

Documentation
  • onArrowClick
  • onBeforeChange
  • onButtonClick
  • onChange
  • onClick
  • onHide
  • onMouseOut
  • onMouseOver
  • onPopupHide
  • onPopupShow
  • onShow
  • onTimeChange
Start Calendar dhtmlXCalendar API Events

onBeforeChange

fires before the user clicks on a date in the calendar

void onBeforeChange(Date date){ ... };

Parameters

date Date clicked date

Example

myCalendar.attachEvent("onBeforeChange", function(date){
    // your code here
    return true; // allow selection
});

Details

if the handler function returns false, a user won't be allowed to change the date in the calendar, i.e. the current date will be selected all the time

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onButtonClick DHTMLX Docs

Documentation
  • onArrowClick
  • onBeforeChange
  • onButtonClick
  • onChange
  • onClick
  • onHide
  • onMouseOut
  • onMouseOver
  • onPopupHide
  • onPopupShow
  • onShow
  • onTimeChange
Start Calendar dhtmlXCalendar API Events

onButtonClick

fires when the user clicks the Today or Clear buttons

void onButtonClick(Date date){ ... };

Parameters

date Date the selected date (for the Today button) or NULL (for the Clear button)

Example

myCalendar.attachEvent("onButtonClick", function(date){
    if (date == null) {
        // clear button
    } else {
        // today button
    }
    // hide calendar if needed
    this.hide();
});

Change log

added in 4.6.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onChange DHTMLX Docs

Documentation
  • onArrowClick
  • onBeforeChange
  • onButtonClick
  • onChange
  • onClick
  • onHide
  • onMouseOut
  • onMouseOver
  • onPopupHide
  • onPopupShow
  • onShow
  • onTimeChange
Start Calendar dhtmlXCalendar API Events

onChange

fires when the user changes a month, a year or time in the selector

void onChange(Date date,boolean state){ ... };

Parameters

date | Date | the selected date
state | boolean | true if date is changed manually in input

Example

myCalendar.attachEvent("onChange", function(date, state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClick DHTMLX Docs

Documentation
  • onArrowClick
  • onBeforeChange
  • onButtonClick
  • onChange
  • onClick
  • onHide
  • onMouseOut
  • onMouseOver
  • onPopupHide
  • onPopupShow
  • onShow
  • onTimeChange
Start Calendar dhtmlXCalendar API Events

onClick

fires when the user clicks on a date in a calendar

void onClick(Date date){ ... };

Parameters

date Date clicked date

Example

myCalendar.attachEvent("onClick", function(date){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onHide DHTMLX Docs

Documentation
  • onArrowClick
  • onBeforeChange
  • onButtonClick
  • onChange
  • onClick
  • onHide
  • onMouseOut
  • onMouseOver
  • onPopupHide
  • onPopupShow
  • onShow
  • onTimeChange
Start Calendar dhtmlXCalendar API Events

onHide

fires when a calendar becomes hidden (useful when attached to an input)

void onHide(){ ... };

Example

myCalendar.attachEvent("onHide", function(){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseOut DHTMLX Docs

Documentation
  • onArrowClick
  • onBeforeChange
  • onButtonClick
  • onChange
  • onClick
  • onHide
  • onMouseOut
  • onMouseOver
  • onPopupHide
  • onPopupShow
  • onShow
  • onTimeChange
Start Calendar dhtmlXCalendar API Events

onMouseOut

fires when the user moves the mouse cursor out of the specified date

void onMouseOut(Date date,Event e){ ... };

Parameters

date | Date | the specified date
e | Event | a native event object

Example

myCalendar.attachEvent("onMouseOut", function(date, e){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseOver DHTMLX Docs

Documentation
  • onArrowClick
  • onBeforeChange
  • onButtonClick
  • onChange
  • onClick
  • onHide
  • onMouseOut
  • onMouseOver
  • onPopupHide
  • onPopupShow
  • onShow
  • onTimeChange
Start Calendar dhtmlXCalendar API Events

onMouseOver

fires when the user moves the mouse cursor over the specified date

void onMouseOver(Date date,Event e){ ... };

Parameters

date | Date | the specified date
e | Event | a native event object

Example

myCalendar.attachEvent("onMouseOver", function(date, e){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onPopupHide DHTMLX Docs

Documentation
  • onArrowClick
  • onBeforeChange
  • onButtonClick
  • onChange
  • onClick
  • onHide
  • onMouseOut
  • onMouseOver
  • onPopupHide
  • onPopupShow
  • onShow
  • onTimeChange
Start Calendar dhtmlXCalendar API Events

onPopupHide

fires when a popup becomes hidden

void onPopupHide(Date date){ ... };

Parameters

date Date the date of a cell with a tooltip

Example

myCalendar.attachEvent("onPopupHide", function(date){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onPopupShow DHTMLX Docs

Documentation
  • onArrowClick
  • onBeforeChange
  • onButtonClick
  • onChange
  • onClick
  • onHide
  • onMouseOut
  • onMouseOver
  • onPopupHide
  • onPopupShow
  • onShow
  • onTimeChange
Start Calendar dhtmlXCalendar API Events

onPopupShow

fires when a popup becomes visible

void onPopupShow(Date date){ ... };

Parameters

date Date the date of a cell with a tooltip

Example

myCalendar.attachEvent("onPopupShow", function(date){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onShow DHTMLX Docs

Documentation
  • onArrowClick
  • onBeforeChange
  • onButtonClick
  • onChange
  • onClick
  • onHide
  • onMouseOut
  • onMouseOver
  • onPopupHide
  • onPopupShow
  • onShow
  • onTimeChange
Start Calendar dhtmlXCalendar API Events

onShow

fires when the calendar becomes visible (useful when attached to an input)

void onShow(){ ... };

Example

myCalendar.attachEvent("onShow", function(){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onTimeChange DHTMLX Docs

Documentation
  • onArrowClick
  • onBeforeChange
  • onButtonClick
  • onChange
  • onClick
  • onHide
  • onMouseOut
  • onMouseOver
  • onPopupHide
  • onPopupShow
  • onShow
  • onTimeChange
Start Calendar dhtmlXCalendar API Events

onTimeChange

fires when the user changes time in the selector

void onTimeChange(Date date){ ... };

Parameters

date Date the selected date

Example

myCalendar.attachEvent("onTimeChange", function(date){
    // your code here
    var newHours = date.getHours();
    var newMinutes = date.getMinutes();
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • lang
    • langData
Start Calendar dhtmlXCalendar API

Others

lang | define default language for all calendar instances
langData | here you can keep your custom calendar languages
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


lang DHTMLX Docs

Documentation
  • lang
  • langData
Start Calendar dhtmlXCalendar API Others

lang

define default language for all calendar instances

string lang;

Example

// way 1

// add settings for custom language
dhtmlXCalendarObject.prototype.langData["de"] = {
    ...
];

// init calendar
var myCalendar = new dhtmlXCalendar(...);

// apply language settings
myCalendar.loadUserLanguage("de");

// way 2

// to set default language for all calendar instances
// you can simply change lang prop once, before init
// i.e.

// add settings for custom language
dhtmlXCalendarObject.prototype.langData["de"] = {
    ...
};

// make custom language default
dhtmlXCalendarObject.prototype.lang = "de";

// init calendar
var myCalendar = new dhtmlXCalendar(...); // this instance will inited with "de" language

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


langData DHTMLX Docs

Documentation
  • lang
  • langData
Start Calendar dhtmlXCalendar API Others

langData

here you can keep your custom calendar languages

object langData;

Example

dhtmlXCalendarObject.prototype.langData["de"] = {
    dateformat: "%d.%m.%Y",
    monthesFNames: [
        "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli",
        "August", "September", "Oktober", "November", "Dezember"
    ],
    monthesSNames: [
        "Jan", "Feb", "Mär", "Apr", "Mai", "Jun",
        "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"
    ],
    daysFNames: [
        "Sonntag", "Montag", "Dienstag", "Mittwoch",
        "Donnerstag", "Freitag", "Samstag"
    ],
    daysSNames: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
    weekstart: 1,
    weekname: "w"
};

// init calendar
var myCalendar = new dhtmlXCalendarObject();

// apply language settings
myCalendar.loadUserLanguage("de");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXDoubleCalendar API DHTMLX Docs

Documentation
  • dhtmlXCalendar API
  • dhtmlXDoubleCalendar API
    • Methods
    • Events
    • Others
  • How to Start with Calendar
  • Object Constructor
  • Setting Skins
  • Date Formatting
  • Localizing Calendar
  • Operating Calendar
  • Handling Events
Start Calendar

dhtmlXDoubleCalendar API

Methods
attachEvent | adds any user-defined handler to available events
detachEvent | detaches a handler from an event
getFormatedDate | returns formatted date as a string
hide | hides a double calendar
setDateFormat | sets the date format
setDates | makes the specified dates selected
show | shows a double calendar
unload | destructor, unloads a double calendar
Events
onBeforeChange | fires before the user clicks on a date in one of the calendar instances
onClick | fires when the user clicks on a date in one of the calendar instances
Other
leftCalendar | left-side calendar instance
rightCalendar | right-side calendar instance
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • attachEvent
    • detachEvent
    • getFormatedDate
    • hide
    • setDateFormat
    • setDates
    • show
    • unload
  • Events
  • Others
Start Calendar dhtmlXDoubleCalendar API

Methods

attachEvent | adds any user-defined handler to available events
detachEvent | detaches a handler from an event
getFormatedDate | returns formatted date as a string
hide | hides a double calendar
setDateFormat | sets the date format
setDates | makes the specified dates selected
show | shows a double calendar
unload | destructor, unloads a double calendar
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • getFormatedDate
  • hide
  • setDateFormat
  • setDates
  • show
  • unload
Start Calendar dhtmlXDoubleCalendar API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • getFormatedDate
  • hide
  • setDateFormat
  • setDates
  • show
  • unload
Start Calendar dhtmlXDoubleCalendar API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFormatedDate DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • getFormatedDate
  • hide
  • setDateFormat
  • setDates
  • show
  • unload
Start Calendar dhtmlXDoubleCalendar API Methods

getFormatedDate

returns formatted date as a string

string getFormatedDate(string format,Date|string date);

Parameters

format | string | the date format (if omitted, the currently set date format is used)
date | Date|string | the date to apply the specified format to (if omitted, the currently selected date is used)

Returns

string date in the set format

Example

//a date selected in the calendar
var d = myCalendar.getFormatedDate("%d/%m/%y");
or
//for today
var d = myCalendar.getFormatedDate("%d/%m/%y", new Date());

Details

See the available date formats

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hide DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • getFormatedDate
  • hide
  • setDateFormat
  • setDates
  • show
  • unload
Start Calendar dhtmlXDoubleCalendar API Methods

hide

hides a double calendar

void hide();

Example

myCalendar.hide();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDateFormat DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • getFormatedDate
  • hide
  • setDateFormat
  • setDates
  • show
  • unload
Start Calendar dhtmlXDoubleCalendar API Methods

setDateFormat

sets the date format

void setDateFormat(string format);

Parameters

format string date format

Example

myCalendar.setDateFormat("%d/%m/%y");

Details

See the available date formats

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDates DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • getFormatedDate
  • hide
  • setDateFormat
  • setDates
  • show
  • unload
Start Calendar dhtmlXDoubleCalendar API Methods

setDates

makes the specified dates selected

void setDates(Date|string dateLeft,Date|string dateRight);

Parameters

dateLeft | Date|string | date for the left calendar instance
dateRight | Date|string | date for the right calendar instance

Example

// using date object
myCalendar.setDates(new Date(2011,5,8),new Date(2011,6,10));

// using string
// assuming that date format is "%Y-%m-%d"
myCalendar.setDate("2011-06-08","2011-07-10");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • getFormatedDate
  • hide
  • setDateFormat
  • setDates
  • show
  • unload
Start Calendar dhtmlXDoubleCalendar API Methods

show

shows a double calendar

void show();

Example

myCalendar.show();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • getFormatedDate
  • hide
  • setDateFormat
  • setDates
  • show
  • unload
Start Calendar dhtmlXDoubleCalendar API Methods

unload

destructor, unloads a double calendar

void unload();

Example

myCalendar.unload();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onBeforeChange
    • onClick
  • Others
Start Calendar dhtmlXDoubleCalendar API

Events

onBeforeChange | fires before the user clicks on a date in one of the calendar instances
onClick | fires when the user clicks on a date in one of the calendar instances
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeChange DHTMLX Docs

Documentation
  • onBeforeChange
  • onClick
Start Calendar dhtmlXDoubleCalendar API Events

onBeforeChange

fires before the user clicks on a date in one of the calendar instances

void onBeforeChange(string side,Date date){ ... };

Parameters

side | string | "left" or "right"
date | Date | clicked date

Example

myCalendar.attachEvent("onBeforeChange",function(side, date){
    // your code here
    return true; // allow selection
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClick DHTMLX Docs

Documentation
  • onBeforeChange
  • onClick
Start Calendar dhtmlXDoubleCalendar API Events

onClick

fires when the user clicks on a date in one of the calendar instances

void onClick(string side,Date date){ ... };

Parameters

side | string | "left" or "right"
date | Date | clicked date

Example

myCalendar.attachEvent("onClick", function(side, date){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • leftCalendar
    • rightCalendar
Start Calendar dhtmlXDoubleCalendar API

Others

leftCalendar | left-side calendar instance
rightCalendar | right-side calendar instance
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


leftCalendar DHTMLX Docs

Documentation
  • leftCalendar
  • rightCalendar
Start Calendar dhtmlXDoubleCalendar API Others

leftCalendar

left-side calendar instance

dhtmlXCalendarObject leftCalendar;

Example

var myDoubleCalendar = new dhtmlXDoubleCalendar("parentId");

myDoubleCalendar.leftCalendar.setDate("2014-01-10");
myDoubleCalendar.rightCalendar.setDate("2014-01-20");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


rightCalendar DHTMLX Docs

Documentation
  • leftCalendar
  • rightCalendar
Start Calendar dhtmlXDoubleCalendar API Others

rightCalendar

right-side calendar instance

dhtmlXCalendarObject rightCalendar;

Example

var myDoubleCalendar = new dhtmlXDoubleCalendar("parentId");

myDoubleCalendar.leftCalendar.setDate("2014-01-10");
myDoubleCalendar.rightCalendar.setDate("2014-01-20");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


How to Start with Calendar DHTMLX Docs

Documentation
  • dhtmlXCalendar API
  • dhtmlXDoubleCalendar API
  • How to Start with Calendar
    • Including necessary files
    • Initializing Calendar
  • Object Constructor
  • Setting Skins
  • Date Formatting
  • Localizing Calendar
  • Operating Calendar
  • Handling Events
Start Calendar

How to Start with Calendar

To use dhtmlxCalendar in your application you should make 3 steps:

  1. Download the 'dhtmlxCalendar' or 'dhtmlxSuite' package and unpack it into a folder.
  2. Include the related CSS and JS files into your HTML file .
  3. Call an object constructor.

Including necessary files

Each DHTMLX component can be used standalone or as a part of the general library.

If you use dhtmlxCalendar standalone you need to include 2 files:

  • dhtmlxcalendar.js
  • dhtmlxcalendar.css
<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" href="../codebase/dhtmlxcalendar.css">
        <script src="../codebase/dhtmlxcalendar.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

If you use dhtmlxCalendar as a part of 'dhtmlxSuite' package you need to include 2 files:

  • dhtmlx.js
  • dhtmlx.css
<link type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Initializing Calendar

There are 6 ways to initialize dhtmlxCalendar on the page:

Initialization in a div

<div id="box" style="position:relative;height:250px;"></div>

<script>
var myCalendar = new dhtmlXCalendarObject("box");
myCalendar.show();
</script>

Attaching to an input

<input type="text" id="calendar">
<input type="text" id="calendar2">

<script>
var myCalendar = new dhtmlXCalendarObject(["calendar","calendar2"]);
</script>

Attaching to an input with an icon

<input type="text" id="calendar_input">
<span>
    <img id="calendar_icon" src="../common/calendar.gif" border="0">
</span>

<script>
var myCalendar = new dhtmlXCalendarObject(
    {input:"calendar_input",button:"calendar_icon"}
);
</script>

Attaching to a custom icon

<span>
    <img id="calendar_icon" src="../common/calendar.gif" border="0">
</span>
<span id="date_here">&nbsp;</span>

<script>
var myCalendar = new dhtmlXCalendarObject({button: "calendar_icon"});
</script>

Using inside dhtmlxForm

formData = [
    {type:"calendar",label:"Start Date",skin:"dhx_skyblue", enableTime:true,
      dateFormat:"%Y-%m-%d %H:%i"},
    {type:"calendar", label:"End Date", skin:"dhx_skyblue", dateFormat:"%Y-%m-%d"}
];
myForm = new dhtmlXForm("myForm", formData);

Using inside dhtmlxToolbar

myToolbar = new dhtmlXToolbarObject("toolbarObj");
myToolbar.loadStruct("../common/dhxtoolbar_data.xml", function(){
  myToolbar.addInput("calendar", null, "12.06.2013", 90);
  myCalendar = new dhtmlXCalendarObject(myToolbar.getInput("calendar"));
  myCalendar.setDateFormat("%d.%m.%Y");
});

Double calendar

<div id="box" style="position:relative;height:250px;"></div>

<script>
var myCalendar = new dhtmlXDoubleCalendar("box");
var myCalendar.show();
</script>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • dhtmlXCalendar API
  • dhtmlXDoubleCalendar API
  • How to Start with Calendar
  • Object Constructor
  • Setting Skins
  • Date Formatting
  • Localizing Calendar
  • Operating Calendar
  • Handling Events
Start Calendar

Object Constructor

There are several ways of Calendar initialization on a page. The most common of them are presented below:

  • initializing in an HTML container
<div id="box" style="position:relative;height:250px;"></div>

<script>
var myCalendar = new dhtmlXCalendarObject("box");
myCalendar.show();
</script>
  • attaching calendar to an input
<input type="text" id="calendar">
<input type="text" id="calendar2">

<script>
var myCalendar = new dhtmlXCalendarObject(["calendar","calendar2"]);
</script>
  • using calendar inside of Form
formData = [
    {type:"calendar", label:"Start Date", skin:"dhx_skyblue", enableTime:true,
        dateFormat:"%Y-%m-%d %H:%i"},
    {type:"calendar", label: "End Date",  skin:"dhx_skyblue",
        dateFormat: "%Y-%m-%d"}
];
myForm = new dhtmlXForm("myForm", formData);

To learn about other ways of initialization and get more detailed information, read the chapter "Initialization".

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Setting Skins DHTMLX Docs

Documentation
  • dhtmlXCalendar API
  • dhtmlXDoubleCalendar API
  • How to Start with Calendar
  • Object Constructor
  • Setting Skins
  • Date Formatting
  • Localizing Calendar
  • Operating Calendar
  • Handling Events
Start Calendar

Setting Skins

You can set one of the predefined skins by using the method setSkin():

myCalendar.setSkin("dhx_web");

"material"

"dhx_skyblue"

"dhx_web"

"dhx_terrace"

The following order is used to determine the skin on load:

  1. the skin parameter of the dhtmlXCalendarObject object constructor
  2. the dhtmlx.skin property
  3. the form/toolbar skin (if the calendar is attached to a form or toolbar)
  4. dhtmlxCalendar tries to detect the skin automatically (each skin css file has a corresponding record to help to detect the skin)
  5. the default "material" skin is used

For example, if you include on the page the only css file - "dhtmlxcalendar_dhx_terrace" - and instantiate dhtmlxCalendar without specifying the skin parameter, then the "dhx_terrace" skin will be detected automatically.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Date Formatting DHTMLX Docs

Documentation
  • dhtmlXCalendar API
  • dhtmlXDoubleCalendar API
  • How to Start with Calendar
  • Object Constructor
  • Setting Skins
  • Date Formatting
  • Localizing Calendar
  • Operating Calendar
  • Handling Events
Start Calendar

Date Formatting

You can use the default date format of calendar or set your own one.
The default date format in dhtmlxCalendar is '%Y-%m-%d'.

  • A custom date format for the whole Calendar can be set with the help of the "setDateFormat" method (see details):
    myCalendar.setDateFormat("%d.%m.%Y");
  • To get date as string in the specified format you should use the "getFormatedDate()" method (see details):
    //will return the date selected in calendar
myCalendar.getFormatedDate("%d.%m.%Y");
//will return any date defined in 2nd param
myCalendar.getFormatedDate("%d.%m.%Y", new Date());

While specifying the format for dates you can use any character from the following list:

%d | day as a number with leading zero, 01..31
%j | day as a number, 1..31
%D | short name of the day, Su Mo Tu...
%l | full name of the day, Sunday Monday Tuesday...
%m | month as a number with leading zero, 01..12
%n | month as a number, 1..12
%M | short name of the month, Jan Feb Mar...
%F | full name of the month, January February March...
%y | year as a number, 2 digits
%Y | year as a number, 4 digits
%h | hours 12-format with leading zero, 01..12)
%g | hours 12-format, 1..12)
%H | hours 24-format with leading zero, 01..24
%G | hours 24-format, 1..24
%i | minutes with leading zero, 01..59
%s | seconds with leading zero, 01..59
%a | am or pm
%A | AM or PM
%% | escape for %
%u | milliseconds
%P | timezone offset
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Localizing Calendar DHTMLX Docs

Documentation
  • dhtmlXCalendar API
  • dhtmlXDoubleCalendar API
  • How to Start with Calendar
  • Object Constructor
  • Setting Skins
  • Date Formatting
  • Localizing Calendar
  • Operating Calendar
  • Handling Events
Start Calendar

Localizing Calendar

dhtmlxCalendar allows its users to add and use different languages with the ability to switch between them dynamically. First, you need to define necessary language settings. This can be done in the following way:

// settings for a new language (Russian)
// make sure dhtmlxcalendar.js will be loaded
dhtmlXCalendarObject.prototype.langData["ru"] = {
    // date format for inputs
    dateformat: "%d.%m.%Y",
    // header format
    hdrformat: "%F %Y",
    // full names of months
    monthesFNames: ["Январь","Февраль","Март","Апрель","Май","Июнь",
                    "Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
    // short names of months
    monthesSNames: ["Янв","Фев","Мар","Апр","Май","Июн",
                    "Июл","Авг","Сен","Окт","Ноя","Дек"],
    // full names of days
    daysFNames: ["Воскресенье","Понедельник","Вторник","Среда",
                    "Четверг","Пятница","Суббота"],
    // short names of days
    daysSNames: ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"],
    // starting day of a week. Number from 1(Monday) to 7(Sunday)
    weekstart: 1,
    // the title of the week number column
    weekname: "н",
    // name of the "Today" button
    today: "Сегодня",
    // name of the "Clear" button
    clear: "Очистить"
};

When you have the necessary language settings, you can switch between them using the loadUserLanguage() method (see details):

myCalendar.loadUserLanguage("ru");

If you'd like to apply language settings once for all calendar instances, use:

// make sure dhtmlxcalendar.js will be loaded
dhtmlXCalendarObject.prototype.lang = "ru";

Related sample: Custom language

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Operating Calendar DHTMLX Docs

Documentation
  • dhtmlXCalendar API
  • dhtmlXDoubleCalendar API
  • How to Start with Calendar
  • Object Constructor
  • Setting Skins
  • Date Formatting
  • Localizing Calendar
  • Operating Calendar
    • Changing the start day of the week
    • Showing the week numbers
    • Hiding/showing the calendar
    • Hiding/showing the time panel
    • Setting/getting the active date
    • Setting holidays
    • Setting inactive dates
    • Setting a new calendar's container
    • Setting the calendar's position
    • Showing/hiding "Today" and "Clear" buttons
  • Handling Events
Start Calendar

Operating Calendar

Changing the start day of the week

You can control the start day of a week through the setWeekStartDay (see the details).

A week can start from any day:

// week starts from Monday
myCalendar.setWeekStartDay(1);

// week starts from Sunday
myCalendar.setWeekStartDay(7);

Showing the week numbers

To show the column with week numbers you need to call the showWeekNumbers() method. The method takes no parameters and adds the week number column to the calendar:

var myCalendar = new dhtmlXCalendarObject("calendarHere");
myCalendar.showWeekNumbers();

To hide the week number column, use the hideWeekNumbers() method.

Hiding/showing the calendar

To show a calendar, use the show() method:

// to show calendar
myCalendar.show();

If there are several inputs with calendars attached to them, you can show a particular calendar, by passing the id of the related input to the show() method:

<input type="text" id="cal_2">

myCalendar.show("cal_2");

To hide a calendar, use the hide() method:

// to hide calendar
myCalendar.hide();

Hiding/showing the time panel

You can define whether or not calendar will show the time panel (by default, the time panel is shown):

// to hide panel
myCalendar.hideTime();

// to show panel
myCalendar.showTime();

Setting/getting the active date

To set/get the currently selected date you should use one of two respective methods:

// to set date
myCalendar.setDate(date); // date object or string in specified date format

// to get date
// will return date object
var curDateObj = myCalendar.getDate();
// will return date as string according to current date format
var curDateStr = myCalendar.getDate(true);

Setting holidays

You have a possibility to set holidays in calendar. The way holidays are rendered in calendar is determined by the CSS file. To set a date as holiday you should use the setHolidays() method (see details).

myCalendar.setHolidays("2011-09-25"); // sets September 25, 2011 as holiday

Setting inactive dates

Use the methods disableDays(), setInsensitiveDays(), setSensitiveRange(), setInsensitiveRange() to set insensitive/inactive dates in calendar (such dates are dimmed).

//all dates starting from June 08,2011 will be dimmed.Dates until June 08,2011 will be active.
myCalendar.setInsensitiveRange("2011-06-08", null);

//all dates starting from June 08,2011 will be active.Dates until July 08,2011 will be dimmed.
myCalendar.setSensitiveRange("2011-06-08", null);

//June 10,2011, June 17,2011, June 18,2011 will be dimmed.All other dates will be active.
myCalendar.setInsensitiveDays(["2011-06-10", new Date(2011,5,17), "2011-06-18"]);

//Mondays,Tuesdays and Thursdays of each week in the calendar will be dimmed
myCalendar.disableDays("week", [1,2,4]);

If a date is set as a string, it should correspond to the format specified with the setDateFormat() method.

Setting a new calendar's container

When a calendar is initialized as an individual object, you can change a container it's placed into by using the method setParent() (see details):

myCalendar.setParent("container2");

Setting the calendar's position

When calendar is initialized as a date input field you can set the position pop-up calendar will appear from. For this purpose you should use the setPosition() method (see details):

myCalendar.setPosition("right"); // "bottom" by default

Showing/hiding "Today" and "Clear" buttons

You can show Today and Clear buttons on the calendar next to the time.

By clicking the Today button, the calendar sets selection on the current day. A click on the Clear button will clear the selection of date.

By default, the Today and Clear buttons are hidden. To show them, you need to use the showToday method:

myCalendar.showToday();

To hide the buttons, use the hideToday method.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXCalendar API
  • dhtmlXDoubleCalendar API
  • How to Start with Calendar
  • Object Constructor
  • Setting Skins
  • Date Formatting
  • Localizing Calendar
  • Operating Calendar
  • Handling Events
    • Attaching events
    • Detaching events
    • The list of events
Start Calendar

Handling Events

Attaching events

You can attach several handlers to the same event using the method attachEvent():

var myEvent = myCalendar.attachEvent("onClick", function(){
    // your code here
});

Several handlers can be attached to one and the same event, and all of them will be executed.

The names of the events are case-insensitive.

Detaching events

To detach an event use the method detachEvent():

myCalendar.detachEvent(myEvent);

The list of events

You can find the full list of events in the Calendar API.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Carousel DHTMLX Docs

Documentation
  • Carousel
    • dhtmlXCarousel API
    • dhtmlXCarouselCell API
    • Initializing Carousel on a Page
    • Carousel Skins
    • Animation in Carousel
    • Working with Cells
    • Attaching Components
    • Attaching Menu/Status Bar
    • Attaching HTML
    • Attaching URL
    • Attaching Google Maps
    • Progress Bar
    • Different Content in the Same Cell
    • Coloring Text Selection
Start

Carousel

dhtmlxCarousel is an easy-to-use and handy component intended for displaying various content, including other DHTMLX components on one page. It allows switching cells with the help of special arrow buttons. There are several predefined skins and nice animation effects available for users. The component can be easily customized according to provided requirements by means of rich API.

API reference
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
Related resources
  • You may download dhtmlxCarousel from dhtmlx.com
  • Check online samples for dhtmlxCarousel
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Creating Carousel on a Page

  • Carousel source files
  • Constructor
  • Full-screen init
  • Init in an HTML element
  • Init in a window
  • Init in a cell of layout
  • Recommended init way
 Introduces the ways of initializing Carousel on a page.

Configuring Carousel

  • Carousel Skins
  • Animation in Carousel
 Tells about methods of customizing Carousel appearance by means of setting skins and animation effects.

Operating Carousel Cells and the Content

  • Working with Cells
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
 Describes available operations with Carousel cells and integration of dhtmlxCarousel with other dhtmlx components and 3rd party components.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXCarousel API DHTMLX Docs

Documentation
  • dhtmlXCarousel API
    • Methods
    • Events
  • dhtmlXCarouselCell API
  • Initializing Carousel on a Page
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

dhtmlXCarousel API

Methods
addCell | adds a new cell to the carousel
attachEvent | adds any user-defined handler to available events
attachFooter | attaches footer to component's bottom
attachHeader | attaches header to component's top
attachMenu | attaches dhtmlxMenu to component's top
attachRibbon | attaches dhtmlxRibbon to component's top
attachStatusBar | attaches a status bar object to component's bottom
attachToolbar | attaches dhtmlxToolbar to component's top
cells | returns dhtmlXCarouselCell instance (a cell of carousel)
detachEvent | detaches a handler from an event
detachFooter | detaches footer from component's bottom
detachHeader | detaches header from component's top
detachMenu | detaches dhtmlxMenu from component's top
detachRibbon | detaches dhtmlxRibbon from component's top
detachStatusBar | detaches status bar object from component's bottom
detachToolbar | detaches dhtmlxToolbar from component's top
enableHotKeys | enables hot keys for arrow buttons
forEachCell | an iterator, calls a user-defined handler for each cell
getActiveCell | returns object of the active cell
getActiveId | returns the id of the active cell
getActiveIndex | returns the index of the active cell
getAttachedMenu | returns dhtmlxMenu instance attached to component's top
getAttachedRibbon | returns dhtmlxRibbon instance attached to component's top
getAttachedStatusBar | returns status bar object attached to component's bottom
getAttachedToolbar | returns dhtmlxToolbar instance attached to component's top
goFirst | switches to the first carousel cell
goLast | switches to the last carousel cell
goNext | switches to the next cell
goPrev | switches to the previous cell
hideControls | hides the button controls used for switching carousel cells
hideMenu | hides dhtmlxMenu attached to component's top
hideRibbon | hides dhtmlxRibbon attached to component's top
hideStatusBar | hides status bar object attached to component's bottom
hideToolbar | hides dhtmlxToolbar attached to component's top
progressOff | hides progress indicator for full component
progressOn | shows progress indicator for full component
setCellSize | sets width and height of the cell
setOffset | sets cell offsets withing visible area
setOffsets | sets offsets for parent container from each side
setSizes | changes object instance's size according to the outer container
showControls | shows the button controls used for switching carousel cells
showMenu | shows dhtmlxMenu attached to component's top
showRibbon | shows dhtmlxRibbon attached to component's top
showStatusBar | shows status bar object attached to component's bottom
showToolbar | shows dhtmlxToolbar attached to component's bottom
unload | unloads the carousel component (destructor)
Events
onContentLoaded | fires when content is loaded into a cell via the attachURL() method
onSelect | fires when a cell is selected
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • addCell
    • attachEvent
    • attachFooter
    • attachHeader
    • attachMenu
    • attachRibbon
    • attachStatusBar
    • attachToolbar
    • cells
    • detachEvent
    • detachFooter
    • detachHeader
    • detachMenu
    • detachRibbon
    • detachStatusBar
    • detachToolbar
    • enableHotKeys
    • forEachCell
    • getActiveCell
    • getActiveId
    • getActiveIndex
    • getAttachedMenu
    • getAttachedRibbon
    • getAttachedStatusBar
    • getAttachedToolbar
    • goFirst
    • goLast
    • goNext
    • goPrev
    • hideControls
    • hideMenu
    • hideRibbon
    • hideStatusBar
    • hideToolbar
    • progressOff
    • progressOn
    • setCellSize
    • setOffset
    • setOffsets
    • setSizes
    • showControls
    • showMenu
    • showRibbon
    • showStatusBar
    • showToolbar
    • unload
  • Events
Start Carousel dhtmlXCarousel API

Methods

addCell | adds a new cell to the carousel
attachEvent | adds any user-defined handler to available events
attachFooter | attaches footer to component's bottom
attachHeader | attaches header to component's top
attachMenu | attaches dhtmlxMenu to component's top
attachRibbon | attaches dhtmlxRibbon to component's top
attachStatusBar | attaches a status bar object to component's bottom
attachToolbar | attaches dhtmlxToolbar to component's top
cells | returns dhtmlXCarouselCell instance (a cell of carousel)
detachEvent | detaches a handler from an event
detachFooter | detaches footer from component's bottom
detachHeader | detaches header from component's top
detachMenu | detaches dhtmlxMenu from component's top
detachRibbon | detaches dhtmlxRibbon from component's top
detachStatusBar | detaches status bar object from component's bottom
detachToolbar | detaches dhtmlxToolbar from component's top
enableHotKeys | enables hot keys for arrow buttons
forEachCell | an iterator, calls a user-defined handler for each cell
getActiveCell | returns object of the active cell
getActiveId | returns the id of the active cell
getActiveIndex | returns the index of the active cell
getAttachedMenu | returns dhtmlxMenu instance attached to component's top
getAttachedRibbon | returns dhtmlxRibbon instance attached to component's top
getAttachedStatusBar | returns status bar object attached to component's bottom
getAttachedToolbar | returns dhtmlxToolbar instance attached to component's top
goFirst | switches to the first carousel cell
goLast | switches to the last carousel cell
goNext | switches to the next cell
goPrev | switches to the previous cell
hideControls | hides the button controls used for switching carousel cells
hideMenu | hides dhtmlxMenu attached to component's top
hideRibbon | hides dhtmlxRibbon attached to component's top
hideStatusBar | hides status bar object attached to component's bottom
hideToolbar | hides dhtmlxToolbar attached to component's top
progressOff | hides progress indicator for full component
progressOn | shows progress indicator for full component
setCellSize | sets width and height of the cell
setOffset | sets cell offsets withing visible area
setOffsets | sets offsets for parent container from each side
setSizes | changes object instance's size according to the outer container
showControls | shows the button controls used for switching carousel cells
showMenu | shows dhtmlxMenu attached to component's top
showRibbon | shows dhtmlxRibbon attached to component's top
showStatusBar | shows status bar object attached to component's bottom
showToolbar | shows dhtmlxToolbar attached to component's bottom
unload | unloads the carousel component (destructor)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addCell DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

addCell

adds a new cell to the carousel

void addCell(string|number id,number index);

Parameters

id | string|number | id of a new cell
index | number | index of a new cell

Example

myCarousel.addCell(id, index);

// or with autogenerated id
var id = myCarousel.addCell();

Details

if id for a cell is not specified, carousel will generate it

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachFooter DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

attachFooter

attaches footer to component's bottom

void attachFooter(string|number|HTMLElement id, [number height] );

Parameters

id | string|number|HTMLElement | id or DOM element
height | number | optional, footer height

Example

dhxComponent.attachFooter("my_footer");

Details

If height is not specified, component will try to detect it automatically. In this case you'd better specify it in CSS:

#my_footer {
    padding-top: 2px;
    background-color: white;
}

#my_footer .my_footer_text {
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 10px;
    height: 70px; /* for autodetect */
    border: 1px solid #a4bed4
}
<div id="my_footer">
    <div class="my_footer_text">
        Hi! I'm footer!
    </div>
</div>

You can use visibility:hidden style for keeping your element hidden while it is not attached to a component, after attaching the style will be changed to visibility:visible.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHeader DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

attachHeader

attaches header to component's top

void attachHeader(string|number|HTMLElement id, [number height] );

Parameters

id | string|number|HTMLElement | id or DOM element
height | number | optional, header height

Example

dhxComponent.attachHeader("my_header");

Details

If height is not specified, component will try to detect it automatically. In this case you'd better specify it in CSS:

#my_header {
    padding-bottom: 2px;
    background-color: white;
}

#my_header .my_header_text {
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 10px;
    height: 70px; /* for autodetect */
    border: 1px solid #a4bed4
}
<div id="my_header">
    <div class="my_header_text">
        Hi! I'm header!
    </div>
</div>

You can use visibility:hidden style for keeping your element hidden while it is not attached to component. After attaching the style will be changed to visibility:visible.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMenu DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

attachMenu

attaches dhtmlxMenu to component's top

object attachMenu( [object conf] );

Parameters

conf object optional, menu config

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.attachMenu({
    icons_path: "imgs/menu/icons/",
    json: "data/json/menu.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachRibbon DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

attachRibbon

attaches dhtmlxRibbon to component's top

object attachRibbon( [object conf] );

Parameters

conf object optional, ribbon config

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.attachRibbon({
    icons_path: "imgs/ribbon/icons/",
    json: "data/json/ribbon.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachStatusBar DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

attachStatusBar

attaches a status bar object to component's bottom

object attachStatusBar( [object conf] );

Parameters

conf object optional, status bar init params

Returns

object status bar object

Example

/* conf param properties */
{
    text:   "Text", // status bar init text
    height: 20      // status bar init height
}

/* init/attach status bar */

// default behaviour
var sbObj = dhxComponent.attachStatusBar();

// with text
var sbObj = dhxComponent.attachStatusBar({text: "Loading..."});

// with text and custom height
var sbObj = dhxComponent.attachStatusBar({text: "Loading...", height: 30});

/* operations with status bar object */

// set text
sbObj.setText("Page was successfuly loaded");

// get text
var text = sbObj.getText();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToolbar DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

attachToolbar

attaches dhtmlxToolbar to component's top

object attachToolbar( [object conf] );

Parameters

conf object optional, toolbar config

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.attachToolbar({
    icons_path: "imgs/toolbar/icons/",
    json: "data/json/toolbar.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cells DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

cells

returns dhtmlXCarouselCell instance (a cell of carousel)

dhtmlXCarouselCell cells(string|number id);

Parameters

id string|number item id

Returns

dhtmlXCarouselCell dhtmlXCarouselCell instance

Example

var cell = myCarousel.cells(id);
cell.attachHTMLString("some text here");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachFooter DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

detachFooter

detaches footer from component's bottom

void detachFooter();

Example

dhxComponent.detachFooter();

Details

footer DOM element will be attached to body with visibility:hidden css style

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachHeader DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

detachHeader

detaches header from component's top

void detachHeader();

Example

dhxComponent.detachHeader();

Details

header DOM element will be attached to body with visibility:hidden css style

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachMenu DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

detachMenu

detaches dhtmlxMenu from component's top

void detachMenu();

Example

var myMenu = dhxComponent.attachMenu();

// detach
dhxComponent.detachMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachRibbon DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

detachRibbon

detaches dhtmlxRibbon from component's top

void detachRibbon();

Example

var myRibbon = dhxComponent.attachRibbon();

// detach
dhxComponent.detachRibbon();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachStatusBar DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

detachStatusBar

detaches status bar object from component's bottom

void detachStatusBar();

Example

var sbObj = dhxComponent.attachStatusBar();

// detach
dhxComponent.detachStatusBar();
sbObj = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachToolbar DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

detachToolbar

detaches dhtmlxToolbar from component's top

void detachToolbar();

Example

var myToolbar = dhxComponent.attachToolbar();

// detach
dhxComponent.detachToolbar();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableHotKeys DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

enableHotKeys

enables hot keys for arrow buttons

void enableHotKeys(boolean mode);

Parameters

mode boolean true/false to enable/disable hot keys (enabled by the default)

Example

myCarousel.enableHotKeys(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachCell DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

forEachCell

an iterator, calls a user-defined handler for each cell

void forEachCell(function handler);

Parameters

handler function a user-defined handler to call, item object will be passed as a param

Example

myCarousel.forEachCell(function(item){
    console.log(item.getId());
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getActiveCell DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

getActiveCell

returns object of the active cell

object getActiveCell();

Returns

object dhtmlXCarouselCell object of the active cell

Example

var cell = myCarousel.getActiveCell();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getActiveId DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

getActiveId

returns the id of the active cell

string|number getActiveId();

Returns

string|number id of the active cell

Example

var id = myCarousel.getActiveId();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getActiveIndex DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

getActiveIndex

returns the index of the active cell

number getActiveIndex();

Returns

number index of the active cell

Example

var index = myCarousel.getActiveIndex();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedMenu DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

getAttachedMenu

returns dhtmlxMenu instance attached to component's top

dhtmlXMenuObject getAttachedMenu();

Returns

dhtmlXMenuObject dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.attachMenu();

// somewhere in other place
var attachedMenu = dhxComponent.getAttachedMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedRibbon DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

getAttachedRibbon

returns dhtmlxRibbon instance attached to component's top

dhtmlXRibbon getAttachedRibbon();

Returns

dhtmlXRibbon dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.attachRibbon();

// somewhere in other place
var attachedRibbon = dhxComponent.getAttachedRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedStatusBar DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

getAttachedStatusBar

returns status bar object attached to component's bottom

object getAttachedStatusBar();

Returns

object StatusBar instance

Example

var myStatusBar = dhxComponent.attachStatusBar();

// somewhere in other place
var attachedStatusBar = dhxComponent.getAttachedStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedToolbar DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

getAttachedToolbar

returns dhtmlxToolbar instance attached to component's top

dhtmlXToolbarObject getAttachedToolbar();

Returns

dhtmlXToolbarObject dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.attachToolbar();

// somewhere in other place
var attachedToolbar = dhxComponent.getAttachedToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


goFirst DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

goFirst

switches to the first carousel cell

void goFirst();

Example

myCarousel.goFirst();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


goLast DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

goLast

switches to the last carousel cell

void goLast();

Example

myCarousel.goLast();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


goNext DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

goNext

switches to the next cell

void goNext();

Example

myCarousel.goNext();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


goPrev DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

goPrev

switches to the previous cell

void goPrev();

Example

myCarousel.goPrev();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideControls DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

hideControls

hides the button controls used for switching carousel cells

void hideControls();

Example

myCarousel.hideControls();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMenu DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

hideMenu

hides dhtmlxMenu attached to component's top

void hideMenu();

Example

dhxComponent.hideMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideRibbon DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

hideRibbon

hides dhtmlxRibbon attached to component's top

void hideRibbon();

Example

dhxComponent.hideRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideStatusBar DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

hideStatusBar

hides status bar object attached to component's bottom

void hideStatusBar();

Example

dhxComponent.hideStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideToolbar DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

hideToolbar

hides dhtmlxToolbar attached to component's top

void hideToolbar();

Example

dhxComponent.hideToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOff DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

progressOff

hides progress indicator for full component

void progressOff();

Example

dhxComponent.progressOff();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOn DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

progressOn

shows progress indicator for full component

void progressOn();

Example

dhxComponent.progressOn();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCellSize DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

setCellSize

sets width and height of the cell

void setCellSize(string|number width,string|number height);

Parameters

width | string|number | number for exact width or "auto" for auto-adjust
height | string|number | number for exact height or "auto" for auto-adjust

Example

myCarousel.setCellSize(width, height);

Details

auto-adjusting calculates width and height depending on the specified left and top offsets

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOffset DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

setOffset

sets cell offsets withing visible area

void setOffset(number left,number top,number item);

Parameters

left | number | offset from left and right sides
top | number | offset from top and bottom sides
item | number | offset to the next cell

Example

myCarousel.setOffset(15, 10, 45);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOffsets DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

setOffsets

sets offsets for parent container from each side

void setOffsets(object conf);

Parameters

conf object offsets config

Example

// init component
var myComponent = new dhtmlXComponent(...);

// setting offsets for parent container
// this also works for document.body init
myComponent.setOffsets({
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
});

// also you can specify offset only for a single direction
myComponent.setOffsets({
    bottom: 10
});

// or for several directions
myComponent.setOffsets({
    right: 10,
    left: 10
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSizes DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

setSizes

changes object instance's size according to the outer container

void setSizes();

Example

// an object that will be used as carousel's parent container
<div id="carouselObj" style="width: 300px; height: 500px;"> </div>

// init accordion:
var myCarousel = new dhtmlXCarousel("carouselObj");

// when parent container's dimension is changed...
var parentObj = document.getElementById("carouselObj");
parentObj.style.width = "250px";
parentObj.style.height = "400px";

// ...you need to adjust carousel
myCarousel.setSizes();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showControls DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

showControls

shows the button controls used for switching carousel cells

void showControls();

Example

myCarousel.showControls();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMenu DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

showMenu

shows dhtmlxMenu attached to component's top

void showMenu();

Example

dhxComponent.showMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRibbon DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

showRibbon

shows dhtmlxRibbon attached to component's top

void showRibbon();

Example

dhxComponent.showRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showStatusBar DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

showStatusBar

shows status bar object attached to component's bottom

void showStatusBar();

Example

dhxComponent.showStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showToolbar DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

showToolbar

shows dhtmlxToolbar attached to component's bottom

void showToolbar();

Example

dhxComponent.showToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • addCell
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • enableHotKeys
  • forEachCell
  • getActiveCell
  • getActiveId
  • getActiveIndex
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • goFirst
  • goLast
  • goNext
  • goPrev
  • hideControls
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setCellSize
  • setOffset
  • setOffsets
  • setSizes
  • showControls
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • unload
Start Carousel dhtmlXCarousel API Methods

unload

unloads the carousel component (destructor)

void unload();

Example

myCarousel.unload();
myCarousel = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onContentLoaded
    • onSelect
Start Carousel dhtmlXCarousel API

Events

onContentLoaded | fires when content is loaded into a cell via the attachURL() method
onSelect | fires when a cell is selected
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onContentLoaded DHTMLX Docs

Documentation
  • onContentLoaded
  • onSelect
Start Carousel dhtmlXCarousel API Events

onContentLoaded

fires when content is loaded into a cell via the attachURL() method

void onContentLoaded(string|number id){ ... };

Parameters

id string|number cell id

Example

var myCarousel = new dhtmlXCarousel(...);

myCarousel.attachEvent("onContentLoaded", function(id){
    // your code here
});

myCarousel.cells("a1").attachURL("test_page_1.html");
myCarousel.cells("a2").attachURL("test_page_2.html", true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelect DHTMLX Docs

Documentation
  • onContentLoaded
  • onSelect
Start Carousel dhtmlXCarousel API Events

onSelect

fires when a cell is selected

void onSelect(string|number id){ ... };

Parameters

id string|number the cell id

Example

myCarousel.attachEvent("onSelect", function(id){
    // your code
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXCarouselCell API DHTMLX Docs

Documentation
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
    • Methods
  • Initializing Carousel on a Page
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

dhtmlXCarouselCell API

Methods
appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getFrame | returns an iframe object when an URL is attached to a cell
getId | returns the id of a cell
getIndex | returns the index of a cell
getViewName | returns the name of the current view
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
remove | removes the specified cell
setActive | selects the specified cell
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
unloadView | unloads the specified view
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • appendObject
    • attachAccordion
    • attachCarousel
    • attachChart
    • attachDataView
    • attachEditor
    • attachForm
    • attachGrid
    • attachHTMLString
    • attachLayout
    • attachList
    • attachMap
    • attachMenu
    • attachObject
    • attachRibbon
    • attachScheduler
    • attachSidebar
    • attachStatusBar
    • attachTabbar
    • attachToolbar
    • attachTree
    • attachTreeView
    • attachURL
    • attachVault
    • detachMenu
    • detachObject
    • detachRibbon
    • detachStatusBar
    • detachToolbar
    • getAttachedMenu
    • getAttachedObject
    • getAttachedRibbon
    • getAttachedStatusBar
    • getAttachedToolbar
    • getFrame
    • getId
    • getIndex
    • getViewName
    • hideMenu
    • hideRibbon
    • hideStatusBar
    • hideToolbar
    • progressOff
    • progressOn
    • reloadURL
    • remove
    • setActive
    • showInnerScroll
    • showMenu
    • showRibbon
    • showStatusBar
    • showToolbar
    • showView
    • unloadView
Start Carousel dhtmlXCarouselCell API

Methods

appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getFrame | returns an iframe object when an URL is attached to a cell
getId | returns the id of a cell
getIndex | returns the index of a cell
getViewName | returns the name of the current view
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
remove | removes the specified cell
setActive | selects the specified cell
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
unloadView | unloads the specified view
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


appendObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

appendObject

attaches an object to a cell without clearing cell content

void appendObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

dhxComponent.cells(id).appendObject("div_a");
dhxComponent.cells(id).appendObject("div_b");
dhxComponent.cells(id).appendObject("div_c");

Details

  • style "display:none" will be removed automatically after attaching, it's useful to keep content hidden while not attached

  • for this mode a cell will add scrolls automatically, there's no need to specify width/height to the attached object (divs without specified dimension are usually stretched to 100% of width and height adjusted to content)

<div id="div_a" style="display:none;"> ... </div>
<div id="div_b"> ... </div>
<div id="div_c"> ... </div>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachAccordion DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachAccordion

attaches dhtmlxAccordion to a cell

dhtmlXAccordion attachAccordion( [object conf] );

Parameters

conf object optional, accordion config for object-api init

Returns

dhtmlXAccordion dhtmlXAccordion instance

Example

var myAcc = dhxComponent.cells(id).attachAccordion();
myAcc.addItem("a1", "First item", true);
myAcc.addItem("a2", "Second item");

// or
var myAcc = dhxComponent.cells(id).attachAccordion({
    icons_path: "icons/",
    items: [
        { id: "a1", text: "Main Page", icon: "flag_red.png" },
        { id: "a2", text: "Navigation", icon: "flag_green.png" },
        { id: "a3", text: "Feedback", icon: "flag_blue.png" }
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachCarousel DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachCarousel

attaches a carousel object to a cell

object attachCarousel(number width,number height, [object conf] );

Parameters

width | number | the width of a carousel
height | number | the height of a carousel
conf | object | optional, the config of a carousel for object-api init

Returns

object dhtmlXCarousel instance

Example

var myCarousel = dhxComponent.cells(id).attachCarousel(400, 300, conf){
    ...
});

Change log

added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachChart DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachChart

attaches dhtmlxChart to a cell

dhtmlXChart attachChart(object conf);

Parameters

conf object chart conf (please, check chart docs for details)

Returns

dhtmlXChart dhtmlXChart instance

Example

var myChart = dhxComponent.cells(id).attachChart({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachDataView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachDataView

attaches dhtmlxDataView to a cell

dhtmlXDataView attachDataView(object conf);

Parameters

conf object dataview conf (please, check DataView docs for details)

Returns

dhtmlXDataView dhtmlXDataView instance

Example

var myDataView = dhxComponent.cells(id).attachDataView({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEditor DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachEditor

attaches dhtmlxEditor to a cell

dhtmlXEditor attachEditor();

Returns

dhtmlXEditor dhtmlXEditor instance

Example

var myEditor = dhxComponent.cells(id).attachEditor({
    // editor config here
});

Details

For details about Editor initialization, read the Object Constructor article.

More info about attaching Editor to other components is given in the article Adding Editor to DHTMLX Components.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachForm DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachForm

attaches dhtmlxForm to a cell

dhtmlXForm attachForm(object conf);

Parameters

conf object form conf (please, check form docs for details)

Returns

dhtmlXForm dhtmlXForm instance

Example

var myForm = dhxComponent.cells(id).attachForm({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachGrid DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachGrid

attaches dhtmlxGrid to a cell

dhtmlXGridObject attachGrid( [object config] );

Parameters

config object optional, an object with the Grid configuration

Returns

dhtmlXGridObject dhtmlXGridObject instance

Example

// without parameters
var myGrid = dhxComponent.cells(id).attachGrid();

// passing a config object as a parameter
grid1 = myLayout.cells("a").attachGrid({
    image_path:'codebase/imgs/',
    columns: [{
        label: "Column A",
        width: 100,
        type: "ro",
        sort: "int",
        align: "right"
    },{
        label: "Column B",
        width: 250,
        type: "ed",
        sort: "str",
        align: "left"
    }],
    multiselect: true,
    xml: "grid.xml"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHTMLString DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachHTMLString

attaches HTML content to a cell

void attachHTMLString(string htmlString);

Parameters

htmlString string an HTML string to attach

Example

dhxComponent.cells(id).attachHTMLString("<div>some content</div>");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachLayout DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachLayout

attaches dhtmlxLayout to a cell

dhtmlXLayoutObject attachLayout(string|object conf);

Parameters

conf string|object layout pattern or api-init config

Returns

dhtmlXLayoutObject dhtmlXLayoutObject instance

Example

// pattern only
var myLayout = dhxComponent.cells(id).attachLayout("4H");

// api-init config
var myLayout = dhxComponent.cells(id).attachLayout({
    pattern: "4H",
    cells: [
        {id: "a", text: "Navigation", width: 100, header: false},
        {id: "b", text: "Advertisement", height: 100},
        {id: "c", text: "Main Page"},
        {id: "d", text: "Links", collapse: true}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachList DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachList

attaches dhtmlxList to a cell

dhtmlXList attachList(object conf);

Parameters

conf object list conf (please, check List docs for details)

Returns

dhtmlXList dhtmlXList instance

Example

var myList = dhxComponent.cells(id).attachList({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMap DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachMap

attaches Google Maps to a cell

object attachMap( [object opts] );

Parameters

opts object optional, map options (please, check Google docs for details)

Returns

object google.maps.Map object

Example

var GMaps = dhxLayout.cells(id).attachMap();
//or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = dhxLayout.cells(id).attachMap(mapParams);

Details

Please, check Google docs for details.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachMenu

attaches dhtmlxMenu to a cell

object attachMenu( [object conf] );

Parameters

conf object optional, menu config

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.cells(id).attachMenu({
    icons_path: "imgs/menu/icons/",
    json: "data/json/menu.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachObject

attaches an HTML object to a cell

void attachObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

dhxComponent.cells(id).attachObject("objectId");

Details
  • style "display:none" (if set) will be removed automatically after attaching, useful to keep content hidden while not attached
<div id="objectId" style="display: none;">...</div>
  • for this mode cell will not render native scrolls, so you need to use the following style: "width: 100%; height: 100%; overflow: auto;" to make attached object's scrolls appear when necessary
div#objectId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}
See also
  • API
    • detachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


attachRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachRibbon

attaches dhtmlxRibbon to a cell

object attachRibbon( [object conf] );

Parameters

conf object optional, ribbon config

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.cells(id).attachRibbon({
    icons_path: "imgs/ribbon/icons/",
    json: "data/json/ribbon.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachScheduler DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachScheduler

attaches dhtmlxScheduler to a cell

object attachScheduler( [Date day,string mode,string contId,object scheduler] );

Parameters

day | Date | (optional) js date object, initial date in scheduler, current date by default
mode | string | (optional) name of the initial mode ("month", "day", "week"), "week" by default
contId | string | (optional) extended config, please see below
scheduler | object | (optional) dhtmlxScheduler object (another instance, only PRO version of scheduler)

Returns

object dhtmlXScheduler instance

Example

var myScheduler = dhxComponent.cells(id).attachScheduler();

// or
var myScheduler = dhxComponent.cells(id).attachScheduler(null, "month");

//or
var sTabs = '<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>'+
            '<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>'+
            '<div class="dhx_cal_tab" name="month_tab" style="right:280px;"></div>'+
            '<div class="dhx_cal_tab" name="timeline_tab" style="right:76px;"></div>';

var myScheduler = dhxComponent.cells(id).attachScheduler(null, "month", sTabs);

Details

There are two possible values of the contId parameter:

  • the id of the div that specifies the entire scheduler configuration
  • a string with the tabs' divs. In this case a scheduler will be rendered with the default configuration, except for the tabs: they can be presented by the default "day", "week", "month" members or by any other tabs' collection
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachSidebar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachSidebar

attaches dhtmlxSidebar to a cell

object attachSidebar( [object conf] );

Parameters

conf object optional, sidebar config for api-init

Returns

object dhtmlxSidebar instance

Example

var mySidebar = dhxComponent.cells(id).attachSidebar({
    items: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachStatusBar

attaches a status bar to a cell

obj attachStatusBar( [object conf] );

Parameters

conf object optional, status bar init params

Returns

obj status bar object

Example

/* conf param properties */
{
    text:   "Text", // status bar init text
    height: 20,     // status bar init height
    paging: true    // (optional) true to use for grid paging
}

/* init/attach status bar */

// default behavior
var sbObj = dhxComponent.cells(id).attachStatusBar();

// with text
var sbObj = dhxComponent.cells(id).attachStatusBar({text: "Loading..."});

// with text and custom height
var sbObj = dhxComponent.cells(id).attachStatusBar({text: "Loading...", height: 30});

/* operations with status bar object */

// set text
sbObj.setText("Page was successfully loaded");

// get text
var text = sbObj.getText();

Details

Since version 4.1 toolbar can be attached into statusbar in order to be used for paging in grid:

// first attach status bar
dhxComponent.cells(id).attachStatusBar({
    text:   "<div id='pagingArea'></div>",
    paging: true
});

// then init paging in grid
myGrid.enablePaging(true, 9, 3, "pagingArea");
myGrid.setPagingSkin("toolbar");
Change log
  • conf param was added in version 4.0
  • paging:true added in 4.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTabbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachTabbar

attaches dhtmlxTabbar to a cell

object attachTabbar( [object conf] );

Parameters

conf object optional, tabbar config for API-initialization

Returns

object dhtmlXTabbar instance

Example

var myTabbar = dhxComponent.cells(id).attachTabbar({
    align: "right",
    mode: "bottom",
    tabs: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Details

The old parameter used for tabbar initialization - "mode" is deprecated since version 4.0 and is replaced with "conf".

To set the tabs mode, use conf.mode:

// old deprecated
var myTabbar = dhxComponent.cells(id).attachTabbar("bottom");
// new usage
var myTabbar = dhxComponent.cells(id).attachTabbar({mode:"bottom"});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachToolbar

attaches dhtmlxToolbar to a cell

object attachToolbar( [object conf] );

Parameters

conf object optional, toolbar config

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.cells(id).attachToolbar({
    icons_path: "imgs/toolbar/icons/",
    json: "data/json/toolbar.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTree DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachTree

attaches dhtmlxTree to a cell

object attachTree( [string|number rootId] );

Parameters

rootId string|number (optional) tree root id (check Tree docs for details)

Returns

object dhtmlXTreeObject instance

Example

var myTree = dhxComponent.cells(id).attachTree();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTreeView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachTreeView

attaches dhtmlxTreeView to a cell

object attachTreeView( [object conf] );

Parameters

conf object optional, treeview config

Returns

object dhtmlXTreeViewObject instance

Example

var myTreeView = dhxComponent.cells(id).attachTreeView({
    items: [
        {id: 1, text: "Books", open: 1, items: [
            {id: 2, text: "Turned at Dark / C. C. Hunter"},
            {id: 3, text: "Daire Meets Ever / Alyson Noël"}
        ]}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachURL DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachURL

attaches the specified URL to a cell

void attachURL(string url, [boolean ajax,boolean|object postData] );

Parameters

url | string | URL to attach
ajax | boolean | (optional) if set to true, the URL will be loaded by AJAX (async GET), false by default
postData | boolean|object | (optional) performs POST request (true for a simple post or an object with params)

Example

/* iframe */
// GET
dhxComponent.cells(id).attachURL("page.html");
// POST
dhxComponent.cells(id).attachURL("page.html", null, true);
// POST with params
dhxComponent.cells(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

/* by ajax */
// GET
dhxComponent.cells(id).attachURL("page.html", true);
// POST
dhxComponent.cells(id).attachURL("page.html", true, true);
// POST with params
dhxComponent.cells(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Details

important notes:

  • to prevent caching in some browsers, an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • loading is async, so to proceed with content, you need onContentLoaded event
  • learn how to control attached content here
Change log

postData param and the ability to perform POST request are added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachVault DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

attachVault

attaches dhtmlxVault to a cell

dhtmlXVaultObject attachVault(object conf);

Parameters

conf object Vault config for object-api initialization

Returns

dhtmlXVaultObject dhtmlxVault instance

Example

var myVault = dhxComponent.cells(id).attachVault({
    uploadUrl:      "http://my_mega_server/upload_handler.php",
    swfUrl:         "http://my_mega_server/upload_handler.php",
    slUrl:          "http://my_mega_server/upload_handler.php",
    swfPath:        "dhxvault.swf",
    slXap:          "dhxvault.xap"
});

Details

if separate component files are used - dhtmlxvault.js should be included after dhtmlxcontainer.js

Change log

added in 3.6.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

detachMenu

detaches dhtmlxMenu from a cell

void detachMenu();

Example

var myMenu = dhxComponent.cells(id).attachMenu();

// detach
dhxComponent.cells(id).detachMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

detachObject

detaches any attached content from a cell

void detachObject( [boolean remove,string|number|HTMLElement moveTo] );

Parameters

remove | boolean | (optional) set to true to remove the content permanently, false by default
moveTo | string|number|HTMLElement | (optional) the object's id or the object itself to move content to (if the "remove" parameter is set to false)
Details

Let's consider possible behavior, depending on which we pass particular parameters to the method.

Assuming that we have attached Grid to the component's cell:

var myGrid = dhxComponent.cells(id).attachGrid();

In case we need to detach Grid later, there are several possible options:

1) calling the detachObject() method without parameters:

dhxComponent.cells(id).detachObject();

The Grid object won't be completely removed. It will be attached to the document.body outside the component's container and hidden with the display:none property.

2) calling the detachObject() method with the "remove" parameter set to true:

dhxComponent.cells(id).detachObject(true);

The cell will be cleared. You need to clear the Grid object to remove it permanently.

myGrid = null;

3) calling the detachObject() method with the "remove" parameter set to false and passing an object (object's id) as the second parameter:

// assuming that a node with the id="tempNode" exists
dhxComponent.cells(id).detachObject(false, "tempNode");

The Grid object won't be completely removed. It will be moved to the "tempNode" container and hidden with the display:none property.

Note also that if you call dhxComponent.unload(), the attached content will be removed permanently.

See also
  • API
    • attachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


detachRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

detachRibbon

detaches dhtmlxRibbon from a cell

void detachRibbon();

Example

var myRibbon = dhxComponent.cells(id).attachRibbon();

// detach
dhxComponent.cells(id).detachRibbon();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

detachStatusBar

detaches status bar from a cell

void detachStatusBar();

Example

var sbObj = dhxComponent.cells(id).attachStatusBar();

// detach
dhxComponent.cells(id).detachStatusBar();
sbObj = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

detachToolbar

detaches dhtmlxToolbar from a cell

void detachToolbar();

Example

var myToolbar = dhxComponent.cells(id).attachToolbar();

// detach
dhxComponent.cells(id).detachToolbar();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

getAttachedMenu

returns dhtmlxMenu instance attached to a cell

object getAttachedMenu();

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.cells(id).attachMenu();

// somewhere in a different place
var attachedMenu = dhxComponent.cells(id).getAttachedMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

getAttachedObject

returns the object attached to a cell

string|object getAttachedObject();

Returns

string|object attached object

Example

var myGrid = dhxComponent.cells(id).attachGrid({...});

// somewhere in other place
var obj = dhxComponent.cells(id).getAttachedObject();
if (typeof(window.dhtmlXGridObject) == "function" && obj instanceof dhtmlXGridObject) {
    // code related to grid
} else {
    // some other code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

getAttachedRibbon

returns dhtmlxRibbon instance attached to a cell

object getAttachedRibbon();

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.cells(id).attachRibbon();

// somewhere in other place
var attachedRibbon = dhxComponent.cells(id).getAttachedRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

getAttachedStatusBar

returns status bar object attached to a cell

object getAttachedStatusBar();

Returns

object status bar instance

Example

var myStatusBar = dhxComponent.cells(id).attachStatusBar();

// somewhere in a different place
var attachedStatusBar = dhxComponent.cells(id).getAttachedStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

getAttachedToolbar

returns dhtmlxToolbar instance attached to a cell

object getAttachedToolbar();

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.cells(id).attachToolbar();

// somewhere in a different  place
var attachedToolbar = dhxComponent.cells(id).getAttachedToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFrame DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

getFrame

returns an iframe object when an URL is attached to a cell

HTMLElement getFrame();

Returns

HTMLElement an iframe object

Example

// as loading is async, you need to do it through an event
dhxComponent.attachEvent("onContentLoaded", function(id){

    // get frame
    var ifr = dhxComponent.cells(id).getFrame();

    // access to iframe's element
    var elem = ifr.contentWindow.document.getElementById("someId");
    elem.innerHTML = "some text";

    // access to iframe's function
    // make sure that the function is in the iframe's window scope
    ifr.contentWindow.someFunc();

});

// and then attach an URL
dhxComponent.cells(id).attachURL("server/page.php?param=value");

Details

You can learn how to manage the attached content from the article Attaching URL.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getId DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

getId

returns the id of a cell

string|number getId();

Returns

string|number the cell's id

Example

dhxComponent.forEachCell(function(cell){
    var id = cell.getId();
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getIndex DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

getIndex

returns the index of a cell

number getIndex();

Returns

number cell index

Example

var index = myCarousel.cells(id).getIndex();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getViewName DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

getViewName

returns the name of the current view

string getViewName();

Returns

string view name

Example

var name = dhxComponent.cells(id).getViewName();

Details

The default view name is "def", it is created automatically when a cell is created

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

hideMenu

hides dhtmlxMenu attached to a cell

void hideMenu();

Example

dhxComponent.cells(id).hideMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

hideRibbon

hides dhtmlxRibbon attached to a cell

void hideRibbon();

Example

dhxComponent.cells(id).hideRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

hideStatusBar

hides status bar object attached to a cell

void hideStatusBar();

Example

dhxComponent.cells(id).hideStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

hideToolbar

hides dhtmlxToolbar attached to a cell

void hideToolbar();

Example

dhxComponent.cells(id).hideToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOff DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

progressOff

hides the progress indicator in a cell

void progressOff();

Example

dhxComponent.cells(id).progressOff();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOn DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

progressOn

shows the progress indicator in a cell

void progressOn();

Example

dhxComponent.cells(id).progressOn();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


reloadURL DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

reloadURL

reloads the attached URL in a cell

void reloadURL();

Example

dhxComponent.cells(id).reloadURL();

Details

reloads both iFrame/AJAX attached, keeps postData and params, if any

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


remove DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

remove

removes the specified cell

void remove();

Example

myCarousel.cells(id).remove();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setActive DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

setActive

selects the specified cell

void setActive();

Example

myCarousel = new dhtmlXCarousel("carouselObj");

var id = myCarousel.addCell();

// select a cell
myCarousel.cells(id).setActive();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showInnerScroll DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

showInnerScroll

shows inner cell scrolls

void showInnerScroll();

Example

dhxComponent.cells(id).showInnerScroll();

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

showMenu

shows dhtmlxMenu attached to a cell

void showMenu();

Example

dhxComponent.cells(id).showMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

showRibbon

shows dhtmlxRibbon attached to a cell

void showRibbon();

Example

dhxComponent.cells(id).showRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

showStatusBar

shows status bar object attached to a cell

void showStatusBar();

Example

dhxComponent.cells(id).showStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

showToolbar

shows dhtmlxToolbar attached to a cell

void showToolbar();

Example

dhxComponent.cells(id).showToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

showView

shows the specified view, creates a new one if it doesn't exist

boolean showView(string name);

Parameters

name string view name

Returns

boolean true if view was accessed first time, false otherwise

Example

// here is an example how to initialize content
// in several views on demand inside of a cell

// 1) for the default view "def" we will simply attach an URL
// 2) for the "grid" view  we will attach menu and grid
// 3) and for the "tree" view we will attach toolbar and tree

var myMenu;
var myGrid;
var myToolbar;
var myTree;

// the default view is ready right after component initialization
dhxComponent.cells(id).attachURL("http://somedomain.com/page.html");

function initView(name) {
    // assuming that this function will be called after some user action
    // like a button click or some other
    var state = dhxComponent.cells(id).showView(name);
    if (state == true) {
        // first call, initializes corresponding components
        if (name == "grid") {
            myMenu = dhxComponent.cells(id).attachMenu();
            myGrid = dhxComponent.cells(id).attachGrid();
        } else if (name == "tree") {
            myToolbar = dhxComponent.cells(id).attachToolbar();
            myTree = dhxComponent.cells(id).attachTree();
        }
    }
}

Details

The default view name is "def", it is created automatically when a cell is created

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unloadView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Carousel dhtmlXCarouselCell API Methods

unloadView

unloads the specified view

void unloadView(string name);

Parameters

name string view name

Example

// create test view and switch to it
var state = dhxComponent.cells(id).showView("test_view");
console.log(state); // true

// attach some content
dhxComponent.cells(id).attachMenu();
dhxComponent.cells(id).attachGrid();

// go back to default view
var state = dhxComponent.cells(id).showView("def");
console.log(state); // false

// unload test_view
dhxComponent.cells(id).unloadView("test_view");

// open test_view again
var state = dhxComponent.cells(id).showView("test_view");
console.log(state); // true

// attach some content
dhxComponent.cells(id).attachMenu();
dhxComponent.cells(id).attachGrid();

// unload test_view
dhxComponent.cells(id).unloadView("test_view");

// check active view
var name = dhxComponent.cells(id).getViewName();
console.log(name); // "test_view"

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing Carousel on a Page DHTMLX Docs

Documentation
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
  • Initializing Carousel on a Page
    • Carousel source files
    • Constructor
    • Full-screen init
    • Init in an HTML element
    • Init in a window
    • Init in a cell of layout
    • Recommended init way
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

Initializing Carousel on a Page

Carousel source files

First, you need to include carousel js/css files on a page. In order to use dhtmlxCarousel as a separate component, you need to include its source files on the page. There are two source files you should use:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxcarousel.css">
    <script src="codebase/dhtmlxcarousel.js"></script>
</head>

But if you're working with the whole DHTMLX Suite, there's no need to include extra files - dhtmlx js/css files will be enough:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
    <script src="codebase/dhtmlx.js"></script>
</head>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Constructor

Then you can initialize Carousel object. For this purpose, you need to define a parent container on your page.

Assuming that we already have one:

<body>
    <div id="carouselObj" style="position: relative; width: 430px; height: 520px;">
        <!-- carousel body will be here later -->
    </div>
</body>

So you can init carousel by using the script below:

// init new instance
var myCarousel = new dhtmlXCarousel("carouselObj"); // parentId, animType, skin
// define cells dimension
myCarousel.setCellSize(290, 340); // width, height
// define offsets
myCarousel.setOffset(30, 15, 45); // top, left, item

By default, the "slide" animation type is set. You can redefine it by specifying the 2nd param. Possible values are: "slide", "flip", "cards".

The same statements are true for skin. It is detected automatically, but if you have several css included on your page, the skin from the last css file will be used. To manually specify the skin, please use the 3rd param.

Or using object API init:

var myCarousel = new dhtmlXCarousel({
    parent:         "carouselObj",  // id/object,a parent container for carousel
    skin:           "dhx_skyblue",  // string,carousel's skin, optional
    item_width:     "auto",         // string,width of attached item,"auto" by default
    item_height:    "auto",         // string,height of attached item,"auto" by default
    offset_left:    30,             // number,offset between cell and left/right edges
    offset_top:     15,             // number,offset between cell and top/bottom edges
    offset_item:    45              // number,offset between two nearest cells
    touch_scroll:   true            // boolean,true to enable scrolling cells by touch
});

Then add cells:

// with auto generated id
var id = myCarousel.addCell();
myCarousel.cells(id).attachComponent();

// or if you already know the id
myCarousel.addCell(id);
myCarousel.cells(id).attachComponent();

Full-screen init

Generally, to create a full-screen Carousel on a page, use the code as in:

<html>
<head>
<style>
    /* it's important to set width/height to 100% for fullscreen init */
    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        overflow: hidden;
    }

</style>
<script>
    var myCarousel;
    function doOnLoad() {
        myAcc = new dhtmlXCarousel({
            parent: document.body,  // parent container
            // config here
        });
    }
</script>
</head>
<body onload="doOnLoad();">

</body>
</html>

You can set offsets for Carousel in the full screen mode.

Init in an HTML element

It's easy to initialize dhtmlxCarousel in an HTML element by completing the steps below:

1) create an HTML element where the carousel will be placed later, don't forget to specify its width and height:

<div id="carouselObj" style="position: relative; width: 360px; height: 400px;"></div>

The height and width of the container can't be set in percentage, they are specified in pixels only.

2) create a dhtmlxCarousel object and place it into the HTML object that you've just created:

var myCarousel = new dhtmlXCarousel({
    parent: "carouselObj",  // id or object for parent container
    // config here
});
//or
var myCarousel = new dhtmlXCarousel({
    parent: document.getElementById("carouselObj"),
    // config here
});

Init in a window

To create a carousel in a window, do the following:

1) create a dhtmlxWindows object:

var dhxWins = new dhtmlXWindows();
var myWin = dhxWins.createWindow("w1", 20, 20, 600, 400);

The following parameters are passed to dhxWins.createWindow():

  • w1 - the id of the window;
  • 20, 20 - the left and the top positions of the window;
  • 600, 400 - the width and the height of the window.

2) call the attachCarousel method to render a carousel in the window:

var myCarousel = new myWin.attachCarousel();
// or using a more extended config
var myCarousel = new myWin.attachCarousel({
    // config here
});

Init in a cell of layout

To create a new carousel in a cell of a layout, do the following:

1) create a dhtmlXLayoutObject object:

var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L"
});

2) attach carousel to a cell of the layout with the attachAccordion method:

var myCarousel = myLayout.cells("a").attachCarousel();
// or using a more extended config
var myCarousel = myLayout.cells("a").attachCarousel({
    // config here
});

Recommended init way

<html>
<head>
<script>
    var myCarousel;
    function doOnLoad() {
        myCarousel = new dhtmlXCarousel({
            // config here
        });
    }
</script>
</head>
<body onload="doOnLoad();">

</body>
</html>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Carousel Skins DHTMLX Docs

Documentation
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
  • Initializing Carousel on a Page
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

Carousel Skins

There are three types of skins that can be applied for Carousel:

  • material

  • dhx_skyblue

  • dhx_web

  • dhx_terrace

The "material" skin is used by default. Depending on the attached CSS skin file, carousel will try to detect the skin automatically. If you have several attached css files, you need to force skin during initialization:

// init with script
var myCarousel = new dhtmlXCarousel("parentId", "slide", "dhx_web");
// or by using object API init
var myCarousel = new dhtmlXCarousel({
    skin: "dhx_web"
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Animation in Carousel DHTMLX Docs

Documentation
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
  • Initializing Carousel on a Page
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

Animation in Carousel

The Carousel component has three types of cells animation effects:

  • Slide animation

  • Flip animation

  • Cards animation

If the "slide" effect is applied, cells are switched by sliding movement.

Related sample: Slide animation

The "flip" effect allows switching cells during their rotation.

Related sample: Flip animation

The "cards" effect implies that cells move similar to cards from one deck to another one.

Related sample: Cards animation

The "slide" effect is used by default, so there's no need to specify it. If you need "flip" or "cards", use one of the following variants:

// init with script
var myCarousel = new dhtmlXCarousel("parentId", "flip");
// or by using object API init
myCarousel = new dhtmlXCarousel({
    effect: "flip"
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Working with Cells DHTMLX Docs

Documentation
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
  • Initializing Carousel on a Page
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
    • Adding/removing cells
    • Accessing cells
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

Working with Cells

Adding/removing cells

To add a new cell into a carousel, use the method addCell.

myCarousel.addCell(id, index);

The parameters are:

  • id - id of the added cell
  • index - index of the added cell

You can also use an autogenerated cell id:

var id = myCarousel.addCell();

To remove a cell from Carousel, use the remove method:

myCarousel.cells(id).remove();

Accessing cells

In order to work with carousel we need to get access to its items. For this purpose, you should use their ids which you defined with the addCell() method.

Items are referred to as cells. Thus, we can access any carousel's item in the following way:

var cell = myCarousel.cells(id);

The method will return the cell's object.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Components DHTMLX Docs

Documentation
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
  • Initializing Carousel on a Page
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
  • Attaching Components
    • Getting the attached component
    • Detaching components
    • Scheduler specificity
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

Attaching Components

Almost all DHTMLX components can be attached directly to a cell by the corresponding method.

Accordion
dhxComponent.cells(id).attachAccordion();
Carousel
dhxComponent.cells(id).attachCarousel();
Chart
dhxComponent.cells(id).attachChart();
DataView
dhxComponent.cells(id).attachDataView();
Editor
dhxComponent.cells(id).attachEditor();
Form
dhxComponent.cells(id).attachForm();
Grid
dhxComponent.cells(id).attachGrid();
Layout
dhxComponent.cells(id).attachLayout();
List
dhxComponent.cells(id).attachList();
Menu
dhxComponent.cells(id).attachMenu();
Ribbon
dhxComponent.cells(id).attachRibbon();
Scheduler
dhxComponent.cells(id).attachScheduler();
Sidebar
dhxComponent.cells(id).attachSidebar();
StatusBar
dhxComponent.cells(id).attachStatusBar();
Tabbar
dhxComponent.cells(id).attachTabbar();
Toolbar
dhxComponent.cells(id).attachToolbar();
Tree
dhxComponent.cells(id).attachTree();
TreeView
dhxComponent.cells(id).attachTreeView();

We highly recommend you to follow this way of attaching components, as it guarantees proper rendering and correct resizing of embedded components in relation to their parent container.

Please note that attaching of Menu, Ribbon, Toolbar and StatusBar into a cell has some peculiarities. For details check the article Attaching Menu/Status Bar.

Make sure you've included the corresponding .js/.css files of the related component on a page, for example:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxgrid.css">
    <script src="dhtmlxgrid.js"></script>
</head>

Getting the attached component

There is a possibility to get link to the attached component:

var attached = dhxComponent.cells(id).getAttachedObject();
if (window.dhtmlXGridObject != null && attached instanceof window.dhtmlXGridObject) {
    console.log("An attached grid detected");
}

Detaching components

// attach
var myAcc = dhxComponent.cells(id).attachAccordion({...});

// detach later
dhxComponent.cells(id).detachObject(true);
myAcc = null;

Scheduler specificity

Please note, the attachScheduler method differs from other attaching methods. The difference is that attachScheduler not only attaches the component but also initializes it - creates an instance with the predefined structure.

Therefore:

  • The attachScheduler method doesn't return a component object;
  • The attachScheduler method can be called only once;
  • If you need to set some configuration options for the scheduler, set them before attaching scheduler to the layout.
var myLayout = new dhtmlXLayoutObject(document.body, "3L");
myLayout.cells("a").setWidth(800);

// configure scheduler if needed
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
// then attach it to layout
myLayout.cells("a").attachScheduler(new Date(), "month");
// load some data
scheduler.load("../common/events.xml");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Menu/Status Bar DHTMLX Docs

Documentation
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
  • Initializing Carousel on a Page
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
  • Attaching Components
  • Attaching Menu/Status Bar
    • Attaching Menu
    • Attaching Toolbar
    • Attaching Ribbon
    • Attaching StatusBar
    • What else?
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

Attaching Menu/Status Bar

You can use Menu, Toolbar and Ribbon components as a menu bar and attach them to the top of a cell. A cell can also have a simple status bar at the bottom added with the help of the StatusBar component.

You can attach several of these components at a time together with other content of a Layout-based component.

Attaching Menu

1) Include dhtmlxMenu source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxmenu.css">
    <script src="dhtmlxmenu.js"></script>
</head>

2) Call the corresponding function:

var myMenu = dhxComponent.cells(id).attachMenu({
    // menu conf here
});

3) Learn more about dhtmlxMenu from the related documentation.

Attaching Toolbar

1) Include dhtmlxToolbar source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxtoolbar.css">
    <script src="dhtmlxtoolbar.js"></script>
</head>

2) Call the corresponding function:

var myToolbar = dhxComponent.cells(id).attachToolbar({
    // toolbar conf here
});

3) Learn more about dhtmlxToolbar from the related documentation.

Attaching Ribbon

1) Include dhtmlxRibbon source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxribbon.css">
    <script src="dhtmlxribbon.js"></script>
</head>

2) Call the corresponding function:

var myRibbon = dhxComponent.cells(id).attachRibbon({
    // ribbon conf here
});

3) Learn more about dhtmlxRibbon from the related documentation.

Attaching StatusBar

1) There's no need to include extra .js/.css files.

2) Call the corresponding function:

var sbObj = dhxComponent.cells(id).attachStatusBar({
    // status bar config here, optional
    text:   "some text here",   // status bar text
    height: 35                  // custom height
});

// set status bar text
sbObj.setText("New text");

// get status bar text
var text = sbObj.getText();

What else?

1) You can show/hide any attached control without unloading it from memory, for example:

dhxComponent.cells(id).showMenu();
dhxComponent.cells(id).hideMenu();

2) You can detach and unload the attached control completely, for example:

// init
var myMenu = dhxComponent.cells(id).attachMenu({...});

// detach later
dhxComponent.cells(id).detachMenu();
myMenu = null;

3) You can get link to the component's instance:

var myMenu = dhxComponent.cells(id).getAttachedMenu();
if (myMenu == null) {
    // not inited
    myMenu = dhxComponent.cells(id).attachMenu({...});
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching HTML DHTMLX Docs

Documentation
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
  • Initializing Carousel on a Page
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
    • Attaching HTML object
    • Appending HTML object
    • Attaching HTML string
    • Detaching object
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

Attaching HTML

There is a possibility to attach HTML objects and HTML strings to a cell. Several HTML objects can be attached at a time.

Attaching HTML object

<div id="objId">Some text</div>
// attach by id
dhxComponent.cells(id).attachObject("objId");
// or attach by link
var obj = document.getElementById("objId");
dhxComponent.cells(id).attachObject(obj);

in this mode a cell doesn't render scrolls by default, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Appending HTML object

This way is the same as attaching an object, but the current cell's content isn't removed:

dhxComponent.cells(id).appendObject("otherObjId");

in this mode a cell will add scrolls automatically, so there's no need to specify width/height to the attached object.

Attaching HTML string

dhxComponent.cells(id).attachHTMLString('<div id="objId">Some text</div>');

in this mode scrolls aren't rendered by default as well, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Detaching object

Any attached object or HTML string can be detached from a cell with the help of the detachObject() method:

// attach
dhxComponent.cells(id).attachObject("objId");

// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to "true", the object will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching URL DHTMLX Docs

Documentation
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
  • Initializing Carousel on a Page
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
    • Attaching via iFrame
    • Attaching via AJAX
    • Using onContentLoaded event
    • Accessing the attached content
    • Accessing parent from attached page
    • Detaching URLs
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

Attaching URL

A cell has a possibility to attach URLs. It can be done by using iFrames and AJAX calls.

In the case of iFrames call, an iFrame will be created inside of a cell, and your URL will be attached as a separate page (it will have access to your code as you will have control over the content inside of the iFrame).

In the case of AJAX call, the content returned by the server will be placed inside of a div.

  • a common function used for both methods is attachURL(), the only difference is that the 2nd argument is set to true for AJAX call
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
  • loading is async, so to proceed with content, you need to use the "onContentLoaded" event

Attaching via iFrame

GET request

dhxComponent.cells(id).attachURL("page.html");

POST request without params

dhxComponent.cells(id).attachURL("page.html", null, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

Attaching via AJAX

GET request

dhxComponent.cells(id).attachURL("page.html", true);

POST request without params

dhxComponent.cells(id).attachURL("page.html", true, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Using onContentLoaded event

As it was said above, loading is async, so to proceed with content, you need to use the "onContentLoaded" event:

// firstly add the event
dhxComponent.attachEvent("onContentLoaded", function(id){
    // page.html id loaded, your code here
});

// now attach a URL
dhxComponent.cells(id).attachURL("page.html");

Accessing the attached content

This part is related to the iFrame-mode only.

Assuming the code below has been attached:

<html>
<head>
    <script>
        function myFunc() {
            console.log("I'm attached function");
        }
    </script>
</head>
<body>
    <div id="attachedObject">
        Some text here
    </div>
</body>
</html>

Firstly, you need to get an iFrame object from the cell where the attached content is located:

var ifr = dhxComponent.cells(id).getFrame();

Now you can access the elements:

// make sure an element exists
var elem = ifr.contentWindow.document.getElementById("attachedObject");
elem.innerHTML = "Some new text here";

and call some JS code:

// make sure function exists and located in the iFrame's window scope
ifr.contentWindow.someFunc();

Accessing parent from attached page

This part is related to the iFrame-mode only.

If you need to make some actions with a cell from the attached page (for example, hide the window by clicking some button on the page or collapse a layout's cell) this can be done in the following way:

<!-- this attached page.html -->
<script>
    function controlParent() {
        parent.myLayout.cells(id).collapse();   // collapse layout's cell
        parent.myWins.window(id).hide();        // hiding a window
    }
</script>

Any variable or function can be acccessed but make sure it is declared in a global window scope.

Detaching URLs

Any attached URL can be detached from a cell by using the detachObject() method:

// attach
dhxComponent.cells(id).attachURL("page.html");

// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to true, the object (iFrame or a div with AJAX content) will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Google Maps DHTMLX Docs

Documentation
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
  • Initializing Carousel on a Page
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

Attaching Google Maps

There's a possibility to attach Google Maps to a cell.

Firstly, include the corresponding .js file on your page:

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>

And then initialize a cell with a map inside on the page:

var GMaps = myLayout.cells("b").attachMap(); // applies default parameters

// or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = myLayout.cells(id).attachMap(mapParams);

Related sample: Integration with Google Maps

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Progress Bar DHTMLX Docs

Documentation
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
  • Initializing Carousel on a Page
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

Progress Bar

A progress control is a state indicator. It can be used to indicate content loading or updating. While the cell is visually disabled and not accessible for user actions the progress is enabled.

This functionality will not start automatically when some content is loaded into a cell, it needs to be triggered by calling the appropriate API method.

Here is the code for a cell's progress control:

// turning progress on
dhxComponent.cells(id).progressOn();

// turning progress off
dhxComponent.cells(id).progressOff();

In practical scenario, you can place the progressOn() call before loading data in some component, and progressOff() in data loading callback, for example:

var myLayout;
var myGrid;

// init layout and attach grid
function initControls() {
    myLayout = new dhtmlXLayoutObject({
        parent: "layoutObj",
        pattern: "2U"
    });
    myGrid = myLayout.cells("a").attachGrid();
    loadGridData(true);
}

// load/reload grid data
function loadGridData(firstLoad) {
    myLayout.cells("a").progressOn();
    if (firstLoad == true) {
        myGrid.load("server.php", doOnGridLoaded);
    } else {
        myGrid.updateFromXML("server.php", true, false, doOnGridLoaded);
    }
}

// grid dataload callback
function doOnGridLoaded() {
    myLayout.cells("a").progressOff();
}
<body onload="initControls();">
    <div id="layoutObj" style="width: 600px; height: 400px;"></div>
    <input type="button" value="refresh grid" onclick="loadGridData();"></div>
</body>

Each time you will click the button, the loadGridData() method will be called and you will see the progress of loading over the cell with grid.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Different Content in the Same Cell DHTMLX Docs

Documentation
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
  • Initializing Carousel on a Page
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

Different Content in the Same Cell

Cells have a possibility to show different content in the same cell. This feature is called "views". Each cell shows the view "def" by default. You can easily switch to the other view and init different content.

Let's see how it works. We will create a "3L" layout and attach some components to the cell "b".

var myLayout = new dhtmlXLayoutObject("layoutObj", "3L");

Currently, the view "def" is selected. There's no need to call any extra commands to make it active, just attach the content you need:

var myMenu = myLayout.cells("b").attachMenu();
var myGrid = myLayout.cells("b").attachGrid();

Now let's show another view and attach some other content to it:

myLayout.cells("b").showView("tree");

At this moment the cell hides the currently active views ("def" in our case) and shows the requested one. You can name the view as you wish, it's necessary just to determine which view to show. As we haven't attached any components, the "tree" view looks like an empty cell.

Now let's attach some content to the view "tree":

myTree = myLayout.cells("b").attachTree();
myToolbar = myLayout.cells("b").attachToolbar();

Now let's go back to the view "def" and see what happens:

myLayout.cells("b").showView("def");

As you can see, now the view "tree" becomes hidden and the view "def" is restored and active.

In the above example we're using layout just to show you how the described functionality works. Views are the feature of a cell, so they are enabled in all the components that use cells: accordion, layout, tabbar and windows.

Related sample: Views

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Coloring Text Selection DHTMLX Docs

Documentation
  • dhtmlXCarousel API
  • dhtmlXCarouselCell API
  • Initializing Carousel on a Page
  • Carousel Skins
  • Animation in Carousel
  • Working with Cells
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Carousel

Coloring Text Selection

Sometimes you need to make the selected text look like a common skin. To set a custom color for the selection, use the following technique:

1) Define a CSS class with ::selection and ::-moz-selection pseudo-elements inside:

.my_style::selection {
    color: #454544;
    background-color: #fffcda;
}
.my_style::-moz-selection {
    color: #454544;
    background-color: #fffcda;
}

2) Set the above specified CSS class for the required object:

<div id="layoutObj"></div>
<div id="objId">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
<div id="objId2" class="my_style">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "2U",
    cells: [
        {id: "a", text: "Default selection"},
        {id: "b", text: "Custom selection"}
    ]
});

myLayout.cells("a").attachObject("objId");
myLayout.cells("b").attachObject("objId2");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Chart DHTMLX Docs

Documentation
  • Chart
    • dhtmlXChart API
    • Chart Components Overview
    • Initializing Chart
    • Object Constructor
    • Data Loading
    • Multiple Graphs on a Chart
    • Chart Coloring
    • Configuration Properties
    • The List of Charts
    • Area Chart
    • Bar Chart
    • Line Chart
    • Pie Chart
    • Radar Chart
    • Scatter Chart
    • Scales
    • Labels
    • Legend
    • Tooltips
    • Adding and Deleting Items
    • Grouping Data Objects
    • Events
    • Sorting
    • Filtering
    • Grid Integration
Start

Chart

dhtmlxChart is a powerful tool to create a wide variety of charts for use in web applications. Every feature of the library is carefully created to facilitate your chart creation.

It provides a number of chart types with various sub-types, synchronous representation of several data properties on the same chart, both 2D and 3D presentation, different data sources, interactive actions and tooltips.

dhtmlxChart is completely written in JavaScript and ready to be used in any HTML page.

API reference
  • dhtmlXChart API
Related resources
  • You may download dhtmlxChart from dhtmlx.com
  • Check online samples for dhtmlxChart
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Creating Chart

  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
Gives you a brief summary of dhtmlxChart application. Dwells on Chart initialization and loading data into it.

Exploring Chart Types

  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
Introduces the available Chart types and peculiarities of their initialization.

Configuring Chart

  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
 Describes the possibilities of adding extra graphs, coloring charts and gives instructions on configuring particular Chart types.

Formatting Chart

  • Scales
  • Labels
  • Legend
  • Tooltips
 Tells about the variants of Chart appearance customization: setting scales, specifying labels, using a legend and showing tooltips.

Manipulating Chart Elements

  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
 Discusses main actions which can be performed with Chart items and shows the steps of creating Grid-Chart integration.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXChart API DHTMLX Docs

Documentation
  • dhtmlXChart API
    • Methods
    • Events
    • Others
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

dhtmlXChart API

Methods
add | adds the new data object and redraws a chart
addSeries | adds the new data property representation and redraws the chart. The method allows to represent several data propeties on one chart at the same time
attachEvent | adds any user-defined handler to available events
clearAll | removes all data from component and repaints component.
dataCount | returns the total count of items in a chart. In case of dynamic loading the method returns the expected count of items
define | configures a property of chart
destructor | destructs the chart object
detachEvent | detaches a handler from an event
exists | returns true if the item with defined ID already exists
filter | filters dataview by provided parameters
first | returns ID of first item ( item with index == 0 )
get | returns hash of data, related to specific ID
group | groups data by a certain property. The method get an object with the following properties as a parameter:
hideSeries | hides a series with the specified index
idByIndex | returns the ID of item with the specified index
indexById | returns the index of the item with the specified ID
last | returns the ID of the last item ( item with index == dataCount-1 )
load | loads data to the component via XML or JSON, usually data-values pairs
next | returns the ID of the next item ( item with index == current + 1 )
parse | parses an object or a string and fill the chart with the parsed items
previous | returns the ID of the previous item ( item with index == current - 1 )
refresh | redraws the whole chart
remove | removes an item by its ID and redraws a chart.
render | draws a chart according to the specified configuration and data
serialize | serialize component back to json
set | associates hash of data with some ID
showSeries | shows a series with the specified index
sort | adds any user-defined handler to available events
ungroup | ungroups chart
update | updates some item in the chart
Events
onAfterAdd | occurs after an item is added to datastore
onAfterDelete | called after an item is deleted
onAfterRender | called after view was repainted
onAfterSort | occurs after a dataset is sorted
onBeforeAdd | occurs before an item is adding to datastore
onBeforeContextMenu | called on right mouse click
onBeforeDelete | fired before an item is deleted
onBeforeRender | called before a chart is re-painted
onBeforeSort | invokes before a dataset is sorted
onItemClick | occurs when an item is clicked
onItemDblClick | called when an item is double-clicked
onLegendClick | fires on clicking a legend item
onMouseMove | occurs when mouse pointer is pointed over an item
onMouseMoving | fires when mouse pointer is moved over a chart
onMouseOut | called when the mouse pointer is moved out of item area
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Other
$view top html node of component
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • add
    • addSeries
    • attachEvent
    • clearAll
    • dataCount
    • define
    • destructor
    • detachEvent
    • exists
    • filter
    • first
    • get
    • group
    • hideSeries
    • idByIndex
    • indexById
    • last
    • load
    • next
    • parse
    • previous
    • refresh
    • remove
    • render
    • serialize
    • set
    • showSeries
    • sort
    • ungroup
    • update
  • Events
  • Others
Start Chart dhtmlXChart API

Methods

add | adds the new data object and redraws a chart
addSeries | adds the new data property representation and redraws the chart. The method allows to represent several data propeties on one chart at the same time
attachEvent | adds any user-defined handler to available events
clearAll | removes all data from component and repaints component.
dataCount | returns the total count of items in a chart. In case of dynamic loading the method returns the expected count of items
define | configures a property of chart
destructor | destructs the chart object
detachEvent | detaches a handler from an event
exists | returns true if the item with defined ID already exists
filter | filters dataview by provided parameters
first | returns ID of first item ( item with index == 0 )
get | returns hash of data, related to specific ID
group | groups data by a certain property. The method get an object with the following properties as a parameter:
hideSeries | hides a series with the specified index
idByIndex | returns the ID of item with the specified index
indexById | returns the index of the item with the specified ID
last | returns the ID of the last item ( item with index == dataCount-1 )
load | loads data to the component via XML or JSON, usually data-values pairs
next | returns the ID of the next item ( item with index == current + 1 )
parse | parses an object or a string and fill the chart with the parsed items
previous | returns the ID of the previous item ( item with index == current - 1 )
refresh | redraws the whole chart
remove | removes an item by its ID and redraws a chart.
render | draws a chart according to the specified configuration and data
serialize | serialize component back to json
set | associates hash of data with some ID
showSeries | shows a series with the specified index
sort | adds any user-defined handler to available events
ungroup | ungroups chart
update | updates some item in the chart
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


add DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

add

adds the new data object and redraws a chart

void add(object obj);

Parameters

obj object a data object

Example

myChart.add({
    id: 1,
    value: 5.64,
    label: 2009
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addSeries DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

addSeries

adds the new data property representation and redraws the chart. The method allows to represent several data propeties on one chart at the same time

void addSeries(object obj,string view,string value,string color,string label);

Parameters

obj | object | a data object
view | string | the chart type
value | string | property of dataset which representation you'd like to add to the chart
color | string | the template for the color of the property items
label | string | the template for the labels of the property items

Example

myChart.addSeries({
    value:"#sales1#",
    color:"#45abf5",
    label:"#sales1#"
});

Details
  • not applicable to Pie and Scatter charts
See also
  • API
    • hideSeries
    • showSeries
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearAll DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

clearAll

removes all data from component and repaints component.

void clearAll();

Example

myChart.clearAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dataCount DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

dataCount

returns the total count of items in a chart. In case of dynamic loading the method returns the expected count of items

void dataCount();

Example

var count = myChart.dataCount();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


define DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

define

configures a property of chart

void define(string property,string value);

Parameters

property | string | the name of mode or property which needs being configured
value | string | the value which needs being assigned to mode or property, true by default

Example

myChart.define("sort",{
    by:"#sales#",dir:"asc",as:"int"
})

Details

To apply the new configuration parameters you need to call refresh() method.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


destructor DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

destructor

destructs the chart object

void destructor();

Example

myChart.destructor();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


exists DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

exists

returns true if the item with defined ID already exists

void exists(string|number id);

Parameters

id string|number id of item in question

Example

var check = myChart.exists(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


filter DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

filter

filters dataview by provided parameters

void filter(string key,string value);

Parameters

key | string | name of property, or custom filtering method
value | string | value which will be used for filtering

Example

//shows all items where Publisher == "Test"
myChart.filter("#Publisher#","Test");
//shows all items where Publisher starts from "Test"
myChart.filter(function(obj,value){
    if (obj.Publisher.indexOf(value)==0) return true;
    return false;
},"Test");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


first DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

first

returns ID of first item ( item with index == 0 )

void first();

Example

var id = myChart.first();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


get DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

get

returns hash of data, related to specific ID

void get(string|number id);

Parameters

id string|number id of item in question

Example

var data = myChart.get(id);
alert(data.sales);
myChart.sales = 5.6; //beware that you need to force refresh

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


group DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

group

groups data by a certain property. The method get an object with the following properties as a parameter:

void group(string by,object map);

Parameters

by | string | defines the property that need being used to group data objects
map | object | an object that defines the properties of the grouped objects

Example

myChart.group({
    by:"#company#",
    map:{
        sales:["#sales#","sum"]
    }
});

Details

Properties of grouped objects set in "map" are defined by an array. The first element of this array is a template with a property from original data, the second one – the functor which needs being applied to all values of this property in a group: "sum", "max", "min" or Custom Grouping Functor

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideSeries DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

hideSeries

hides a series with the specified index

void hideSeries(number index);

Parameters

index number the series index. The 1st series has '0' index, the 2nd - '1', etc

Example

myChart.hideSeries(2);

See also
  • API
    • addSeries
    • showSeries
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


idByIndex DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

idByIndex

returns the ID of item with the specified index

void idByIndex(number index);

Parameters

index number index of the item in question

Example

var id = myChart.idByIndex(index);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


indexById DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

indexById

returns the index of the item with the specified ID

void indexById(string|number id);

Parameters

id string|number ID of the item in question

Example

var index = myChart.indexById(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


last DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

last

returns the ID of the last item ( item with index == dataCount-1 )

void last();

Example

var id = myChart.last();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


load DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

load

loads data to the component via XML or JSON, usually data-values pairs

promise load(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.load({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.load('<data><node id="a1".../></data>');

// json/xml from server
myComponent.load("server/data.xml");

// local json/xml with callback
myComponent.load({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.load('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.load("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.load(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure the response has the header "Content-Type: text/xml" for the XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


next DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

next

returns the ID of the next item ( item with index == current + 1 )

void next(string|number id);

Parameters

id string|number id of item in question

Example

var next_id = myChart.next(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


parse DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

parse

parses an object or a string and fill the chart with the parsed items

void parse(string|object|array data,string type);

Parameters

data | string|object|array | the data source
type | string | the type of data

Example

myChart.parse("<data> ... </data>");
//or
myChart.parse([[1,2015,35],[2,2016,50],...],"jsarray");

Details
  • "xml" - can be presented as a string only
  • "html" - can be presented as a string only
  • "json" - can be presented as a string or object
  • "jsarray" - can be presented as a string or array
  • "csv" - can be presented as a string only
See also
  • Articles
    • Data Loading
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


previous DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

previous

returns the ID of the previous item ( item with index == current - 1 )

void previous(string|number id);

Parameters

id string|number the id of the item in question

Example

var prev_id = myChart.previous(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


refresh DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

refresh

redraws the whole chart

void refresh();

Example

myChart.refresh();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


remove DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

remove

removes an item by its ID and redraws a chart.

void remove(number id);

Parameters

id number item id

Example

// item with id = 12
myChart.remove(12);
// the 6th item in a chart
myChart.remove(myChart.idByIndex(5));
// the 1st item
myChart.remove(myChart.first());

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


render DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

render

draws a chart according to the specified configuration and data

void render();

Example

myChart.render();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


serialize DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

serialize

serialize component back to json

object serialize();

Returns

object data from the chart as json object

Example

var data = chart.serialize();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


set DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

set

associates hash of data with some ID

void set(string|number id,object hash);

Parameters

id | string|number | the id of the item in question
hash | object | javascript object, which contains data

Example

myChart.set(id,{
    property:value
});

Details

Method was added as pair for "get", but so far there is no any practical use-cases, which can be based on it.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showSeries DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

showSeries

shows a series with the specified index

void showSeries(number index);

Parameters

index number the series index. The 1st series has '0' index, the 2nd - '-1', etc

Example

myChart.showSeries(0);

See also
  • API
    • hideSeries
    • addSeries
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


sort DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

sort

adds any user-defined handler to available events

void sort();

Example

myChart.sort("Year","asc","int");
myChart.sort(function(a,b){
    return a.Version > b.Version ? 1 : -1;
},"asc");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ungroup DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

ungroup

ungroups chart

void ungroup();

Example

mychart.ungroup();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


update DHTMLX Docs

Documentation
  • add
  • addSeries
  • attachEvent
  • clearAll
  • dataCount
  • define
  • destructor
  • detachEvent
  • exists
  • filter
  • first
  • get
  • group
  • hideSeries
  • idByIndex
  • indexById
  • last
  • load
  • next
  • parse
  • previous
  • refresh
  • remove
  • render
  • serialize
  • set
  • showSeries
  • sort
  • ungroup
  • update
Start Chart dhtmlXChart API Methods

update

updates some item in the chart

void update(string id,object data);

Parameters

id | string | id of item
data | object | data object

Example

chart.update(123, { text:"abc", value:22 });

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onAfterAdd
    • onAfterDelete
    • onAfterRender
    • onAfterSort
    • onBeforeAdd
    • onBeforeContextMenu
    • onBeforeDelete
    • onBeforeRender
    • onBeforeSort
    • onItemClick
    • onItemDblClick
    • onLegendClick
    • onMouseMove
    • onMouseMoving
    • onMouseOut
    • onXLE
    • onXLS
  • Others
Start Chart dhtmlXChart API

Events

onAfterAdd | occurs after an item is added to datastore
onAfterDelete | called after an item is deleted
onAfterRender | called after view was repainted
onAfterSort | occurs after a dataset is sorted
onBeforeAdd | occurs before an item is adding to datastore
onBeforeContextMenu | called on right mouse click
onBeforeDelete | fired before an item is deleted
onBeforeRender | called before a chart is re-painted
onBeforeSort | invokes before a dataset is sorted
onItemClick | occurs when an item is clicked
onItemDblClick | called when an item is double-clicked
onLegendClick | fires on clicking a legend item
onMouseMove | occurs when mouse pointer is pointed over an item
onMouseMoving | fires when mouse pointer is moved over a chart
onMouseOut | called when the mouse pointer is moved out of item area
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterAdd DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onAfterAdd

occurs after an item is added to datastore

void onAfterAdd(object obj,number index){ ... };

Parameters

obj | object | data for a new item
index | number | an index, at which new item was added

Example

myChart.attachEvent("onAfterAdd", function (obj, index){
//any custom logic here
});

Details

Event name is case insensitive.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterDelete DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onAfterDelete

called after an item is deleted

void onAfterDelete(string|number id){ ... };

Parameters

id string|number id of item in question

Example

myChart.attachEvent("onAfterDelete", function (id){
//any custom logic here
});

Details

Event name is case insensitive.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterRender DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onAfterRender

called after view was repainted

void onAfterRender(){ ... };

Example

chart.attachEvent("onAfterRender", function(){
    //custom code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterSort DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onAfterSort

occurs after a dataset is sorted

void onAfterSort(string by,string dir,string as){ ... };

Parameters

by | string | a template of sort-by field
dir | string | a direction of sorting
as | string | a type of sorting

Example

myChart.attachEvent("onAfterSort", function (by, dir, as){
//any custom logic here
});

Details

Event name is case insensitive.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeAdd DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onBeforeAdd

occurs before an item is adding to datastore

void onBeforeAdd(object obj,string|number index){ ... };

Parameters

obj | object | data for a new item
index | string|number | an index, at which a new item will be added

Example

myChart.attachEvent("onBeforeAdd", function (obj, index){
//any custom logic here
});

Details

Event can be blocked, returning false will prevent normal reaction of component.

Event name is case insensitive.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeContextMenu DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onBeforeContextMenu

called on right mouse click

void onBeforeContextMenu(string id,Event e){ ... };

Parameters

id | string | id of item on which right click occurs
e | Event | native event object

Example

some.attachEvent("onBeforeContextMenu", function(id, e){
     //custom code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDelete DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onBeforeDelete

fired before an item is deleted

void onBeforeDelete(string|number id){ ... };

Parameters

id string|number the id of an item

Example

myChart.attachEvent("onBeforeDelete", function (id){
//any custom logic here
});

Details

Event can be blocked, returning false will prevent normal reaction of component.

Event name is case insensitive

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeRender DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onBeforeRender

called before a chart is re-painted

void onBeforeRender(object data){ ... };

Parameters

data object a datastore, which is used for rendering

Example

myChart.attachEvent("onBeforeRender", function (data){
//any custom logic here
});

Details

Event can be blocked, returning false will prevent normal reaction of component.

Event name is case insensitive

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeSort DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onBeforeSort

invokes before a dataset is sorted

void onBeforeSort(string by,string dir,string as){ ... };

Parameters

by | string | a template of sort-by field
dir | string | a direction of sorting
as | string | a type of sorting

Example

myChart.attachEvent("onBeforeSort", function (by, dir, as){
//any custom logic here
});

Details

Event can be blocked, returning false will prevent normal reaction of component.

Event name is case insensitive.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onItemClick DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onItemClick

occurs when an item is clicked

void onItemClick(string|number id,Event ev,string trg){ ... };

Parameters

id | string|number | an id of the clicked item
ev | Event | a native event object
trg | string | a target HTML element

Example

myChart.attachEvent("onItemclick", function (id, ev, trg){
//any custom logic here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onItemDblClick DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onItemDblClick

called when an item is double-clicked

void onItemDblClick(string|number id,Event ev,string trg){ ... };

Parameters

id | string|number | an id of the clicked item
ev | Event | a native event object
trg | string | a target HTML element

Example

myChart.attachEvent("onItemdblclick", function (id, ev, trg){
//any custom logic here
});

Details

Event name is case insensitive.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onLegendClick DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onLegendClick

fires on clicking a legend item

void onLegendClick(object ev,string seriesIndex,object node){ ... };

Parameters

ev | object | a native click event object
seriesIndex | string | id of the legend item (series index)
node | object | an html element

Example

myChart.attachEvent("onLegendClick",function(ev, seriesIndex, node){
     // your code
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseMove DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onMouseMove

occurs when mouse pointer is pointed over an item

void onMouseMove(string|number id,Event ev,string trg){ ... };

Parameters

id | string|number | an id of the item in the question
ev | Event | a native event object
trg | string | a target HTML element

Example

myChart.attachEvent("onMousemove", function (id, ev, trg){
//any custom logic here
});

Details

Event name is case insensitive.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseMoving DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onMouseMoving

fires when mouse pointer is moved over a chart

void onMouseMoving(Event ev){ ... };

Parameters

ev Event a native event object

Example

myChart.attachEvent("onMousemoving", function (ev){
//any custom logic here
});

Details

Event name is case insensitive.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseOut DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onMouseOut

called when the mouse pointer is moved out of item area

void onMouseOut(Event ev){ ... };

Parameters

ev Event a native event object

Example

myChart.attachEvent("onMouseout", function (ev){
//any custom logic here
});

Details

Event name is case insensitive.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterRender
  • onAfterSort
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeRender
  • onBeforeSort
  • onItemClick
  • onItemDblClick
  • onLegendClick
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onXLE
  • onXLS
Start Chart dhtmlXChart API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • $view
Start Chart dhtmlXChart API

Others

$view top html node of component
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


$view DHTMLX Docs

Documentation
  • $view
Start Chart dhtmlXChart API Others

$view

top html node of component

Node $view;

Example

var node = some.$view;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Chart Components Overview DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Chart Components Overview

In many cases, developers need to include different types of charts to represent data. dhtmlxChart gives you such an opportunity. Depending on the purpose of an application and data, a developer can select the most suitable type:

  • Bar chart
  • Line chart
  • Area chart
  • Pie chart
  • Radar chart
  • Scatter chart

For instance, if you need to show how currency has changed over the last month or how the world population has increased over the last five years, use the Line Chart. It's the best variant when your data has more than 10 points and you want to show dynamics over several months or years.

On other side, if you need to accentuate data at separate times and you have less then 10 data points, Bar Chart is the best choice for you.

When there is a necessity to show how a separate data value adds up to the total or which part of the whole this value represents, you should use the Area Chart as it was developed exactly for these purposes.

Radar charts are useful when you want to monitor how several different factors relate to one item (a center point) and compare their aggregate values.

Scatter charts are generally used to display and compare numeric values that have two variables (such as most scientific, statistical and engineering data) for detecting different groupings or patterns.

Finally, when the words 'proportion', 'percentage', 'share' describe what you need in the best way, opt for the Pie Chart. For example, if you want to put your company in the best light by comparing it with business rivals, you can't even imagine a more suitable chart type!

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing Chart DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
    • Step 1. Including source files
    • Step 2. Setting Chart container
    • Step 3. Specifying data
    • Step 4. Creating object constructor
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Initializing Chart

To initialize a chart object in an application, you need to take the following steps:

  1. Include related js and css files
  2. Place a chart container on a page
  3. Define data for a chart
  4. Call an initialization script

Step 1. Including source files

To start working with dhtmlxChart, you need to include chart js/css files on a page.

In order to use dhtmlxChart as a separate component, you need to include its source files on the page. There are two of them:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxchart.css">
    <script src="codebase/dhtmlxchart.js"></script>
</head>

If you use dhtmlxChart as a part of "dhtmlxSuite" package, you need to have 2 files included:

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

dhtmlxchart.js/.css files are part of dhtmlx.js/.css, so there is no need to include them separately.

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Step 2. Setting Chart container

Specify an HTML container for your future chart.

<div id=" chart_container" style="width:280px;height:250px;"></div>

Step 3. Specifying data

Specify data that will be present in a chart. They can have json, xml, csv or js array format.

var data = [
    { "sales":2.9, "year":"2000" },
    { "sales":3.5, "year":"2001" },
      …
    { "sales":7.6, "year":"2009" }
];
  ...
chart.parse(data,"json");

Step 4. Creating object constructor

Create an object constructor. It can have various parameters, but 3 parameters are mandatory in order for a chart to be rendered:

  • view – (string) a chart view (e.g. "pie")
  • container – (id) an id of an HTML container where chart will be initialized
  • value – (string) a data value that a chart presents ("value" by default)

All other parameters are optional.

var chart =  new dhtmlXChart({
    view: "pie",
    container: "chart_container",
    value: "#sales#",
    label: "#year#"
});

It is highly recommended to call a chart constructor from the onload event of a page. Otherwise, there may be problems with correct rendering.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
    • Syntax
    • Code snippet
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Object Constructor

Constructor is used to create an object and set its initial parameters.

Syntax

var myChart = new dhtmlChart(obj);

where:

  • view - specifies a chart type;
  • container - specifies an HTML container for a chart;
  • value - specifies data that will be presented in a chart.

Code snippet

var myChart = new dhtmlChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#"
});

The code snippet shows how to create a dhtmlXChart object.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Data Loading DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
    • JSON
    • XML
    • CSV
    • JS Array
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Data Loading

Data can be loaded from external files or resources available on the client side. Charts support the following data types:

  • "json"
  • "xml"
  • "jsarray"
  • "csv"

Data from an external file are loaded by the load() method.

Loading is asynchronous.

chart.load(url, function(){
    alert("data is really loaded");
    // any operations with data can be placed here
},datatype);

When data is already available on the client side, you can use the parse() method:

chart.parse(data, datatype);

JSON

Here is an example of loading from a JSON file:

chart.load("some.json", "json");

and from a JSON object:

chart.parse(data,"json");

where the content of the "some.json" or of a data object is:

[
   { "id":"1", "sales":7.4, "year":2006 },
   { "id":"2", "sales":9.0, "year":2007 },
   { "id":"3", "sales":7.3, "year":2008 },
   { "id":"4", "sales":7.6, "year":2009 }
];

XML

chart.load("some.xml", "xml");
// or
chart.parse(someXMLString,"xml");

There aren't any requirements for incoming XML (it can be in any format), all top-level tags will be converted to objects.

<data>
    <item id="1">
       <sales>7.3</sales>
       <year>2008</year>
    </item>
    <item id="2">
       <sales>7.6</sales>
       <year>2009</year>
    </item>
</data>

The names of top-level tags don't matter.

The attributes of the top-level tags (<item> in the code snippet showed above) and values of the nested tags will be available as properties in a template and for scripting. If you want to process only tags with specific names, you can change the xpath used for data collecting:

dhtmlx.dataDriver.xml.records = "/data/item"; // select only item tags

CSV

Data in in the CSV format doesn't contain names for values, so they are auto-named. The first value will be accessible as "data0", the second one as "data1", etc. IDs are auto-generated.

chart.load("some.csv", "csv");
//or
chart.parse(someCSVString, "csv");
"1", "9.0", "2007"
"2", "7.3", "2008"
"3", "7.6", "2009"

You can configure row and line separators as follows:

dhtmlx.dataDriver.csv.row = "n";
dhtmlx.dataDriver.csv.cell= ",";

JS Array

Data defined as a JS array doesn't contain names for values. The values are accessible the same way as in CSV: "data0", "data1", etc.

chart.load("some.js", "jsarray");
// or
chart.parse(data, "jsarray");

Where the content of the "some.js" or of a data array is:

[[1, 7.4, "2006"],
[2, 9.0, "2007"],
[3, 7.3, "2008"],
[4, 7.6, "2009"]]
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Multiple Graphs on a Chart DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Multiple Graphs on a Chart

Generally, to add an additional graph to a chart you should use the addSeries method.

As a parameter, the method takes an object of the graph you'd like to add to the chart. The graph is specified in a standard way.

Single graph

var barChart =  new dhtmlXChart({
    view:"bar",
    container:"chartBox",
    value:"#sales#",
    color: "#58dccd",
    xAxis:{ template:"'#year#" }
});

Multiple graphs

var barChart =  new dhtmlXChart({..});

barChart.addSeries({
     view: "line",
     item:{  radius:0 },
     line:{  color:"#36abee" },
     value:"#sales3#"
});

If you add to the chart a graph of the same type, you can omit the view attribute:

Single graph

var barChart =  new dhtmlXChart({
    view:"bar",
    container:"chartBox",
    value:"#sales#",
    xAxis:{ template:"'#year#" }
});

Multiple graphs

var barChart =  new dhtmlXChart({..});

barChart.addSeries({
    value:"#sales2#",
    color:"#a7ee70"
});

Related methods

  • addSeries - adds the new data property representation
  • hideSeries - hides a series with the specified index
  • showSeries - shows a series with the specified index
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Chart Coloring DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
    • Fixed color
    • Color template
    • Color gradient
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Chart Coloring

The library supports different color variations. If color makes no matter, developer can use a default value. Otherwise, color can be specified with the definite value or with a function.

Fixed color

In this case all chart elements have one color. The method is more appropriate for Bar Charts than for Pie Charts.

var chart =  new dhtmlXChart({
    color:"#66cc33",
    …
})

Color template

In this case the color of Chart elements is specified by the template instead of the fixed value:

/*color is set in data object*/
var data = [
    { sales:"7.3", year:"2008", color:"#880000"},
    { sales:"4.8", year:"2009", color:"#000088"}
];
var chart1 =  new dhtmlXChart({
    …
    color:"#color#"
})
/*colors are set depending on object values*/
var chart2 =  new dhtmlXChart({
    ...
    color:function(obj){
       if (obj.sales > 5) return "#ff9900";
       return "#66cc00";
    }
})
/*alternative colors*/
var index = 0;
var chart3 =  new dhtmlXChart({
    ...
    color:function(obj){
        index++;
        if (index % 2) return "#ff9900";
        return "#66cc00";
    }
});

Color gradient

Bar charts allow defining color gradient for bars. It can be done using a function that takes a gradient object as an argument.

In this case we can assign colors to the gradient object by using the addColorStop() method:

addColorStop(position, color)
  • position - a number between 0.0 and 1.0 that defines the relative position of the color in the gradient;
  • color - a string representing a CSS color.
var chart =  new dhtmlXChart({
    …
    gradient:function(gradient){
        gradient.addColorStop(0.0,"#FF0000");
        gradient.addColorStop(0.8,"#FFFF00");
        gradient.addColorStop(1.0,"#00FF22");
    }
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuration Properties DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
    • Bar Chart properties
    • Line Chart properties
    • Pie Chart properties
    • Area Chart properties
    • Radar Chart properties
    • Scatter Chart properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Configuration Properties

In this chapter you can find the complete list of configuration properties sorted by the Chart type.

  • Bar Chart
  • Line Chart
  • Pie Chart
  • Area Chart
  • Radar Chart
  • Scatter Chart
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Bar Chart properties DHTMLX Docs

Documentation
  • Bar Chart properties
    • Mandatory properties
    • Optional properties
    • container
    • view
    • value
    • alpha
    • border
    • color
    • gradient
    • padding
    • width
    • radius
  • Line Chart properties
  • Pie Chart properties
  • Area Chart properties
  • Radar Chart properties
  • Scatter Chart properties
Start Chart Configuration Properties

Bar Chart properties

Configuration properties are set in the chart constructor. Some of them are mandatory, others - optional.

var barChart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#"
})

Mandatory properties
  • container - the id of the html container where you want display a chart
  • view - the chart type
  • value - a property of dataset that chart represents

Optional properties

Look and feel

  • alpha - the bar transparency
  • border - enables/disables bar borders
  • color - a fixed value or template for the bars color
  • gradient - the bars gradient
  • padding - an object that defines padding of chart content:
    • top - the top padding
    • bottom - the bottom padding
    • left - the left padding
    • right - the right padding
  • width - the width of bars
  • radius - the radius of bar rounding

Item details

  • label - a template for item labels
  • tooltip - a template for item tooltips
  • legend - a template for element text in the legend block
    • width - the block width
    • align - the horizontal alignment of the block: “left”, “right” or "center"
    • valign - the vertical alignment of the block: “top”,“bottom” or "middle"
    • layout - a layout that defines text stretching in horizontal or vertical direction :"x" or "y"
    • marker - an object that defines markers in the details block
      • radius - defines the radius of markers
      • type - the marker shape
      • width - the marker width
      • height - the marker height
    • toggle - enables/disables the possibility to hide/show a graph by clicking on the graph legend item
    • values - the legend items

Scales

  • origin - the scale origin (for vertical charts).

  • yAxis - the vertical scale:

    • 'Vertical Bar' and 'Stacked Vertical Bar' personality

      • title - the scale title
      • color - the scale color
      • start - the minimum value
      • end - the maximum value
      • step - the scale step
      • template - a template for scale labels
      • lines - enables/disables horizontal lines for scale units
      • lineColor - the color of lines

    • 'Horizontal Bar' and 'Stacked Horizontal Bar' personality

      • title - the scale title
      • color - the scale color
      • template - a template for scale labels
      • lines - enables/disables vertical lines for scale units
      • lineColor - the color of lines

  • xAxis - the horizontal scale

    • 'Vertical Bar' and 'Stacked Vertical Bar' personality

      • title - the scale title
      • color - the scale color
      • template - a template for scale labels
      • lines - enables/disables vertical lines for scale units
      • lineColor - the color of lines

    • 'Horizontal Bar' and 'Stacked Horizontal Bar' personality

      • title - (string) the scale title
      • color - the scale color
      • start - (number) the minimum value of the scale
      • end - (number) the maximum value of the scale
      • step - (number) the scale's step
      • template - (////) a template for scale labels
      • lines - (boolean) enables/disables horizontal lines for scale units
      • lineColor - the color of lines

Data manipulation

  • group - groups data by a certain property
  • sort - sorts dataset
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


container DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • border
  • color
  • gradient
  • padding
  • width
  • radius
Start Chart Configuration Properties Bar Chart properties

container

The id of an html container where you want to display the chart.

Value type: String

<div id="chart_container" style="width:400px;height:200px;border:1px solid #A4BED4;"></div>

<script>
        var chart =  new dhtmlXChart({
         container: "chart_container",
             ...
        })
</script>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


view DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • border
  • color
  • gradient
  • padding
  • width
  • radius
Start Chart Configuration Properties Bar Chart properties

view

The chart type.

Value type: String

Available values for Bar Chart are: "bar", "barH", "stackedBar" and "stackedBarH"

var chart =  new dhtmlXChart({
    view:"bar",
    ...
})

or

chart.define("view","bar");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


value DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • border
  • color
  • gradient
  • padding
  • width
  • radius
Start Chart Configuration Properties Bar Chart properties

value

A data property that chart represents.

Value type: String, function

var chart =  new dhtmlXChart({
    value:"#years#",
    ...
})

or

chart.define("value","#years#");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


alpha DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • border
  • color
  • gradient
  • padding
  • width
  • radius
Start Chart Configuration Properties Bar Chart properties

alpha

Bar transparency.

Value type: Number between 0 and 1

var chart =  new dhtmlXChart({
    ...
    alpha:function(data){
            return data.sales/10;
        },

    ...
})
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


border DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • border
  • color
  • gradient
  • padding
  • width
  • radius
Start Chart Configuration Properties Bar Chart properties

border

Visibility of bars borders.

Value type: boolean

var chart =  new dhtmlXChart({
    border:true,
    ...
})

or

chart.define("border",true);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


color DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • border
  • color
  • gradient
  • padding
  • width
  • radius
Start Chart Configuration Properties Bar Chart properties

color

Defines the color of chart items

Value type: string, function

Color can be set by the fixed value:

var barChart =  new dhtmlXChart({
    color:"#66cc33",
        ...
})

You may use a string template:

var chart =  new dhtmlXChart({
    color:"#color#",
        ...
})

Moreover color can be defined by a function that takes data object as an argument:

var chart =  new dhtmlXChart({
    color:function(obj){
        if (obj.sales > 5) return "#ff9900";
        else return "#66cc00";
    },
        ...
})
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


gradient DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • border
  • color
  • gradient
  • padding
  • width
  • radius
Start Chart Configuration Properties Bar Chart properties

gradient

The color gradient.

Value type: "light" (default value), "3D", function

Gradient can be set by fixed value:

  • "3D"
var chart =  new dhtmlXChart({
    ...
    gradient:"3d",
    color: "#00FF22"
   ...
})
  • "Light"
var chart =  new dhtmlXChart({
    ...
    gradient:"light",
    color: "#00FF22"
   ...
})

or by function:

var chart =  new dhtmlXChart({
    ...
    gradient:function(gradient){
        gradient.addColorStop(0.0,"#FF0000");
        gradient.addColorStop(0.8,"#FFFF00");
        gradient.addColorStop(1.0,"#00FF22");
    },

    ...
})

or

chart.define("gradient",function(gradient){
    gradient.addColorStop(0.0,"#FF0000");
    gradient.addColorStop(0.8,"#FFFF00");
    gradient.addColorStop(1.0,"#00FF22");
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


padding DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • border
  • color
  • gradient
  • padding
  • width
  • radius
Start Chart Configuration Properties Bar Chart properties

padding

Chart padding.

Value type: Object

  • top - (string) the top padding
  • bottom - (string) the bottom padding
  • left - (string) the left padding
  • right - (string) the right padding
var chart =  new dhtmlXChart({
    padding:{
            top: 6,
                        left:10
    },
        ...
})

or

chart.define("padding",{
            top: 6,
                        left:10
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


width DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • border
  • color
  • gradient
  • padding
  • width
  • radius
Start Chart Configuration Properties Bar Chart properties

width

The bar width.

Value type: Integer

var chart =  new dhtmlXChart({
    width:5,
    ...
})

or

chart.define("width",5);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


radius DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • border
  • color
  • gradient
  • padding
  • width
  • radius
Start Chart Configuration Properties Bar Chart properties

radius

The radius of bar rounding.

Value type: Integer

var chart =  new dhtmlXChart({
    radius:7,
    ...
})

or

chart.define("radius",7);

If the radius property equals 0, the top corners of bars won't be rounded.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Line Chart properties DHTMLX Docs

Documentation
  • Bar Chart properties
  • Line Chart properties
    • Mandatory properties
    • Optional properties
    • container
    • view
    • value
    • item
    • line
    • padding
  • Pie Chart properties
  • Area Chart properties
  • Radar Chart properties
  • Scatter Chart properties
Start Chart Configuration Properties

Line Chart properties

Configuration properties are set in the chart constructor. Some of them are mandatory, others - optional.

var lineChart =  new dhtmlXChart({
    view:"line",
    container:"chart",
    value:"#sales#"
})

Mandatory properties
  • container - the id of the HTML container where you want display a chart
  • view - the chart type
  • value - a property of dataset that chart represents

Optional properties

Look and feel

  • item - a Line chart point
    • borderColor - the outer color of a point
    • borderWidth - the width of border line (by default, 2)
    • color - the inner color of a point
    • radius - the item radius (by default, 4)
    • type - the shape of items markers
  • line - a chart line
    • color - the line color
    • width - the line width
  • padding - an object that defines padding of chart content:
    • top - the top padding
    • bottom - the bottom padding
    • left - the left padding
    • right - the right padding

Chart details

  • label - a template for item labels
  • tooltip - a template for item tooltips
  • legend - a template for element text in legend block
    • width - the block width
    • align - the horizontal alignment of the block: “left”, “right” or "center"
    • valign - the vertical alignment of the block: “top”,“bottom” or "middle"
    • layout - a layout that defines text stretching in horizontal or vertical direction :"x" or "y"
    • marker - an object that defines markers in the details block
      • radius - defines the radius of markers
      • type - the marker shape
      • width - the marker width
      • height - the marker height
    • toggle - enables/disables the possibility to hide/show a graph by clicking on the graph legend item
    • values - the legend items

Scales

  • origin - the yAxis origin

  • xAxis - the horizontal scale

    • title - the scale title
    • color - the scale color
    • template - a template for scale labels
    • lines - enables/disables vertical lines for scale units
    • lineColor - the color of lines

  • yAxis - the vertical scale

    • title - the scale title
    • color - the scale color
    • start - the minimum value
    • end - the maximum value
    • step - the scale step
    • template - a template for scale labels
    • lines - enables/disables horizontal lines for scale units
    • lineColor - the color of lines

Data manipulation

  • group - groups data by a certain property
  • sort - sorts dataset
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


container DHTMLX Docs

Documentation
  • container
  • view
  • value
  • item
  • line
  • padding
Start Chart Configuration Properties Line Chart properties

container

The id of an HTML container where you want to display the chart.

Value type: String

    <div id="chart_container" style="width:400px;height:200px;border:1px solid #A4BED4;"></div>

    <script>
        var chart =  new dhtmlXChart({
         container: "chart_container",
             ...
        })
    </script>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


view DHTMLX Docs

Documentation
  • container
  • view
  • value
  • item
  • line
  • padding
Start Chart Configuration Properties Line Chart properties

view

The chart type.

Value type: String

Available values for Line Chart is: “line” and “spline”

var chart =  new dhtmlXChart({
    view:"line",
        ...
})

or

chart.define("view","line");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


value DHTMLX Docs

Documentation
  • container
  • view
  • value
  • item
  • line
  • padding
Start Chart Configuration Properties Line Chart properties

value

A property of dataset that chart represents.

Value type: String, function

var chart =  new dhtmlXChart({
    value:"#years#",
    ...
})

or

chart.define("value","#years#");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


item DHTMLX Docs

Documentation
  • container
  • view
  • value
  • item
  • line
  • padding
Start Chart Configuration Properties Line Chart properties

item

A chart point that presents an item.

Value type: Object

  • borderColor - (string) the outer color of an item marker
  • borderWidth - (number) the width of the border line (by default, 2)
  • color - (string) the inner color of an item marker
  • radius - (number) the item radius (by default, 4)
  • type - ('round' or 'r', 'square' or 's', 'diamond' or 'd') the shape of items markers (by default, 'round')
var chart =  new dhtmlXChart({
    ...
        item:{
               borderColor:"#ffffff",
               color:"#000000"
        },
        ...
})

or

chart.define("item",{
            borderColor:"#ffffff",
                        color:"#000000"
        },
);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


line DHTMLX Docs

Documentation
  • container
  • view
  • value
  • item
  • line
  • padding
Start Chart Configuration Properties Line Chart properties

line

A chart line.

Value type: Object

var chart =  new dhtmlXChart({
    ...
    line:{
            color:"#ff9900",
            width:3
        }
        ...
})

or

chart.define("line",{
            color:"#ff9900",
            width:3
        } );
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


padding DHTMLX Docs

Documentation
  • container
  • view
  • value
  • item
  • line
  • padding
Start Chart Configuration Properties Line Chart properties

padding

Chart padding.

Value type: Object

  • top - (string) the top padding
  • bottom - (string) the bottom padding
  • left - (string) the left padding
  • right - (string) the right padding
var chart =  new dhtmlXChart({
    padding:{
            top: 6,
                        left:10
    },
        ...
})

or

chart.define("padding",{
            top: 6,
                        left:10
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Pie Chart properties DHTMLX Docs

Documentation
  • Bar Chart properties
  • Line Chart properties
  • Pie Chart properties
    • Mandatory properties
    • Optional properties
    • container
    • view
    • value
    • gradient
    • radius
    • x
    • y
    • shadow
    • cant
    • height
    • pieInnerText
  • Area Chart properties
  • Radar Chart properties
  • Scatter Chart properties
Start Chart Configuration Properties

Pie Chart properties

Configuration properties are set in the chart constructor. Some of them are mandatory, others - optional.

var pieChart =  new dhtmlXChart({
    view:"pie",
    container:"chart_container",
    value:"#sales#"
})

Mandatory properties
  • container - the id of an html container where you want display the chart
  • view - the chart type
  • value - a property of dataset that chart represents

Optional properties

Look and feel

  • color - defines the color of chart items
  • gradient - the pie gradient
  • radius - the pie radius
  • x - the horizontal position of the pie center
  • y - the vertical position of the pie center

Pie personality

  • shadow - enables/disables pie shadow

3D Pie personality

  • cant - a value from 0 to 1 that defines the chart cant (0.5 by default)
  • height - the 3D pie height

Item details

  • label - a template for item labels
  • labelOffset - the offset of sector labels from the pie frame in pixels. By default, 20
  • tooltip - a template for item tooltips
  • legend - a template for element text in legend block
    • width - the block width
    • align - the horizontal alignment of the block: “left”, “right” or "center"
    • valign - the vertical alignment of the block: “top”,“bottom” or "middle"
    • layout - a layout that defines text stretching in horizontal or vertical direction :"x" or "y"
    • padding - the legend block padding
    • margin - the legend block margin
    • marker - an object that defines markers in the details block
      • radius - defines the radius of markers
      • type - the marker shape
      • width - the marker width
      • height - the marker height
    • toggle - enables/disables the possibility to hide/show a graph by clicking on the graph legend item
    • values - the legend items
  • pieInnerText - the inner label in the pie

Data manipulation

  • group - groups data by a certain property
  • sort - sorts dataset
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


container DHTMLX Docs

Documentation
  • container
  • view
  • value
  • gradient
  • radius
  • x
  • y
  • shadow
  • cant
  • height
  • pieInnerText
Start Chart Configuration Properties Pie Chart properties

container

The id of an HTML container where you want to display the chart.

Value type: String

<div id="chart_container" style="width:400px;height:200px;border:1px solid #A4BED4;"></div>

<script>
        var chart =  new dhtmlXChart({
         container: "chart_container",
             ...
        })
</script>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


view DHTMLX Docs

Documentation
  • container
  • view
  • value
  • gradient
  • radius
  • x
  • y
  • shadow
  • cant
  • height
  • pieInnerText
Start Chart Configuration Properties Pie Chart properties

view

The chart type.

Value type: String

Available values for Pie Chart are: "pie" and "pie3D".

var chart =  new dhtmlXChart({
    view:"pie",
    ...
})

or

chart.define("view","pie");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


value DHTMLX Docs

Documentation
  • container
  • view
  • value
  • gradient
  • radius
  • x
  • y
  • shadow
  • cant
  • height
  • pieInnerText
Start Chart Configuration Properties Pie Chart properties

value

A data property that chart represents.

Value type: String, function

var chart =  new dhtmlXChart({
    value:"#years#",
    ...
})

or

chart.define("value","#years#");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


gradient DHTMLX Docs

Documentation
  • container
  • view
  • value
  • gradient
  • radius
  • x
  • y
  • shadow
  • cant
  • height
  • pieInnerText
Start Chart Configuration Properties Pie Chart properties

gradient

Enables a pie gradient that is disabled by default

Value type: boolean

var chart =  new dhtmlXChart({
    ...
    gradient:true,
    ...
})

or

chart.define("gradient",true);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


radius DHTMLX Docs

Documentation
  • container
  • view
  • value
  • gradient
  • radius
  • x
  • y
  • shadow
  • cant
  • height
  • pieInnerText
Start Chart Configuration Properties Pie Chart properties

radius

A pie radius.

Value type: Integer

var chart =  new dhtmlXChart({
    ...
    radius:50,
    ...
})

or

chart.define("radius",50);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


x DHTMLX Docs

Documentation
  • container
  • view
  • value
  • gradient
  • radius
  • x
  • y
  • shadow
  • cant
  • height
  • pieInnerText
Start Chart Configuration Properties Pie Chart properties

x

The horizontal position of a pie center.

Value type: Integer

var chart =  new dhtmlXChart({
    ...
    x:100,
    ...
})

or

chart.define("x",100);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


y DHTMLX Docs

Documentation
  • container
  • view
  • value
  • gradient
  • radius
  • x
  • y
  • shadow
  • cant
  • height
  • pieInnerText
Start Chart Configuration Properties Pie Chart properties

y

The vertical position of a pie center.

Value type: Integer

var chart =  new dhtmlXChart({
    ...
    y: 100,
    ...
})

or

chart.define("y",100);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


shadow DHTMLX Docs

Documentation
  • container
  • view
  • value
  • gradient
  • radius
  • x
  • y
  • shadow
  • cant
  • height
  • pieInnerText
Start Chart Configuration Properties Pie Chart properties

shadow

Enables/disables shadow

Value type: boolean

var chart =  new dhtmlXChart({
    ...
    shadow:false,
    ...
})

or

chart.define("shadow",false);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cant DHTMLX Docs

Documentation
  • container
  • view
  • value
  • gradient
  • radius
  • x
  • y
  • shadow
  • cant
  • height
  • pieInnerText
Start Chart Configuration Properties Pie Chart properties

cant

A cant of 3d pie.

Value type: Integer

var chart =  new dhtmlXChart({
    ...
    cant:0.6,
    ...
})

or

chart.define("cant",0.6);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


height DHTMLX Docs

Documentation
  • container
  • view
  • value
  • gradient
  • radius
  • x
  • y
  • shadow
  • cant
  • height
  • pieInnerText
Start Chart Configuration Properties Pie Chart properties

height

A 3D pie height

Value type: Integer

var chart =  new dhtmlXChart({
    ...
    height: 30,
    ...
})

or

chart.define("height",30);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


pieInnerText DHTMLX Docs

Documentation
  • container
  • view
  • value
  • gradient
  • radius
  • x
  • y
  • shadow
  • cant
  • height
  • pieInnerText
Start Chart Configuration Properties Pie Chart properties

pieInnerText

An inner label in pie.

Value type: String, function

var chart =  new dhtmlXChart({
    ...
    pieInnerText:"#sales#",
    ...
})

or

chart.define("pieInnerText","#sales#");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Area Chart properties DHTMLX Docs

Documentation
  • Bar Chart properties
  • Line Chart properties
  • Pie Chart properties
  • Area Chart properties
    • Mandatory properties
    • Optional properties
    • container
    • view
    • value
    • alpha
    • padding
  • Radar Chart properties
  • Scatter Chart properties
Start Chart Configuration Properties

Area Chart properties

Configuration properties are set in the chart constructor. Some of them are mandatory, others - optional.

var areaChart = new dhtmlXChart({
    view:"area",
    container:"chart_container",
    value:"#sales#"
});

Mandatory properties
  • container - the id of the html container where you want display a chart
  • view - the chart type
  • value - a property of dataset that chart represents

Optional properties

Look and feel

  • alpha - the area transparency
  • color - a fixed value or template for area color
  • padding - an object that defines padding of chart content:
    • top - the top padding
    • bottom - the bottom padding
    • left - the left padding
    • right - the right padding

Item details

  • label - a template for item labels
  • tooltip - a template for item tooltips
  • legend - a template for element text in legend block
    • width - the block width
    • align - the horizontal alignment of the block: “left”, “right” or "center"
    • valign - the vertical alignment of the block: “top”,“bottom” or "middle"
    • layout - a layout that defines text stretching in horizontal or vertical direction :"x" or "y"
    • padding - the legend block padding
    • margin - the legend block margin
    • marker - an object that defines markers in the details block
      • radius - defines the radius of markers
      • type - the marker shape
      • width - the marker width
      • height - the marker height
    • toggle - enables/disables the possibility to hide/show a graph by clicking on the graph legend item
    • values - the legend items

Scales

  • xAxis - the horizontal scale

    • title - the scale title
    • color - the scale color
    • template - a template for scale labels
    • lines - enables/disables vertical lines for scale units
    • lineColor - the color of lines

  • yAxis - the vertical scale:

    • title - the scale title
    • color - the scale color
    • start - the minimum value
    • end - the maximum value
    • step - the scale step
    • template - a template for scale labels
    • lines - enables/disables horizontal lines for scale units
    • lineColor - the color of lines

Data manipulation

  • group - groups data by a certain property
  • sort - sorts dataset
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


container DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • padding
Start Chart Configuration Properties Area Chart properties

container

The id of an HTML container where you want to display the chart.

Value type: String

    <div id="chart_container" style="width:400px;height:200px;border:1px solid #A4BED4;"></div>

    <script>
        var chart =  new dhtmlXChart({
         container: "chart_container",
             ...
        })
    </script>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


view DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • padding
Start Chart Configuration Properties Area Chart properties

view

The chart type.

Value type: String

Available values for Area Chart are: "area" and "stackedArea"

var chart =  new dhtmlXChart({
    view:"area",
    ...
})

or

chart.define("view","area");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


value DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • padding
Start Chart Configuration Properties Area Chart properties

value

A data property that chart represents.

Value type: String, function

var chart =  new dhtmlXChart({
    value:"#years#",
    ...
})

or

chart.define("value","#years#");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


alpha DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • padding
Start Chart Configuration Properties Area Chart properties

alpha

The chart area transparency.

Value type: Number between 0 and 1

var chart =  new dhtmlXChart({
    ...
    alpha:function(data){
            return data.sales/10;
        },

    ...
})
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


padding DHTMLX Docs

Documentation
  • container
  • view
  • value
  • alpha
  • padding
Start Chart Configuration Properties Area Chart properties

padding

Chart padding.

Value type: Object

  • top - (string) the top padding
  • bottom - (string) the bottom padding
  • left - (string) the left padding
  • right - (string) the right padding
var chart =  new dhtmlXChart({
    padding:{
            top: 6,
                        left:10
    },
        ...
})

or

chart.define("padding",{
            top: 6,
                        left:10
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Radar Chart properties DHTMLX Docs

Documentation
  • Bar Chart properties
  • Line Chart properties
  • Pie Chart properties
  • Area Chart properties
  • Radar Chart properties
    • Mandatory properties
    • Optional properties
    • Scales
    • view
    • disableLines
    • padding
    • item
  • Scatter Chart properties
Start Chart Configuration Properties

Radar Chart properties

Configuration properties are set in the chart constructor. Some of them are mandatory, others - optional.

var radarChart =  new dhtmlXChart({
    view:"radar",
    container:"chart_container",
    value:"#sales#"
})

Mandatory properties
  • container - the id of an HTML container where you want display the chart
  • view - the chart type
  • value - a property of dataset that chart represents

Optional properties

Look and feel

  • alpha - the chart area transparency. Makes sense only if the fill property is enabled
  • disableLines - disables lines in a chart
  • disableItems - disables items markers. Makes sense only if the fill property is enabled
  • fill - fills the chart area with the specified background color
  • padding - an object that defines padding of chart content:
    • top - the top padding
    • bottom - the bottom padding
    • left - the left padding
    • right - the right padding
  • line - a chart line
    • color - the line color
    • width - the line width
  • item - a chart point
    • borderColor - the outer color of a point
    • borderWidth - the width of border lines
    • color - the inner color of a point
    • radius - the item radius
    • type - the shape of points

Item details

  • tooltip - a template for item tooltips
  • legend - a template for element text in legend block
    • width - the block width
    • align - the horizontal alignment of the block: “left”, “right” or "center"
    • valign - the vertical alignment of the block: “top”,“bottom” or "middle"
    • layout - a layout that defines text stretching in horizontal or vertical direction :"x" or "y"
    • padding - the legend block padding
    • margin - the legend block margin
    • marker - an object that defines markers in the details block
      • radius - defines the radius of markers
      • type - the marker shape
      • width - the marker width
      • height - the marker height
    • toggle - enables/disables the possibility to hide/show a graph by clicking on the graph legend item
    • values - the legend items

Scales

  • xAxis - the horizontal scale

    • lineColor - the color of lines
    • template - the template for radial titles

  • yAxis - the vertical scale

    • start - the minimum scale value
    • end - the maximum scale value
    • step - the scale step
    • template - a template for scale markers. By default, it is defined by the 'start', 'step' and 'end' attributes
    • lineShape - the type of lines: 'line' or 'arc'
    • lineColor - the color of lines

Data manipulation

  • group - groups data by a certain property
  • sort - sorts dataset
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


view DHTMLX Docs

Documentation
  • view
  • disableLines
  • padding
  • item
Start Chart Configuration Properties Radar Chart properties

view

A chart type.

Value type: String

Available value for Radar Chart is: "radar"

var chart =  new dhtmlXChart({
    ...
    view:"radar",
    ...
})

or

chart.define("view","radar");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disableLines DHTMLX Docs

Documentation
  • view
  • disableLines
  • padding
  • item
Start Chart Configuration Properties Radar Chart properties

disableLines

Disables lines in the chart. By default, false.

Value type: boolean

var chart =  new dhtmlXChart({
    disableLines:true,
    ...
})
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


padding DHTMLX Docs

Documentation
  • view
  • disableLines
  • padding
  • item
Start Chart Configuration Properties Radar Chart properties

padding

Chart padding.

Value type: Object

  • top - (string) the top padding
  • bottom - (string) the bottom padding
  • left - (string) the left padding
  • right - (string) the right padding
var chart =  new dhtmlXChart({
    padding:{
            top: 6,
                        left:10
    },
        ...
})

or

chart.define("padding",{
            top: 6,
                        left:10
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


item DHTMLX Docs

Documentation
  • view
  • disableLines
  • padding
  • item
Start Chart Configuration Properties Radar Chart properties

item

A chart point that presents an item.

Value type: Object

  • borderColor - (string) the outer color of an item marker
  • borderWidth - (number) the width of the border line (by default, 2)
  • color - (string) the inner color of an item marker
  • radius - (number) the item radius (by default, 4)
  • type - ('round' or 'r', 'square' or 's', 'diamond' or 'd') the shape of items markers (by default, 'round')
var chart =  new dhtmlXChart({
    ...
        item:{
               borderColor:"#ffffff",
               color:"#000000"
        },
        ...
})

or

chart.define("item",{
            borderColor:"#ffffff",
                        color:"#000000"
        },
);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Scatter Chart properties DHTMLX Docs

Documentation
  • Bar Chart properties
  • Line Chart properties
  • Pie Chart properties
  • Area Chart properties
  • Radar Chart properties
  • Scatter Chart properties
    • Mandatory properties
    • Optional properties
    • padding
Start Chart Configuration Properties

Scatter Chart properties

Configuration properties are set in the chart constructor. Some of them are mandatory, others - optional.

var scatterChart =  new dhtmlXChart({
    view:"scatter",
    container:"chart_container",
    yValue:"#b#",
    xValue: "#a#"
})

Mandatory properties
  • container - an id of the HTML container where you want display a chart
  • view - a chart type
  • xValue - a property of dataset that defines values along the horizontal axis
  • yValue - a property of dataset that defines values along the vertical axis

Optional properties

Look and feel

  • item - a chart point that present a separate data item
    • borderColor - the outer color of a point
    • borderWidth - the width of border line (2 is default)
    • color - the inner color of a point
    • radius - the item radius (4 by default)
  • padding - an object that defines padding of chart content:
    • top - the top padding
    • bottom - the bottom padding
    • left - the left padding
    • right - the right padding

Chart details

  • label - a template for item labels
  • tooltip - a template for item tooltips
  • legend - a template for element text in the legend block
    • width - the block width
    • align - the horizontal alignment of the block: “left”, “right” or "center"
    • valign - the vertical alignment of the block: “top”,“bottom” or "middle"
    • layout - a layout that defines text stretching in horizontal or vertical direction :"x" or "y"
    • marker - an object that defines markers in the details block
      • type - the marker type: “square” or “round”
      • width - the marker width
      • height - the marker height
    • toggle - enables/disables the possibility to hide/show a graph by clicking on the graph legend item
    • values - the legend items

Scales

  • xAxis - the horizontal scale

    • title - the scale title
    • color - the scale color
    • start - the minimum value
    • end - the maximum value
    • step - the scale step
    • template - a template for scale labels
    • lines - enables/disables vertical lines for scale units
    • lineColor - the color of lines

  • yAxis - the vertical scale

    • title - the scale title
    • color - the scale color
    • start - the minimum value
    • end - the maximum value
    • step - the scale step
    • template - a template for scale labels
    • lines - enables/disables horizontal lines for scale units
    • lineColor - the color of lines

Data manipulation

  • group - groups data by a certain property
  • sort - sorts dataset
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


padding DHTMLX Docs

Documentation
  • padding
Start Chart Configuration Properties Scatter Chart properties

padding

Chart padding.

Value type: Object

  • top - (string) the top padding
  • bottom - (string) the bottom padding
  • left - (string) the left padding
  • right - (string) the right padding
var chart =  new dhtmlXChart({
    padding:{
        top: 6,
        left:10
    },
        ...
})

or

chart.define("padding",{
        top: 6,
        left:10
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


The List of Charts DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

The List of Charts

DHTMLX offers the following chart variations at your disposal:

Bar Chart

Vertical Bar

Horizontal Bar

Stacked Vertical Bar

Stacked Horizontal Bar

Bar Chart details.

Pie Chart

Pie | 3D Pie | Donut

Pie Chart details

Line Chart

preset: 'line' | preset: 'point'

Line Chart details

Area Chart

Area | Stacked Area

Area Chart details

Radar Chart

Radar

Radar Chart details

Scatter Chart

Scatter

Scatter Chart details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Area Chart DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Area Chart

Area chart is a mixture of Line Chart and Stacked Bar Chart. It shows the relative contribution of each separate value to the whole picture.

dhmlxChart offers these sub-types of Area Chart:

  • Area
  • Stacked Area

Now let's start creating Area Chart step by step. It will be a simple Area Chart which you can improve later by adding extra functions and properties.

First, we will make some preparatory steps.

1) Specify data that will be represented in your chart.

In our examples we use Sales Information of one little company in the JSON format. Learn more about available data formats.

var data = [
    { sales:"5.0",sales1:"3.4",sales2:"2.1", year:"2000" },
    { sales:"2.8",sales1:"4.8",sales2:"0.3", year:"2001" },
    { sales:"1.1",sales1:"4.4",sales2:"2.9", year:"2002" },
    { sales:"4.4",sales1:"5.5",sales2:"2.6", year:"2003" },
    { sales:"2.6",sales1:"6.0",sales2:"1.4", year:"2004" },
    { sales:"4.1",sales1:"5.7",sales2:"1.1", year:"2005" }
]

2) Add an HTML container for your future chart on a page, name it "chart_container":

<div id="chart_container"
    style="width:280px; height:250px; border:1px solid #A4BED4;"></div>

Go on by filling in an object constructor.

3) Set the chart type depending on the sub-type you have chosen.

Area - "area", Stacked Area - "stackedArea"

We will create an Area chart, so we'll specify the value "area" in the 'view' property:

var AreaChart =  new dhtmlXChart({
    view:"area"
    // other properties
});

4) Set the "chart_container" value in the "container" property of the object constructor:

var AreaChart =  new dhtmlXChart({
    view:"area",
    container:"chart_container"
    // other properties
});

5) Assign the '#sales#' values to the "value" property to set data that Area Chart will represent.

var AreaChart =  new dhtmlXChart({
    view:"area",
    container:"chart_container",
    value:"#sales#",
    // other properties
});

Other parameters are optional, choose them according to your needs.

6) Specify the chart transparency. It can be a number from 0 to 1. We'll specify the value 0.6.

var AreaChart =  new dhtmlXChart({
    view:"area",
    container:"chart_container",
    value:"#sales#",
    alpha:0.6
    // other properties
});

7) Set the color of your chart. Our value is "#aed7f4" (property 'color').

var AreaChart =  new dhtmlXChart({
    view:"area",
    container:"chart_container",
    value:"#sales#",
    alpha:0.6,
    color:"#aed7f4"
    // other properties
});

8) Name the xAxis scale and choose the scale data (parameter 'template').

In the example the following values are used:"#Year#" as the xAxis name and "#year#" as the scale data. Learn more about the chart scale here.

var AreaChart =  new dhtmlXChart({
    view:"area",
    container:"chart_container",
    value:"#sales#",
    alpha:0.6,
    color:"#aed7f4",
    xAxis:{
        title:"Year",
        template:"#year#"
    }
    // other properties
});

The xAxis is completed. yAxis is next in line.

9) Name the yAxis scale, e.g. "#Sales per year#" in the example below. Learn more about the chart scale here.

var AreaChart =  new dhtmlXChart({
    view:"area",
    container:"chart_container",
    value:"#sales#",
    alpha:0.6,
    color:"#aed7f4",
    xAxis:{
        title:"Year",
        template:"#year#"
    },
    yAxis:{
        title:"Sales per year"
    }
});

10) Use the addSeries() method to represent several data properties in one chart.

AreaChart.addSeries({
    value:"#sales1#",
    color:"#45abf5",
    label:"#sales1#"
});

11) Use the parse() method to process data.

AreaChart.parse(data,"json");

Now everything is ready. Just run the application to see the result.

Related sample: Area

Related sample: StackedArea

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Bar Chart DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Bar Chart

Bar chart is the most common chart type to present data. It's used to compare two or more values and show their relative quantities.

DhtmlxChart gives you full scope for Bar Chart creation and offers the next sub-types of Bar Chart:

  • Vertical Bar
  • Horizontal Bar
  • Stacked Vertical Bar
  • Stacked Horizontal Bar

Now let’s start to create a Bar Chart yourself step by step.

It will be a simple Bar Chart which you can improve at any time just adding additional functions and properties.

First, we need to make some preparatory steps.

1) Decide what data you want to display. It can have different formats. In our examples we use Sales Information of one little company in JSON format.

var data = [
    { sales:3.8, year:"2001" },
    { sales:3.4, year:"2002" },
    …
    { sales:4.8, year:"2009" }
];

2) Insert to your page an HTML container for your future chart with the name "chart_container", for instance.

<div id="chart_container" style="width:280px;height:250px;border:1px solid #A4BED4;"></div>

Now, we are ready to fill in an object constructor. Just make the next step to know the details.

3) Set chart type depending on the sub-type you have chosen.

Vertical Bar - "bar"

Horizontal Bar - "barH"

Stacked Vertical Bar - "stackedBar"

Stacked Horizontal Bar - "stackedBarH"

We will create classic vertical bar, so in the property 'view' we'll specify the value "bar".

var barChart =  new dhtmlXChart({
    view:"bar"
    ....
})

4) Define 'chart_container' in the ‘container’ property to set chart container.

var barChart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container"
    ...
})

5) Assign '#sales#' to the ‘value’ property to set data that Bar Chart will present.

var barChart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    ...
})

Other parameters are optional, choose them according to your needs.

6) Select a bar color. For example, set value '#66cc33' (green color). Learn more about chart color here.

var barChart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    color:"#66cc33"
    ...
})

7) Set bar width e.g. value '30'.

var barChart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    color:"#66cc33",
    width:30
    ...
})

8) Assign value '#year#' to the ‘tooltip’ property of an object constructor to set bar tooltip. Learn more about chart tooltip here.

var barChart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    color:"#66cc33",
    width:30,
    tooltip: "#year#"
    ...
})

We've almost finished. A little patience. Scale is left.

9) Name xAxis and choose scale data (parameter 'template'). In the example we will use the following values:'#Sales per year#' as xAxis name and '#year#' as scale data. Learn more about chart scale here.

var barChart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    color:"#66cc33",
    width:30,
    tooltip: "#year#",
    xAxis:{
        title:"Sales per year",
        template:"#year#"
    }
    ...
})

xAxis is completed. Next in turn - yAxis.

10) Name scale and define scale data as well. Also set start, end positions and scale step. We will name the yAxis - '#Sales,mil#' and set the following values:start - '3', end - '9', step - '3'. Data value is '{obj}'. Learn more about chart scale here.

var barChart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    color:"#66cc33",
    width:30,
    tooltip: "#year#",
    xAxis:{
        title:"Sales per year",
        template:"#year#"
    },
    yAxis:{
        start:3,
        end:9,
        step:3,
        template:"{obj}",
        title:"Sales,mil"
    }
})

11) Use method parse() to process data.

barChart.parse(data,"json");

We've finished. Just run the application to see your creation.

If you want to represent several data properties on the chart - use the addSeries() method.

The addSeries() method in details and in the following example:

Related sample: Series

Series margin and padding in Bar chart

It's possible to customize margin and padding of series in Vertical and Horizontal Bar charts. You just need to specify the following parameters and set the needed values for them:

  • seriesPadding - (number) the space between groups of bars
  • seriesMargin - (number) the space between bars within one series group
var chart = new dhtmlXChart({
   view: "bar",
   seriesPadding: 5,
   seriesMargin: 2,
   ...
});
chart.addSeries(...);

The examples of Bar Chart sub-types are presented below:

Related sample: Initialization

Related sample: StackedBar

Related sample: Horizontal Bars

Related sample: Stacked Horizontal Bars

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Line Chart DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Line Chart

Line Chart is the most popular chart type. It’s created by connecting a series of data points together with a line. This chart type is used to show data trends, how parameters are related to each other or how one variable changes effected by another.

dhmlxChart gives full scope to Line chart creation as well and offers these sub-types of Line Chart:

  • Line
  • Spline

Related sample: Line chart

Related sample: Spline chart

Let’s start to create a Line chart yourself step by step.

It will be a simple Line chart and you can improve it at any time just adding additional functions and properties.

First, we will make some preparatory steps.

1) Specify data that will be represented in your chart. In our examples we use Sales Information of one little company in JSON format. Learn more about available data formats.

var data = [
    { sales:3.8, year:"2001" },
    { sales:3.4, year:"2002" },
    …
    { sales:4.8, year:"2009" }
];

2) Insert to your page an HTML container for your future chart e.g. with the name "chart_container" .

<div id="chart_container" style="width:280px;height:250px;border:1px solid #A4BED4;"></div>

Go on, fill in an object constructor.

3) Set chart type depending on the sub-type you have chosen.

Line - "line",

Spline - "spline"

We will create Line, so in the property 'view' we'll specify the value "line".

var LineChart =  new dhtmlXChart({
    view:"line"
    ....
})

4) Define value 'chart_container' in the property ‘container’ of an object constructor. It sets chart container.

var LineChart =  new dhtmlXChart({
    view:"line",
    container:"chart_container"
    ...
})

5) Assign value '#sales#' to the ‘value’ property to set data that Line Chart will represent.

var LineChart =  new dhtmlXChart({
    view:"line",
    container:"chart_container",
    value:"#sales#",
    ...
})

Other parameters are optional, choose them according to your needs.

6) Set chart labels e.g. value '#year#' (property 'label'). Learn more about chart labels here.

var LineChart =  new dhtmlXChart({
    view:"line",
    container:"chart_container",
    value:"#sales#",
    label:"#year#"
    ...
})

7) Specify points tooltip e.g. value '#years#' (property 'tooltip'). Learn more about chart tooltip here.

var LineChart =  new dhtmlXChart({
    view:"line",
    container:"chart_container",
    value:"#sales#",
    label:"#year#",
    tooltip: "#year#"
    ...
})

8) Select inner and outer color of points. We will use values: '#ffffff' and '#000000' (properties 'borderColor','color'). Learn more about colors here.

var LineChart =  new dhtmlXChart({
    view:"line",
    container:"chart_container",
    value:"#sales#",
    label:"#year#",
    tooltip: "#year#",
    item:{
        borderColor:"#ffffff",
        color:"#000000"
    },
    ...
})

9) Set color and width for a line. Our values are '#ff9900' and '3' (properties 'color' and 'width').

var LineChart =  new dhtmlXChart({
    view:"line",
    container:"chart_container",
    value:"#sales#",
    label:"#year#",
    tooltip: "#year#",
    item:{
        borderColor:"#ffffff",
        color:"#000000"
        },
    line:{
        color:"#ff9900",
        width:3
    },
    ...
})

10) Name xAxis and choose scale data (parameter 'template'). In the example we will use the following values:'Year' as xAxis name and '#year#' as scale data. Learn more about chart scale here.

var LineChart =  new dhtmlXChart({
    view:"line",
    container:"chart_container",
    value:"#sales#",
    label:"#year#",
    tooltip: "#year#",
    item:{
        borderColor:"#ffffff",
        color:"#000000"
    },
    line:{
        color:"#ff9900",
        width:3
    },
    xAxis:{
        title:"Year",
        template:"#year#"
    },
    ...
})

11) Name yAxis. We will use the name - "Sales per year". Learn more about chart scale here.

var LineChart =  new dhtmlXChart({
    view:"line",
    container:"chart_container",
    value:"#sales#",
    label:"#year#",
    tooltip: "#year#",
    item:{
        borderColor:"#ffffff",
        color:"#000000"
    },
    line:{
        color:"#ff9900",
        width:3
    },
    xAxis:{
        title:"Year",
        template:"#year#"
    },
    yAxis:{
        title:"Sales per year"
    },
})

12) Use method parse() to process data.

LineChart.parse(data,"json");

We've finished. Just run the application to see your creation.

If you want to represent several data properties in the chart (see pictures above) - use the addSeries method.

Related sample: Series

You can see the examples for each sub-type below:

Related sample: Line chart

Related sample: Spline chart

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Pie Chart DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Pie Chart

A Pie Chart is a circular chart divided into sectors, illustrating relative magnitudes or frequencies. The arc length of each sector is proportional to the quantity it represents. Together, the sectors create a full disk.

DHTMLX offers these sub-types of Pie Chart:

  • Pie
  • 3D Pie
  • Donut

Let’s start to create a Pie Chart yourself step by step. You will have possibility to improve it by adding additional functions and properties.

In the beginning, make some preparatory steps.

1) Select data of any available format to present in your chart. In our examples we use Sales Information of one little company in JSON format.

var data = [
    { "sales":"4.3", "year":"2001", color:"#80ff7a"},
    { "sales":"9.9", "year":"2002", color:"#bdff33"},
    { "sales":"7.4", "year":"2003", color:"#ff9e2a"},
    { "sales":"9.0", "year":"2004", color:"#ff561b"},
    { "sales":"7.3", "year":"2005", color:"#ff71be"},
    { "sales":"6.8", "year":"2006", color:"#ffea69"}
];

2) Insert an HTML container to your page for your future chart. For example use name "chart_container".

<div id="chart_container"
    style="width:450px; height:300px; border:1px solid #A4BED4;"></div>

Now, we need to fill in the object constructor. Let's go to know the details.

3) Set the chart type depending on the sub-type you have chosen.

Pie - 'pie',

3D Pie - 'pie3D',

Donut - 'donut'

We will create Pie, so in property 'view' we'll specify value "pie".

var pieChart =  new dhtmlXChart({
    view:"pie"
    ....
})

4) Define 'chart_container' in the ‘container’ property to set the chart container.

var pieChart =  new dhtmlXChart({
    view:"pie",
    container:"chart_container"
    ...
})

5) Assign '#sales#' to the ‘value’ property to set data that Pie Chart will represent.

var pieChart =  new dhtmlXChart({
    view: "pie",
    container: "chart_container",
    value: "#sales#"
    ...
})

Other parameters are optional, choose them according to your needs.

6) Set the pie color. In our example colors of sectors are specified in data structure by the "color" property. Know more about coloring charts here.

var pieChart =  new dhtmlXChart({
    view: "pie",
    container: "chart_container",
    value: "#sales#",
    color: "#color#"
    ...
})

7) Add legend block definition (parameter 'legend') with the following parameters: 'width','align', 'valign', 'marker', 'template'.

  • Set legend block width. e.g. value '65'.

  • Choose horizontal alignment for the legend block: “left”, “right” or "center". We will apply right horizontal alignment.

  • Choose vertical alignment: “top”, “bottom” or "middle". We selected value 'top'.

  • Define how colored markers in legend block will look. In the example we will use the values:'#round#' as marker type and '15' as marker width.

  • Specify a template for legend text e.g. value '#year#'.

var pieChart =  new dhtmlXChart({
    view:"pie",
    container:"chart_container",
    value:"#sales#",
    color: "#color#",
    legend:{
        width: 65,
        align: "right",
        valign: "top",
        marker:{
            type: "round",
            width: 15
        },
    template: "#year#"
    }
});

8) Set inner pie labels (parameter 'pieInnerText') e.g. value '#sales#'.

var pieChart =  new dhtmlXChart({
    view:"pie",
    container:"chart_container",
    value:"#sales#",
    color: "#color#",
    legend:{
        width: 65,
        align: "right",
        valign: "top",
        marker:{
            type: "round",
            width: 15
        },
    template: "#year#"
    },
    pieInnerText:"<b>#sales#</b>"
});

9) Use method parse() to process data.

pieChart.parse(data,"json");

We've finished. Just run the application to see your creation.

Examples for each sub-type you can see below:

Related sample: Pie

Related sample: pie3D

Related sample: Donut chart

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Radar Chart DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
    • container
    • value
    • alpha
    • line
    • xAxis
    • yAxis
    • fill
    • disableItems
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Radar Chart

A Radar Chart is a chart which plots the values of each item along a separate line that starts in the center of the chart and ends on the outer circle.

Let’s start to create a Radar Chart yourself step by step. You will have possibility to improve it by adding additional functions and properties.

In the beginning, make some preparatory steps.

1) Select data of any available format to present it in your chart. In our example we will use Sales Information of two small companies in JSON format.

var data = [
    { "companyA":"4.8", "companyB":"2.3", "month":"Jan" },
    { "companyA":"5.0", "companyB":"2.1", "month":"Feb" },
    { "companyA":"3.2", "companyB":"0.1", "month":"Mar" },
    { "companyA":"3.1", "companyB":"5.7", "month":"Apr" },
    { "companyA":"1.0", "companyB":"3.0", "month":"May" },
    { "companyA":"1.3", "companyB":"2.6", "month":"Jun" }
];

2) Insert an HTML container to your page. It will contain your future chart. For example, use name "chart_container".

<div id="chart_container" style="width:450px;height:300px;border:1px solid #A4BED4;"></div>

3) As the next step, set the chart type.

var radarChart =  new dhtmlXChart({
    view:"radar"
    ...
})

4) Define 'chart_container' in the container property to set the chart container.

var radarChart =  new dhtmlXChart({
    view:"radar",
    container:"chart_container"
    ...
})

5) Assign '#companyA#' to the value property to set data that Radar Chart will represent.

var radarChart =  new dhtmlXChart({
    view: "radar",
    container: "chart_container",
    value: "#companyA#"
})

Other parameters are optional, choose them according to your needs.

6) Specify points tooltip e.g. value '#companyA#' (property tooltip).

var radarChart =  new dhtmlXChart({
    view: "radar",
    container: "chart_container",
    value: "#companyA#",
    tooltip: "#month#"
})

7) Specify the alpha property to make your chart some kind of transparent.

var radarChart =  new dhtmlXChart({
    view: "radar",
    container: "chart_container",
    value: "#companyA#",
    tooltip: "#month#",
    alpha:0.2
})

8) Set color and width for lines that will connect items values. Our values are '#96B0B8' and '1' (attributes 'color' and 'width' of the line property).

var radarChart =  new dhtmlXChart({
    view: "radar",
    container: "chart_container",
    value: "#companyA#",
    tooltip: "#companyA#",
    alpha:0.2,
    line:{
        color:"#3399ff",
        width:1
    }
})

9) Name xAxis and choose scale data (attribute 'template' of the xAxis property).

var radarChart =  new dhtmlXChart({
    view: "radar",
    container: "chart_container",
    value: "#companyA#",
    tooltip: "#companyA#",
    alpha:0.2,
    line:{
        color:"#3399ff",
        width:1
    },
    xAxis:{
        template:"#month#"
    }
})

10) To present scale circles as arc lines, specify the yAxis property and the lineShape attribute in it.

var radarChart =  new dhtmlXChart({
    view: "radar",
    container: "chart_container",
    value: "#companyA#",
    tooltip: "#companyA#",
    alpha:0.2,
    line:{
        color:"#3399ff",
        width:1
    },
    xAxis:{
        template:"#month#"
    },
    yAxis:{
        lineShape:'arc'
    }
})

11) To fill the chart area with background color, enable the fill property and set the desired color of background through the color property.

var radarChart =  new dhtmlXChart({
    view: "radar",
    container: "chart_container",
    value: "#companyA#",
    tooltip: "#companyA#",
    alpha:0.2,
    line:{
        color:"#3399ff",
        width:1
    },
    xAxis:{
        template:"#month#"
    },
    yAxis:{
        lineShape:'arc'
    },
    fill:true,
    color: "#3399ff"
})

12) As we are filling the chart area, it will be better to not display items markers on the chart. So, set the disableItems property to true.

var radarChart =  new dhtmlXChart({
    view: "radar",
    container: "chart_container",
    value: "#companyA#",
    tooltip: "#companyA#",
    alpha:0.2,
    line:{
        color:"#3399ff",
        width:1
    },
    xAxis:{
        template:"#month#"
    },
    yAxis:{
        lineShape:'arc'
    },
    fill:true,
    color: "#3399ff",
    disableItems:true
})

13) To present data of two companies on one chart, call method addSeries() as shown below:

radarChart.addSeries({
    value:"#companyB#",
    tooltip:{
        template:"#companyB#"
    },
    color:"#66cc00",
    line:{
        color:"#66cc00",
        width:1
    }
})

14) Use method parse() to process data.

radarChart.parse(data,"json");

Related sample: Radar points

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


container DHTMLX Docs

Documentation
  • container
  • value
  • alpha
  • line
  • xAxis
  • yAxis
  • fill
  • disableItems
Start Chart Radar Chart

container

An id of the HTML container where you want to display a chart.

Value type: String

    <div id="chart_container" style="width:400px;height:200px;border:1px solid #A4BED4;"></div>

    <script>
        var chart =  new dhtmlXChart({
         container: "chart_container",
             ...
        })
    </script>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


value DHTMLX Docs

Documentation
  • container
  • value
  • alpha
  • line
  • xAxis
  • yAxis
  • fill
  • disableItems
Start Chart Radar Chart

value

A data value that chart represents.

Value type: String, function

var chart =  new dhtmlXChart({
    ...
    value:"#years#",
    ...
})

or

chart.define("value","#years#");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


alpha DHTMLX Docs

Documentation
  • container
  • value
  • alpha
  • line
  • xAxis
  • yAxis
  • fill
  • disableItems
Start Chart Radar Chart

alpha

Chart area transparency. Makes sense if the fill property is set to true.

Value type: Number between 0 and 1

var chart =  new dhtmlXChart({
    alpha:0.2;
    ...
})
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


line DHTMLX Docs

Documentation
  • container
  • value
  • alpha
  • line
  • xAxis
  • yAxis
  • fill
  • disableItems
Start Chart Radar Chart

line

A chart line.

Value type: Object

  • color - (string) the line color
  • width - (string) the line width
var chart =  new dhtmlXChart({
    line:{
            color:"#ff9900",
            width:3
    },
        ...
})

or

chart.define("line",{
            color:"#ff9900",
            width:3
        } );
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


xAxis DHTMLX Docs

Documentation
  • container
  • value
  • alpha
  • line
  • xAxis
  • yAxis
  • fill
  • disableItems
Start Chart Radar Chart

xAxis

The horizontal scale.

Value type: Object

  • lineColor - (string) the color of lines. By default, '#cfcfcf'
  • template - (string or function) the template for radial titles
var chart =  new dhtmlXChart({
     xAxis:{
    template:"#month#"
     },
     ...
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


yAxis DHTMLX Docs

Documentation
  • container
  • value
  • alpha
  • line
  • xAxis
  • yAxis
  • fill
  • disableItems
Start Chart Radar Chart

yAxis

The vertical scale.

Value type: Object

  • start - (float) the minimum scale value
  • end - (float) the maximum scale value
  • step - (float) the scale step
  • template - (string or function) the template for scale markers. By default, it is defined by the 'start', 'step' and 'end' attributes
  • lineShape - ('line' and 'arc') the type of lines. By default, 'line'
  • lineColor - (string) the color of scale arcs. By default, '#cfcfcf'
var chart =  new dhtmlXChart({
     yAxis:{
    lineShape:"arc"
     },
     ...
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


fill DHTMLX Docs

Documentation
  • container
  • value
  • alpha
  • line
  • xAxis
  • yAxis
  • fill
  • disableItems
Start Chart Radar Chart

fill

Fills the chart area with the specified background color.

Value type: string, function

Background color can be defined by:

  • some fixed value
var chart =  new dhtmlXChart({
        view:"radar",
    fill:"#66cc33",
        ...
})
  • a string template
var chart =  new dhtmlXChart({
        view:"radar",
    fill:"#color#",
        ...
})
  • a function that takes data object as an argument
var chart =  new dhtmlXChart({
        view:"radar",
    fill:function(obj){
        if (obj.sales > 5) return "#ff9900";
        else return "#66cc00";
    },
        ...
})
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disableItems DHTMLX Docs

Documentation
  • container
  • value
  • alpha
  • line
  • xAxis
  • yAxis
  • fill
  • disableItems
Start Chart Radar Chart

disableItems

Disables items markers in the chart. Makes sense if the fill property is enabled. By default, false.

Value type: boolean

var chart =  new dhtmlXChart({
    disableItems:true,
    ...
})
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Scatter Chart DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
    • view
    • container
    • xValue
    • yValue
    • item
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Scatter Chart

A Scatter chart is a set of individual points on a two-dimensional chart. A scatter plot has two axes, showing one data property along the horizontal axis (x-axis) and another along the vertical axis (y-axis). It can accept only one data series.

Let’s start to create a Scatter chart yourself step by step.

It will be a simple Scatter chart and you can improve it at any time by adding additional functions and properties.

First, we will make some preparatory steps.

1) Specify data that will be presented in your chart. In our example we will use measurement data (in JSON format) of some physical quantity that can exist in 3 states (type A, type B, type C). Learn more about available data formats.

var data = [
    { "b":4, "a":4.7, type: "Type A" },
    { "b":3.5, "a":0.8, type: "Type B" },
    { "b":2.4, "a":1.1, type: "Type C" },
    { "b":5.1, "a":10.5, type: "Type A" },
    { "b":4.8, "a":9.1, type: "Type B" },
];

2) Insert an HTML container for your future chart to the page e.g. with the name "chart_container" .

<div id="chart_container" style="width:280px;height:250px;border:1px solid #A4BED4;"></div>

Go on, fill in an object constructor.

3) Set chart type (value 'scatter') in the property view.

var scatterChart =  new dhtmlXChart({
    view:"scatter"
    ...
})

4) Define value 'chart_container' in the property container of an object constructor. It specifies the chart container.

var scatterChart =  new dhtmlXChart({
    view:"scatter",
    container:"chart_container"
    ...
})

5) Assign value '#a#' to the xValue property to set x-coordinates of the chart.

var scatterChart =  new dhtmlXChart({
    view:"scatter",
    container:"chart_container",
    xValue:"#a#",
    ...
})

6) Assign value '#b#' to the yValue property to set y-coordinates of the chart.

var scatterChart =  new dhtmlXChart({
    view:"scatter",
    container:"chart_container",
    xValue:"#a#",
    yValue:"#b#"
})

Other parameters are optional, choose them according to your needs.

7) Specify points tooltip e.g. value '#type#' (property tooltip).

var scatterChart =  new dhtmlXChart({
    view:"scatter",
    container:"chart_container",
    xValue:"#a#",
    yValue:"#b#",
    tooltip: "#type#"
})

8) Select outer, inner color of items markers and their shape (attributes 'borderColor','color' and 'type' of the item property).

var scatterChart =  new dhtmlXChart({
    view:"scatter",
    container:"chart_container",
    xValue:"#a#",
    yValue:"#b#",
    tooltip: "#type#",
    item:{
        borderColor:"#f38f00",
        color:"#ff9600",
        type:'s'
    }
})

9) Name xAxis and yAxis (scales values in scatter plots are calculated and set automatically). Learn more about chart scale here.

var scatterChart =  new dhtmlXChart({
    view:"scatter",
    container:"chart_container",
    xValue:"#a#",
    yValue:"#b#",
    tooltip: "#type#",
    item:{
        borderColor:"#f38f00",
        color:"#ff9600",
        type:'s'
    },
    yAxis:{
        title:"Value Y"
    },
    xAxis:{
        title:"Value X"
    }
})

10) Use method parse() to process data.

scatterChart.parse(data,"json");

Related sample: Scatter

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


view DHTMLX Docs

Documentation
  • view
  • container
  • xValue
  • yValue
  • item
Start Chart Scatter Chart

view

A chart type.

Value type: String

Available values for Scatter Chart is: “scatter”

var chart =  new dhtmlXChart({
    ...
    view:"scatter",
    ...
})

or

chart.define("view","scatter");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


container DHTMLX Docs

Documentation
  • view
  • container
  • xValue
  • yValue
  • item
Start Chart Scatter Chart

container

The id of an HTML container where you want to display the chart.

Value type: String

    <div id="chart_container" style="width:400px;height:200px;border:1px solid #A4BED4;"></div>

    <script>
        var chart =  new dhtmlXChart({
         container: "chart_container",
             ...
        })
    </script>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


xValue DHTMLX Docs

Documentation
  • view
  • container
  • xValue
  • yValue
  • item
Start Chart Scatter Chart

xValue

A property of dataset that defines xAxis values.

Value type: String

var chart =  new dhtmlXChart({
    xValue:"#years#",
    ...
})

or

chart.define("xValue","#years#");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


yValue DHTMLX Docs

Documentation
  • view
  • container
  • xValue
  • yValue
  • item
Start Chart Scatter Chart

yValue

A property of dataset that defines yAxis values.

Value type: String

var chart =  new dhtmlXChart({
    yValue:"#years#",
    ...
})

or

chart.define("yValue","#years#");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


item DHTMLX Docs

Documentation
  • view
  • container
  • xValue
  • yValue
  • item
Start Chart Scatter Chart

item

A chart point that presents an item.

Value type: Object

  • borderColor - (string) the outer color of an item marker
  • borderWidth - (number) the width of the border line (by default, 2)
  • color - (string) the inner color of an item marker
  • radius - (number) the item radius (by default, 4)
  • type - ('round' or 'r', 'square' or 's', 'diamond' or 'd') the shape of items markers (by default, 'round')
var chart =  new dhtmlXChart({
    ...
        item:{
               borderColor:"#ffffff",
               color:"#000000"
        },
        ...
})

or

chart.define("item",{
            borderColor:"#ffffff",
                        color:"#000000"
        },
);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Scales DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
    • Custom scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Scales

Standard scales

Horizontal and vertical scales can be set for Bar, Area, Scatter and Line Charts. You may define them both or just one of them.

Both vertical and horizontal scales have the following properties:

  • template – a template for scale labels (isn't necessary for the vertical scale);
  • title – the scale title;
  • color - the scale color;
  • lines – a boolean value (true or false), that defines if scale lines need to be drawn.

'Vertical Bar' and Line Charts personality.

  • origin - the scale origin (number)

Each mark of the horizontal scale (xAxis property) corresponds to one data object.

The vertical scale (yAxis property) sets the top and bottom limits for displayed values. The marks of the scale are defined in scale configuration by the three properties:

  • end – the top value of the scale,
  • start – the bottom value,
  • step – the scale unit.

If these properties are not set, they will be automatically calculated (note, if you set at least one of the properties, automatic calculation is canceled and you must specify 2 remaining properties for correct running).

You may control the minimum value of a scale using the "origin" property of a chart. For example, if you've set origin:0, the scale will start from 0 value, even if the minimum value in dataset is greater.

For Bar Chart sub-types "barH" and "stackedBarH" properties of xAxis and yAxis are swapping.

var chart =  new dhtmlXChart({
    // other config properties
    xAxis:{
        title: "Years",
        template: "#year#",
        lines: true
    },
    yAxis:{
        start:-10,
        end:10,
        step:2,
        title:"Sales,mil"
    },
    origin:0
});

var data = [
   { sales:"3.0", year:"2000" },
   { sales:"3.8", year:"2001" },
   // more data objects
   { sales:"4.8", year:"2009" }
];
chart.parse(data,"json");

If you have both positive and negative values, you may use the origin property to set the desired scale origin for better representation.

Custom scales

Starting from version 4.0, there is a possibility to set custom values for the horizontal scale (the vertical scale isn't applicable).

Let's assume, we have a dataset with data for random years but want to have the same step throughout the scale:

var data = [
    { id:1, sales:"55", year:2002, color: "#ee9336"},
    { id:2, sales:"61", year:2003, color: "#a7ee70"},
    { id:3, sales:"35", year:2006, color: "#58dccd"},
    { id:4, sales:"50", year:2007, color: "#476cee"},
    { id:5, sales:"59", year:2009, color: "#e33fc7"}
];

So here they are, 2 different scales for data presentation:

Default scale

var barChart =  new dhtmlXChart({
        view:"bar",
        container:"chart1",
        value:"#sales#",
        color: "#color#",
        xAxis:{ template:"#year#" },
        yAxis:{
            start:0,
            step:10,
            end:100
        }
});

Custom scale

var barChart1 =  new dhtmlXChart({
        view:"bar",
        container:"chart1",
        value:"#sales#",
        color: "#color#",
        xAxis:{
            template:function(item){
                return item.$unit;
            },
            value:function(item){
                return item.year;
            },
            units:{
                start:2000,
                end:2010,
                next:function(value){
                    return value+1;
                }
            }
        },
        yAxis:{
            start:0,
            step:10,
            end:100
        }
});

First of all, let's consider a common concept of building horizontal scales.

Default scale:

Scale is built based on the data source.

Each mark of the scale corresponds to one data object, i.e. number of scale marks == number of data objects.

Custom scale:

Scale generates a temporary dataset, where number of data objects == number of scale marks.

1) The scale items are set by the units attribute. Also the attribute causes generating the temporary dataset and populating it with the initial values.

There are 2 ways to set the units attribute:

  • to specify items manually:
// generates a dataset - [{$unit:2000}, {$unit:2001}, {$unit:2002}...{$unit:2010}]
units:[2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010]
  • to generate items automatically by specifying the start, end values and the scale step:
units:{
    start:2000, //the start scale value
    end:2010,   //the top scale value
    next:function(value){
        return value+1;
    }
} // generates the same dataset:
  // [{$unit:2000}, {$unit:2001}, {$unit:2002}...{$unit:2010}]

The next() function sets the scale step. As a parameter it takes the previous scale value and returns the next one. The first 'previous' value that the function takes is the value of the start attribute. For example, in case of the definition above: the function takes value 2000 and returns 2001, then takes 2001 and returns 2002, and so on, while the return value < = 2010 (the value of the end parameter).

2) After the initial temporary dataset was generated, the interpreter calls the value function for each item of the real data source.
The return value of the function is compared with the $unit property of the temporary items, and if value() == $unit data item's properties are added to the related temporary item.

For example, the value() function from the example above (value:function(item){ return item.year; }) for the first item ({ id:1, sales:"55", year:2002, color: "#ee9336"}) returns value 2002. The interpreter goes through all items of the temporary dataset and tries to find one with $unit==2002. Such an item exists (the 3rd item) and the temporary dataset will be changed as in:

[{$unit:2000}, {$unit:2001}, {$unit:2002}...{$unit:2002}] ->

[
    {$unit:2000},
    {$unit:2001},
    {$unit:2002, id:1, sales:"55", year:2002, color: "#ee9336"}...{$unit:2010}
]

The same way the interpreter checks each item of the real data source.

3) The resulting temporary dataset will look as in:

[
    {$unit:2000},
    {$unit:2001},
    {$unit:2002, id:1, sales:"55", year:2002, color: "#ee9336"},
    {$unit:2003, id:2, sales:"61", year:2003, color: "#a7ee70"},
    {$unit:2004},
    {$unit:2005},
    {$unit:2006, id:3, sales:"35", year:2006, color: "#58dccd"},
    {$unit:2007, id:4, sales:"50", year:2007, color: "#476cee"},
    {$unit:2008},
    {$unit:2009, id:5, sales:"59", year:2009, color: "#e33fc7"},
    {$unit:2010}
]

dhtmlxChart will built a chart based on these values.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Labels DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
    • Templates
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Labels

You may define labels for objects that a chart will represent. Line and Bar charts show labels above elements, Pie charts – outside sectors.

Labels are defined by templates:

var chart =  new dhtmlXChart({
    label:"#sales#"
});

Pie chart allows you to define labels inside its sectors as well via the pieInnerText property:

var chart =  new dhtmlXChart({
    label:"#year#",
    pieInnerText:function(obj){
        var sum = chart.sum("#sales#");
        return Math.round(obj.sales/sum*100) +"%"
    }
});

Label Lines in the Pie chart

You can also set label lines for sectors of a Pie chart (the lines that start from the middle of the sector's arc and end at the sector's label). For this purpose, set the labelLines property with the true value in the configuration of a Pie chart:

myPieChart = new dhtmlXChart({
    labelLines: true
});

Related sample: Lines

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Templates DHTMLX Docs

Documentation
  • Templates
Start Chart Labels

Templates

It's possible to use a template instead of a fixed value. You may use a string or a function as a template.

A string as a template

In this case the defined string is used as a value, but the name of a data property is replaced with the corresponding value. The property name is contained in the ##:

var chart =  new dhtmlXChart({
     view:"bar",
     container:"chart_container",
     value:"#sales#",
     label:"#sales# %"
}

A function as a template

This approach is used when we need to define some rules for displayed value or modify this value. The function gets data object as a parameter and returns the displayed value.

var chart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    label:"#year#",
    color:function(obj){
        if (obj.sales > 5) return "#ff9900";
        else return "#66cc00";
    }
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Legend DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
    • legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Legend

Legends are used to provide information about the charts shown on the page and tell you what each bar, line etc. represents.

Starting from version 4.0, legends get interactivity: each click on a legend item removes/adds the related data series (the first click - removes, the second - adds, the third - removes and so on).

Here is a small example which demonstrates how to create and configure the legend:

var barChart =  new dhtmlXChart({
    view:"bar",
    container:"chartBox",
        value:"#sales1#",
        color: "#58dccd",
    xAxis:{ template:"'#year#"},
    legend:{
        values:[
            {text:"Type A",color:"#58dccd"},
            {text:"Type B",color:"#a7ee70"},
            {text:"Type C",color:"#36abee"}
        ],
        valign:"middle",
        width:90,
        layout:"y"
    }
});
barChart.addSeries({ value:"#sales2#", color:"#a7ee70" });
barChart.addSeries({ value:"#sales3#", color:"#36abee" });
barChart.parse(mydataset,"json");

First of all, the legend is specified through the legend parameter.

  • values defines legend items (text - the item text label, color - the item color, markerType - the marker type, toggle - enables/disables the possibility to hide/show a specific graph by clicking on the graph legend item )
  • valign sets the vertical alignment of the legend
  • width sets the width of the legend block
  • layout defines whether items should be placed vertically or horizontally

The full list of the legend parameters you can find in chapter 'Legend parameter: attributes'.

Setting different markers for different graphs

To set different markers for graphs you should:

  1. Specify legend items manually, through values parameter (don't use template);
  2. Use markerType property to assign the desired marker type to a graph.
legend:{
    layout:"y",
    align:"right",
    valign:"middle",
    width:100,
    values:[
        {text:"Company A",color:"#00ccff"},  // uses the default marker
        {text:"Company B",color:"#e9df40"},  // uses the default marker
        {text:"Average",color:"#b25151",
            markerType: "item"}              // uses the specified marker
    ]
}

Automatic generation of legend items in the Pie chart

For the Pie chart you may use a predefined definition along with the usual legend definition (shown above) and create a legend in one line - by specifying a template for items labels (dhtmlxChart will do for all the rest for you on its own).

Let's compare:

//custom definition
var myChart =  new dhtmlXChart({
    view: "chart",
    type:"pie",
    ...
    legend:{
        width:75,
        align:"right",
        valign:"middle",
        template:"#month#"
    }
});

//default definition
var myChart =  new dhtmlXChart({
    view: "chart",
    type:"pie",
    ...
    legend:"#month#"
});

Related sample: Legend

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


legend DHTMLX Docs

Documentation
  • legend
Start Chart Legend

legend

Attributes

  • width - (number) the block width
  • align - (string) the horizontal align of the block: 'left', 'right' or 'center'
  • valign - (string) the vertical align of the block: 'top','bottom' or 'middle'
  • layout - (string) a layout that defines text stretching in horizontal or vertical direction :'x' or 'y'
  • padding - (number) the legend block padding. Doesn't affect parameters 'align' and 'valign'
  • margin - (number) the legend block margin
  • marker - an object that defines markers in the details block
  • type - (string) the marker type: 'square', 'round' or 'item' (if you set the 'item' type, the legend marker will use the same template as items in the chart)
  • radius - (number) the marker radius (by default, 3)
  • width - (number) the marker width
  • height - (number) the marker height
  • toggle - (boolean) enables/disables the possibility to hide/show a graph by clicking on the graph legend item. For all charts, except for Stacked Vertical Bar, Stacked Horizontal Bar and Stacked Area, the default value is true. For the excepted charts the default value is false.
  • values - an array of objects, each of which defines a separate legend item
  • text - (string) the text label of an item
  • color - (string) the color of an item
  • markerType - (string) the marker type: 'square', 'round' or 'item' (if you set the 'item' type, the legend marker will use the same template as items in the chart)
  • toggle - (boolean) enables/disables the possibility to hide/show a graph by clicking on the specified legend item

Legend block can be defined by:

  • a template_ for element text in legend block.
  • Value type: String, function
  • an object with settings.
  • Value type: Object
var chart =  new dhtmlXChart({
   legend:{
    width: 75,
    align:"right",
    valign:top,
    marker:{
        type:"round",
        width:15
    },
        values:[
        {text:"company A",color:"#3399ff"},
        {text:"company B",color:"#66cc00", markerType:"item"}
    ]
    },
    ...
})

or

chart.define("legend",{
    width: 75,
    align:"right",
    valign:top,
    marker:{
        type:"round",
        width:15
    },
    template:"#year#"
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Tooltips DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
    • Tooltip style
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Tooltips

Usually it's necessary to show additional information about chart items. It is possible to set labels for this purpose. However, if a text is rather long, you can use tooltips.

Tooltips are defined by the 'tooltip' property. You need to define a template for the tooltip in the following way:

var chart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    tooltip:"#details#"   });

Also it is possible to set the tooltip position - an offset from the mouse cursor position (by default, top offset is 0, left is 20)

var chart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    tooltip:{
        template:"#details#",
        dx:10,
        dy:5
    }
});

Tooltip style

The style of tooltip can be defined right in the template:

var chart =  new dhtmlXChart({
    ...
    tooltip:"<span style='color:#293CD6'>#details#</span>"
});

Also you may define the dhx_tooltip CSS class:

.dhx_tooltip{
    font-family:Tahoma;
    font-size:8pt;
    background-color:white;
    padding:2px 2px 2px 2px;
    border:1px solid #A4BED4;
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Adding and Deleting Items DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
    • Adding Items
    • Deleting Items
    • Getting Item Id
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Adding and Deleting Items

With dhtmlxChart, you can add and delete chart elements dynamically. Let's consider this possibility in details.

Adding Items

Initially, data are loaded by the load() or parse() methods.

But if you want to add additional data objects, you should use the add() method. The method requires a data object with necessary properties:

myChart.add({
    year: 2010,
    sales: 8.9
});

You may also define an item index in the second parameter:

myChart.add({
    year: 2010,
    sales: 8.9
},10);

Deleting Items

The remove() method deletes an item by its id:

myChart.remove(id);

To delete all items from a chart, you can use the clearAll() method:

myChart.clearAll();

Getting Item Id

If an item id is unknown, you can use the idByIndex() method to get it:

var id = myChart.idByIndex(10);

Moreover, there are first(), last(), next() and previous() methods for getting IDs of the corresponding items.

Related sample: Adding

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Grouping Data Objects DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
    • Custom Grouping Functor
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Grouping Data Objects

Sometimes the incoming data don't look like we want to display them and need to be processed before displaying in a chart. For example, we've got the sales information over the last years in several companies, and we want to show total sales per company in a chart. So, we need to get objects of the same companies and sum up their sales.

Grouping helps to resolve this problem. It allows gathering objects with the same value of the defined property and creating one object with new properties.

To group data objects, you need to define the 'group' property in the chart constructor or to call the group() method with an object as a parameter.

A group object has two properties:

  • by – (string) defines the property that should be used to group data objects,
  • map – (object) an object that defines the properties of the grouped objects.

Here is the code for the example described above:

var chart =  new dhtmlXChart({
     view:"bar",
     container:"chart_container",
     value:"#sales#",
     label:"#id#"
});
chart.parse(data,"json");
chart.group({
    by:"#company#",
    map:{
        sales:["#sales#","sum"]
    }
});

or

var chart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    label:"#id#",
    group:{
        by:"#company#",
        map:{
            sales:["#sales#","sum"]
        }
    }
})
chart.parse(data,"json");

where the incoming data object contains the sales of different companies per year:

var data = [
    { sales:"8.0", year:"2007", company: "company 1"},
    { sales:"7.3", year:"2008", company: "company 1" },
    { sales:"4.8", year:"2009", company: "company 1"},
    ...
    { sales:"5.3", year:"2009", company: "company 4"}
];

Here data objects are grouped by the "company" property. As a result, we've got new objects. The number of objects is equal to the number of companies. Each new data object has two properties: id (company) and sales (total sales of a certain company):

Properties of the grouped objects are set by the "map" attribute and defined by an array. The first element of this array is a template with a property from original data, the second one – the functor that needs being applied to all values of this property in a group.

Grouping provides the following functors:

  • "sum" – all the values are summed up,
  • "max" – the maximum value in a group,
  • "min" - the minimum value in a group.

It's possible to define a custom functor.

Related sample: Grouping and Sorting

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Custom Grouping Functor DHTMLX Docs

Documentation
  • Custom Grouping Functor
Start Chart Grouping Data Objects

Custom Grouping Functor

Properties of grouped objects are defined by an array. The first element of this array is a template with a property from original data, the second one – the functor which needs being applied to all values of this property in a group.

There are "sum", "max" and "min" functors. You may create your own functor – a function that gets two parameters:

  • the value template
  • an array with all data objects in a group

and returns the result value.

Let's take the example about sales of 4 companies described in the "Grouping" article. Here the "sum" functor was used to get the total sales of a company.

Let's now create a functor that will display the average sales. In this case grouping can be implemented as follows:

chart.group({
    by:"#company#",
    map:{
        sales:["#sales#",getAverage]
    }
});

function getAverage(prop,data){
    var count = data.length;
    var summ = 0;
    for(var i = 0; i < count; i++){
        summ += parseFloat(data[i].sales);
    }
    return summ/count;
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
    • Adding event
    • Deleting Event
    • attachEvent
    • detachEvent
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Events

dhtmlxChart allows handling different kinds of events in your application. It can be mouse click or click on item. The field of actions is rather wide.

You can attach several handlers to the same event, and all of them will be executed.

Event names are case-insensitive.

Adding event

If you need to attach event to an application, use attachEvent() method.

BarChart.attachEvent("onItemClick", function(id){
    BarChart.remove(id);
    return true;
})

In the code snippet showed above, event handler allows you to delete from the Bar Chart the bar you click on by using the remove() method.

Deleting Event

You can also delete event if you need. The detachEvent() method helps you here.

var myEvent = BarChart.attachEvent("onItemClick", function(id){
      BarChart.remove(id);
      return true;
});
BarChart.detachEvent(myEvent);

The following events are available in chart:

  • Before Events:
    • onBeforeAdd - occurs before an item is adding to datastore;
    • onBeforeDelete - fired before an item is deleted;
    • onBeforeRender - called before a chart is re-painted;
    • onBeforeSort - invoked before a dataset is sorted;
  • After Events:
    • onAfterAdd - occurs after an item is added to datastore;
    • onAfterDelete - called after an item is deleted;
    • onAfterSort - occurs after a dataset is sorted;
  • Item Events:
    • onItemClick - occurs when an item is clicked
    • onItemDblClick - called when an item is double-clicked
  • Mouse Events:
    • onMouseMove - occurs when mouse pointer is pointed over an item;
    • onMouseMoving - fired when mouse pointer is moved over a chart;
    • onMouseOut - called when the mouse pointer is moved out of item area;
  • XML Events
    • onXLE - invoked when XML parsing is over, data are already available;
    • onXLS - occurs when XML parsing starts;

Related sample: Events

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
Start Chart Events

attachEvent

adds any user-defined handler to available events

  • evName - event name;
  • evHandler - user-defined event handler.
void attachEvent();

Example

chart.attachEvent(evName, evHandler);

Several handlers can be attached to the same event, and all of them will be executed.

<div class='note'><p><p>event names are case-insensitive.</p>
</p></div>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
Start Chart Events

detachEvent

removes user-defined handler from inner events ( assuming that handler was attached by attachEvent )

  • id - if of handler ( result of attachEvent operation )
void detachEvent();

Example

var id = chart.attachEvent(evName, evHandler);
              ...
              chart.detachEvent(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Sorting DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
    • Custom sorting method
  • Filtering
  • Grid Integration
Start Chart

Sorting

In most cases we need to display values in a certain order. It isn’t a problem if incoming data are already ordered. But if sorting is necessary, you may use built-in chart sorting. It is rather easy and can be applied to the same chart several times.

Data can be sorted by sort property in the dhtmlxChart constructor or by sort() method. Sorting requires the following properties to be set:

  • by - a template for the property that the chart is sorted by,
  • dir - a sorting direction: "asc" or "dsc",
  • as - a sorting method: "int", "string", "string_strict" (case-sensitive "string") or custom
var data = [
    { sales: 4.1, year: 2003 },
    { sales: 4.3, year: 2004 },
    { sales: 3.0, year: 2000 },
    { sales: 3.8, year: 2001 },
    { sales: 3.4, year: 2002 },
    { sales: 7.3, year: 2008 },
    { sales: 4.8, year: 2009 },
    { sales: 9.9, year: 2005 },
    { sales: 7.4, year: 2006 },
    { sales: 9.0, year: 2007 }
];
var chart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
        value:"#sales#",
    label:"#sales#",
    xAxis:{
        template:"#year#",
        title:"Sales per year"
    },
    sort:{
        by:"#sales#",
        dir:"asc",
        as:"int"
    }
})
chart.parse(data,"json");

Here is the result of sorting by sales:

But if we change the sorting property, the result will be different:

chart.sort({
    by:"#year#",
    dir:"asc",
    as:"int"
});

Custom sorting method

There are three defined sorting methods: "int", "string" and "string_strict". If none of these methods is appropriate, you may set a new method.

A sorting method is defined by a function. This function is called for each pair of values and returns 1,-1 or 0:

  • 1 - the object with the first value in pair must go before the second one,
  • -1 - the second object goes before the first,
  • 0 - the order of both objects doesn't change.

For example, if we need to sort by time property that consists of minutes and seconds divided by ":", the following custom sorting can be used:

chart.sort({
    by:"#time#",
    dir:"asc",
    as: sortTime
});
function sortTime(a,b){
    a = a.split(":");
    b = b.split(":");
    if(a[0] > b[0]) return 1;
    else if(a[0] < b[0]) return -1;
    else{
        if(a[1] > b[1]) return 1;
        else if(a[1] < b[1]) return -1;
        return 0;
    }
}

Related sample: Sorting

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Filtering DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Filtering

Charts provides ability to filter data by one or several criteria. In this case, only items that match the parameters will be shown.

To filter a dataset, you need to call the filter() method. Each time the method is called, all chart data are refiltered (previous results aren't preserved).

It's possible to call the filter method in two modes:

  • filter(property,value)

This approach is used for 'contains' filtering. It is simple, but isn't flexible. The method shows items where "property" (the first parameter) contains 'value' (the second parameter). Such a filtering isn't case-sensitive:

chart.filter("#country#","Russia");
  • filter(function)

Using function as a parameter allows to define different filter rules and to filter by multiple properties. Filtering function is called for each object of dataset, and if it returns true, the object will be displayed:

chart.filter(function(obj){
    if (obj.sales > 10 && obj.company == "Company 3") return true;
    return false;
})

Related sample: Filtering

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Grid Integration DHTMLX Docs

Documentation
  • dhtmlXChart API
  • Chart Components Overview
  • Initializing Chart
  • Object Constructor
  • Data Loading
  • Multiple Graphs on a Chart
  • Chart Coloring
  • Configuration Properties
  • The List of Charts
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Radar Chart
  • Scatter Chart
  • Scales
  • Labels
  • Legend
  • Tooltips
  • Adding and Deleting Items
  • Grouping Data Objects
  • Events
  • Sorting
  • Filtering
  • Grid Integration
Start Chart

Grid Integration

Pretty often, you may need to integrate grid with chart, i.e. show grid's data and their changes on chart.

And this article we'll devote to grid-chart integration.

Related sample: Integration with grid

In short, the integration is implemented through the only code line:

myChart.parse(mygrid,"dhtmlxgrid");

In detail, to perform the integration you should make the following steps:

  1. Create dhtmlxChart object;
  2. Create dhtmlxGrid object;
  3. Load data to the grid;
  4. Load data from the grid to the chart;
  5. Additionally, implement chart refreshing when data in the grid is changed;
  6. And put everything into window.onload function to ensure that our code will be performed as soon as the page finishes loading.

Step 1. Create dhtmlxChart object

var myChart =  new dhtmlXChart({
    view:"bar",//sets chart's type. In our case it's vertical bar
    color:"#66ccff", //sets color of bars
    container:"chart_container",// an html container that will contain our chart
    // sets data that chart will present. #data0# refers to the first column of the grid
    value:"#data0#",
    label:"#data0#", // specifies chart labels
    width:30, // sets the width of bars
    origin:0, //represents positive and negative values
    yAxis:{  //sets vertical axis
        start:-1000,
        step: 500,
        end:2000
    },
    xAxis:{
        template:function(){
            return ""
        } //horizontal axis without labels
    }
});

Step 2. Create dhtmlxGrid object

var mygrid = new dhtmlXGridObject('gridbox');// creates dhtmlxGrid instance
mygrid.setSkin("dhx_skyblue")// sets skin of our grid

Step 3. Load data to the grid.

// loads data to the grid from the external file gridData.xml
mygrid.load("xml/gridData.xml");

Step 4. Load data from the grid to the chart

myChart.parse(mygrid,"dhtmlxgrid")// loads grid's data to the chart

Step 5. Implement chart refreshing when data in the grid is changed

// the function is called every time data in the grid is changed
function refresh_chart(){
    myChart.clearAll();// clears chart dataset
    myChart.parse(mygrid,"dhtmlxgrid"); //loads new grid data to the chart
};

mygrid.attachEvent("onEditCell",function(stage){// fires after the editor is closed
    // specifies stage of editing. "2" means that event will fire when the editor closes
    if (stage == 2)
    refresh_chart();// calls the function defined before
    return true;
});

Step 6.Put everything into window.onload() function

//the function ensures that our code will be performed when the page's loading ends
window.onload = function(){
...//the code stated above
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ColorPicker DHTMLX Docs

Documentation
  • ColorPicker
    • dhtmlXColorPicker API
    • How to Start with ColorPicker
    • Object Constructor
    • Skinning Colorpicker
    • Localizing ColorPicker
    • Manipulating ColorPicker
    • Manipulating Colors
    • Handling Events
    • Migration from 3.6 to 4.0
Start

ColorPicker

dhtmlxColorPicker component is a smart color picker that can be easily used either as an inline control or as a popup dialog box.

Its intuitive interface, flexibility and simplicity of usage make this component a good aid for different projects and applications.

ColorPicker gives users the possibility to specify colors in RGB, HSL and Hex formats. Complete JavaScript API is provided to help users to save time on configuring.

API reference
  • dhtmlXColorPicker API
Related resources
  • You may download dhtmlxColorPicker from dhtmlx.com
  • Check online samples for dhtmlxColorPicker
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Configuring ColorPicker

  • Object Constructor
  • How to Start with ColorPicker
  • Skinning Colorpicker
  • Localizing ColorPicker
 Covers the processes of skinning and localizing Colorpicker.

Working with ColorPicker

  • Manipulating ColorPicker
  • Manipulating Colors
  • Handling Events
 Describes possible operations with ColorPicker and colors and shows the basics of ColorPicker event handling.

Other

  • Migration from 3.6 to 4.0
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXColorPicker API DHTMLX Docs

Documentation
  • dhtmlXColorPicker API
    • Methods
    • Events
    • Others
  • How to Start with ColorPicker
  • Object Constructor
  • Skinning Colorpicker
  • Localizing ColorPicker
  • Manipulating ColorPicker
  • Manipulating Colors
  • Handling Events
  • Migration from 3.6 to 4.0
Start ColorPicker

dhtmlXColorPicker API

Methods
attachEvent | adds any user-defined handler to available events
close | closes dhtmlXColorPicker
detachEvent | detaches a handler from an event
dhtmlXColorPickerInput | adds dhtmlXColorPicker to some inputs
getCustomColors | returns user's custom colors saved in the memory panel
getSelectedColor | gets the selected color
hide | hides dhtmlXColorPicker
hideMemory | hides the panel with the last used colors
hideOnSelect | hides dhtmlXColorPicker after the user has chosen a color from the palette and pressed the "Select "button (or double-clicked on a color in the palette)
init | object initialization
isVisible | returns the state of dhtmlXColorPicker (visible or invisible)
linkTo | links dhtmlXColorPicker to some area
loadUserLanguage | sets a new language interface for dhtmlXColorPicker
setColor | selects the defined color
setCustomColors | defines user's custom colors
setImagePath | sets a path to images
setOnCancelHandler | sets the function called when selection is cancelled
setOnSelectHandler | sets the function called when color is selected (before closing)
setPosition | shows dhtmlXColorPicker in the specified position
setSkin | sets a skin for dhtmlXColorPicker
show | shows dhtmlXColorPicker
showMemory | shows the panel with the last used colors
unload | destructor. Unloads dhtmlXColorPicker instance and clears memory
Events
onCancel | fires on clicking the "Cancel" button
onChange | fires when the user selects a new color in the palette
onHide | fires after the dhtmlXColorPicker has closed
onSaveColor | fires on saving a custom color in the memory area
onSelect | fires after the user has selected a color and pressed the "Select" button
onShow | fires after dhtmlxColorPicker has opened
Other
i18n defines a collection of language settings
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • attachEvent
    • close
    • detachEvent
    • dhtmlXColorPickerInput
    • getCustomColors
    • getSelectedColor
    • hide
    • hideMemory
    • hideOnSelect
    • init
    • isVisible
    • linkTo
    • loadUserLanguage
    • setColor
    • setCustomColors
    • setImagePath
    • setOnCancelHandler
    • setOnSelectHandler
    • setPosition
    • setSkin
    • show
    • showMemory
    • unload
  • Events
  • Others
Start ColorPicker dhtmlXColorPicker API

Methods

attachEvent | adds any user-defined handler to available events
close | closes dhtmlXColorPicker
detachEvent | detaches a handler from an event
dhtmlXColorPickerInput | adds dhtmlXColorPicker to some inputs
getCustomColors | returns user's custom colors saved in the memory panel
getSelectedColor | gets the selected color
hide | hides dhtmlXColorPicker
hideMemory | hides the panel with the last used colors
hideOnSelect | hides dhtmlXColorPicker after the user has chosen a color from the palette and pressed the "Select "button (or double-clicked on a color in the palette)
init | object initialization
isVisible | returns the state of dhtmlXColorPicker (visible or invisible)
linkTo | links dhtmlXColorPicker to some area
loadUserLanguage | sets a new language interface for dhtmlXColorPicker
setColor | selects the defined color
setCustomColors | defines user's custom colors
setImagePath | sets a path to images
setOnCancelHandler | sets the function called when selection is cancelled
setOnSelectHandler | sets the function called when color is selected (before closing)
setPosition | shows dhtmlXColorPicker in the specified position
setSkin | sets a skin for dhtmlXColorPicker
show | shows dhtmlXColorPicker
showMemory | shows the panel with the last used colors
unload | destructor. Unloads dhtmlXColorPicker instance and clears memory
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


close DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

close

closes dhtmlXColorPicker

void close();

Deprecated

from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXColorPickerInput DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

dhtmlXColorPickerInput

adds dhtmlXColorPicker to some inputs

void dhtmlXColorPickerInput(array inputs);

Deprecated

from version 4.0

Parameters

inputs array an array of input values

Example

var myColorPicker = dhtmlXColorPickerInput(['input1','input2','input3']);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCustomColors DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

getCustomColors

returns user's custom colors saved in the memory panel

array getCustomColors();

Returns

array array of colors codes

Example

myColorPicker.setCustomColors("#aabbcc");

var colorsCustom = myColorPicker.getCustomColors();
// (["#aabbcc"]);

// or
myColorPicker.setCustomColors("#aabbcc","rgb(255,0,0)",[255,0,233]);

var colorsCustom = myColorPicker.getCustomColors();
// (["#aabbcc", "#ff0000", "#ff00e9"]);

// or
myColorPicker.setCustomColors("#aabbcc,#ff0000,#00ff00");

var colorsCustom = myColorPicker.getCustomColors();
// (["#aabbcc", "#ff0000", "#00ff00"]);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelectedColor DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

getSelectedColor

gets the selected color

array getSelectedColor();

Returns

array array of color codes in Hex, RGB and HSL formats

Example

myColorPicker.setColor("#eb4c13");

var colorSelected = myColorPicker.getSelectedColor();
// ["#eb4c13", [235, 76, 19], [16, 85, 50]]

Details

Array elements:

  • a Hex rgb value
  • an RGB component array
  • an HSL component array
See also
  • API
    • setColor
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


hide DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

hide

hides dhtmlXColorPicker

void hide();

Example

myColorPicker.hide();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMemory DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

hideMemory

hides the panel with the last used colors

void hideMemory();

Example

myColorPicker.hideMemory();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideOnSelect DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

hideOnSelect

hides dhtmlXColorPicker after the user has chosen a color from the palette and pressed the "Select "button (or double-clicked on a color in the palette)

void hideOnSelect(boolean flag);

Parameters

flag boolean enables/disables hiding ColorPicker

Example

myColorPicker.hideOnSelect(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


init DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

init

object initialization

void init();

Deprecated

from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isVisible DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

isVisible

returns the state of dhtmlXColorPicker (visible or invisible)

boolean isVisible();

Returns

boolean true, if the ColorPicker is visible, false - if invisible

Example

myColorPicker.isVisible();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


linkTo DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

linkTo

links dhtmlXColorPicker to some area

void linkTo(object obj1,object obj2, [object obj3] );

Parameters

obj1 | object | color target
obj2 | object | action element
obj3 | object | optional, color value target

Example

myColorPicker.linkTo("a1","a2","a3");

Details

The first parameter of this method indicates the object the color of which will be changed, the second one - indicates the object that will call the color picker, and the third (optional) parameter will contain the hex code of the chosen color.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadUserLanguage DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

loadUserLanguage

sets a new language interface for dhtmlXColorPicker

void loadUserLanguage(string lang);

Parameters

lang string language (e.g. "en-us" or "ru")

Example

dhtmlXColorPicker.prototype.i18n["en-us"] = {
      langname: "en-us",
      labelHue : "Hue",
      labelSat : "Sat",
      labelLum : "Lum",
      labelRed : "Red",
      labelGreen : "Green",
      labelBlue : "Blue",
      btnAddColor : "Add to Custom Colors",
      btnSelect : "Select",
      btnCancel : "Cancel"
};

var myColorPicker = dhtmlXColorPicker(["input1"]);

myColorPicker.loadUserLanguage("en-us");

See also
  • API
    • i18n
  • Articles
    • Localizing ColorPicker
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setColor DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

setColor

selects the defined color

void setColor(string|array color);

Parameters

color string|array the value of a color

Example

myColorPicker.setColor([143,222,12]);
//or
myColorPicker.setColor("#8fde0c");
//or
myColorPicker.setColor("rgb(143,222,12)");

Details

3 variants of passing the value of a color:

  • a string in the Hex format like "#8fde0c";
  • a string in RGB format like "rgb(143,222,12)";
  • an RGB array like [143,222,12].
See also
  • API
    • getSelectedColor
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setCustomColors DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

setCustomColors

defines user's custom colors

void setCustomColors(string|array color);

Parameters

color string|array the value of a color or a comma-separated list of colors in different formats

Example

myColorPicker.setCustomColors("#aabbcc");
//or
myColorPicker.setCustomColors("#aabbcc","rgb(255,0,0)",[255,0,233]);
//or
myColorPicker.setCustomColors("#aabbcc,#ff0000,#00ff00");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setImagePath DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

setImagePath

sets a path to images

void setImagePath();

Deprecated

since version 4.0 the function is deprecated, as it is no longer needed

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOnCancelHandler DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

setOnCancelHandler

sets the function called when selection is cancelled

void setOnCancelHandler(function func);

Deprecated

from version 4.0

Parameters

func function event handling function (or its name)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOnSelectHandler DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

setOnSelectHandler

sets the function called when color is selected (before closing)

void setOnSelectHandler(function func);

Deprecated

from version 4.0

Parameters

func function event handling function (or its name)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setPosition DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

setPosition

shows dhtmlXColorPicker in the specified position

void setPosition(number x,number y);

Parameters

x | number | left position "px"
y | number | top position "px"

Example

myColorPicker.setPosition(390, 90);

Details

if ColorPicker is attached to an input, you should specify its position as follows:

myColorPicker.setPosition("right");
// or
myColorPicker.setPosition("bottom");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

setSkin

sets a skin for dhtmlXColorPicker

void setSkin(string name);

Parameters

name string name of the skin

Example

myColorPicker.setSkin('dhx_skyblue');

Details

For using this function the necessary CSS files should be included in the page. If you are going to use only one skin, there's no need to call this function. The skin will be defined automatically according to the included CSS file.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

show

shows dhtmlXColorPicker

void show();

Example

myColorPicker.show();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMemory DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

showMemory

shows the panel with the last used colors

void showMemory();

Example

myColorPicker.showMemory();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • attachEvent
  • close
  • detachEvent
  • dhtmlXColorPickerInput
  • getCustomColors
  • getSelectedColor
  • hide
  • hideMemory
  • hideOnSelect
  • init
  • isVisible
  • linkTo
  • loadUserLanguage
  • setColor
  • setCustomColors
  • setImagePath
  • setOnCancelHandler
  • setOnSelectHandler
  • setPosition
  • setSkin
  • show
  • showMemory
  • unload
Start ColorPicker dhtmlXColorPicker API Methods

unload

destructor. Unloads dhtmlXColorPicker instance and clears memory

void unload();

Example

var myColorPicker = new dhtmlXColorPicker(...);
 // unloading
myColorPicker.unload();
myColorPicker = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onCancel
    • onChange
    • onHide
    • onSaveColor
    • onSelect
    • onShow
  • Others
Start ColorPicker dhtmlXColorPicker API

Events

onCancel | fires on clicking the "Cancel" button
onChange | fires when the user selects a new color in the palette
onHide | fires after the dhtmlXColorPicker has closed
onSaveColor | fires on saving a custom color in the memory area
onSelect | fires after the user has selected a color and pressed the "Select" button
onShow | fires after dhtmlxColorPicker has opened
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCancel DHTMLX Docs

Documentation
  • onCancel
  • onChange
  • onHide
  • onSaveColor
  • onSelect
  • onShow
Start ColorPicker dhtmlXColorPicker API Events

onCancel

fires on clicking the "Cancel" button

void onCancel(HTMLElement node){ ... };

Parameters

node HTMLElement DOM object of the active input, in case of the input-based initialization, otherwise null

Example

myColorPicker.attachEvent("onCancel", function(node){});

Details

The event is blockable.Return true to close dhtmlXColorPicker on clicking the "Cancel" button, otherwise dhtmlXColorPicker remains open.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onChange DHTMLX Docs

Documentation
  • onCancel
  • onChange
  • onHide
  • onSaveColor
  • onSelect
  • onShow
Start ColorPicker dhtmlXColorPicker API Events

onChange

fires when the user selects a new color in the palette

void onChange(string color){ ... };

Parameters

color string the selected color in the Hex color format

Example

myColorPicker.attachEvent("onChange",function(color){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onHide DHTMLX Docs

Documentation
  • onCancel
  • onChange
  • onHide
  • onSaveColor
  • onSelect
  • onShow
Start ColorPicker dhtmlXColorPicker API Events

onHide

fires after the dhtmlXColorPicker has closed

void onHide(HTMLElement node){ ... };

Parameters

node HTMLElement DOM object of the active input, in case of the input-based initialization, otherwise null

Example

myColorPicker.attachEvent("onHide", function(node){});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSaveColor DHTMLX Docs

Documentation
  • onCancel
  • onChange
  • onHide
  • onSaveColor
  • onSelect
  • onShow
Start ColorPicker dhtmlXColorPicker API Events

onSaveColor

fires on saving a custom color in the memory area

void onSaveColor(string color){ ... };

Parameters

color string the selected color written in hex color format (#a4bed4)

Example

myCP.attachEvent("onSaveColor", function(color){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelect DHTMLX Docs

Documentation
  • onCancel
  • onChange
  • onHide
  • onSaveColor
  • onSelect
  • onShow
Start ColorPicker dhtmlXColorPicker API Events

onSelect

fires after the user has selected a color and pressed the "Select" button

void onSelect(string color,HTMLElement node){ ... };

Parameters

color | string | the selected color in hex color format (e.g. "#aabbcc")
node | HTMLElement | DOM object of the active input, in case of the input-based initialization, otherwise null

Example

myColorPicker.attachEvent("onSelect", function(color,node){});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onShow DHTMLX Docs

Documentation
  • onCancel
  • onChange
  • onHide
  • onSaveColor
  • onSelect
  • onShow
Start ColorPicker dhtmlXColorPicker API Events

onShow

fires after dhtmlxColorPicker has opened

void onShow(HTMLElement node){ ... };

Parameters

node HTMLElement DOM object of the active input, in case of the input-based initialization, otherwise null

Example

myColorPicker.attachEvent("onShow", function(node){});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • i18n
Start ColorPicker dhtmlXColorPicker API

Others

i18n defines a collection of language settings
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


i18n DHTMLX Docs

Documentation
  • i18n
Start ColorPicker dhtmlXColorPicker API Others

i18n

defines a collection of language settings

object i18n;

Example

dhtmlXColorPicker.prototype.i18n["en-us"] = {
    langname: 'en-us', // name of the language
    labelHue : "Hue",  // label name of the hue input
    labelSat : "Sat",  // label name of the saturation input
    labelLum : "Lum",  // label name of the lightness input
    labelRed : "Red",  // label name of the Red input
    labelGreen : "Green", // label name of the Green input
    labelBlue : "Blue",   // label name of the Blue input
    btnAddColor : "Add to Custom Colors", // button "add a color to custom colors"
    btnSelect : "Select", // button "select"
    btnCancel : "Cancel"  // button "cancel"
};

See also
  • API
    • loadUserLanguage
  • Articles
    • Localizing ColorPicker
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


How to Start with ColorPicker DHTMLX Docs

Documentation
  • dhtmlXColorPicker API
  • How to Start with ColorPicker
    • DIV-Based Initialization
    • Initializing and attaching to inputs
  • Object Constructor
  • Skinning Colorpicker
  • Localizing ColorPicker
  • Manipulating ColorPicker
  • Manipulating Colors
  • Handling Events
  • Migration from 3.6 to 4.0
Start ColorPicker

How to Start with ColorPicker

There are two ways of ColorPicker initialization:

  1. by explicitly specifying the container, e.g. div. In this case ColorPicker will be set in the container the position of which will define the ColorPicker's place on a page;

  2. without specifying a container. Thus, ColorPicker will be initially hidden.

    In order to show it, the method show() should be used and the method setPosition() will help to position ColorPicker on the page.

    This process can be automatized, by linking one or more inputs to ColorPicker. Clicking an input will show ColorPicker next to it.

    To link inputs to ColorPicker you should define a list of inputs at the step of initialization or call the method linkTo() for each input.

The first steps that need to be done for any type of dhtmlxColorPicker's initialization are the following:

  1. Download the dhtmlxColorPicker package from the server and place it in a folder;
  2. Create an HTML file;
  3. Place the full paths to dhtmlxColorPicker's CSS and JS files into the header of the created HTML file.

If you use dhtmlxColorPicker standalone you need to include 2 files:

  • dhtmlxcolorpicker.js
  • dhtmlxcolorpicker.css
<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" href="../codebase/dhtmlxcolorpicker.css">
        <script src="../codebase/dhtmlxcolorpicker.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

If you use dhtmlxColorPicker as a part of "dhtmlxSuite" package you need to include 2 files:

  • dhtmlx.js
  • dhtmlx.css
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

DIV-Based Initialization

Step 1. Creating a container

The user needs to create an object where dhtmlxColorPicker will be placed later. In this example the object is a <div> element on page which is placed in the <body> tag:

<div id="colorPicker" style="position:absolute;top:150px;left:200px;"></div>

Step 2. Creating dhtmlXColorPicker object

The next step is to create a new dhtmlXColorPicker and place it after the <div> element (object) that we've just created:

var myColorPicker = new dhtmlXColorPicker({
    parent : "c1",
    color : "#0000ff",
    custom_colors : true
});

parameters:

  • parent - (string or object) id of HTML element which will be used as parent ( or object itself ), mandatory
  • color - (string) the color initially set in ColorPicker (setColor())
  • custom_colors - (string|array|boolean) true to show a block of predefined custom colors (showMemory()), to fill the block set a string|array of colors (setCustomColors())

You can find other available parameters in the article Object Constructor.

Initializing and attaching to inputs

As it was said before, it is possible to create ColorPicker and link it to several inputs situated on a page.

Step 1. Creating inputs

Firstly, the user should create the inputs, for example:

<input type="text" id="colorPicker_1">
<input type="text" id="colorPicker_2">
<input type="text" id="colorPicker_3">
<input type="text" id="colorPicker_4">

Step 2. Creating ColorPicker and linking it to inputs

And then, the following code creates a ColorPicker object and links it to the created inputs:

myColorPicker = new dhtmlXColorPicker("СolorPicker_1",
    "СolorPicker_2","СolorPicker_3","СolorPicker_4");

or

myColorPicker = new dhtmlXColorPicker();
myColorPicker.linkTo("СolorPicker_1");
myColorPicker.linkTo("СolorPicker_2");
myColorPicker.linkTo("СolorPicker_3");
myColorPicker.linkTo("СolorPicker_4");

The ColorPicker will be activated when the user clicks somewhere in the input.

When the necessary color is chosen and the button "Select" is pressed, the ColorPicker closes. The code of the chosen color is displayed in the input (for example, #77e5cd).

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • dhtmlXColorPicker API
  • How to Start with ColorPicker
  • Object Constructor
  • Skinning Colorpicker
  • Localizing ColorPicker
  • Manipulating ColorPicker
  • Manipulating Colors
  • Handling Events
  • Migration from 3.6 to 4.0
Start ColorPicker

Object Constructor

var myColorPicker = new dhtmlXColorPicker({
    parent:         "c1",
    input:          "b1",
    target_color:   "cv1",
    target_value:   "v1",
    color:          "#0000ff",
    custom_colors:  ["#00f0f0",[22,66,77],"rgb(255,24,238)"],
    hide:           true,
    closeable:      false
});

parameters:

  • parent - (string|object) the id of an HTML element which will be used as a parent (or object itself), mandatory
  • input - (string|object) the area to which ColorPicker is linked (linkTo)
  • target_color - (string|object) the area (or its id) that will be colored in the chosen color
  • target_value - (string|object) the value of the chosen color
  • color - (string) the color initially set in ColorPicker (setColor)
  • custom_colors - (string|array|boolean) true to show a block of predefined custom colors; to fill the block set a string|array of colors
  • hide - (boolean) the default value is false, if true - the container is initially hidden and appears on clicking the element specified in the "input" parameter or after calling the show method
  • skin - (string) "dhx_skyblue","dhx_web", or "dhx_terrace"
  • closeable - (boolean) set to false to cancel closing of a colorpicker on clicking the "Cancel" button
<div id="my_picker_here"></div>
<script>
    //common init code
    var myColorPicker = new dhtmlXColorPicker("my_picker_here");
</script>

ColorPicker can also be initialized for several inputs at once. There are two variants of such initialization. You may use one of the snippets below:

<input type="text" id="inp1"/>
<input type="text" id="inp2"/>
<input type="text" id="inp3"/>
<script>
    //common init code
    var myColorPicker = new dhtmlXColorPicker(["inp1","inp2","inp3"]);
</script>

or

myColorPicker = new dhtmlXColorPicker([
    {
       input: "button1",
       target_color: "cv1",
       target_value: "inp1",
       color: "#05ff50"
    },
    {
       input: "button2",
       target_color: "cv2",
       target_value: "inp2",
       custom_colors: true
    },
    {
       input: "button3",
       target_color: "cv3",
       target_value: "inp3",
       color: "#f5005f",
       custom_colors: true
    }
]);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Skinning Colorpicker DHTMLX Docs

Documentation
  • dhtmlXColorPicker API
  • How to Start with ColorPicker
  • Object Constructor
  • Skinning Colorpicker
    • Available Skins
  • Localizing ColorPicker
  • Manipulating ColorPicker
  • Manipulating Colors
  • Handling Events
  • Migration from 3.6 to 4.0
Start ColorPicker

Skinning Colorpicker

The user can set one of the predefined skins for dhtmlxColorPicker in the following way:

myColorPicker.setSkin(skin);

Note: In order to use different skins, it's necessary to include the corressponding CSS files on the page.

If you want to use only one skin, there's no need to call the method setSkin(). The skin will be defined automatically, depending on the included CSS file.

Available Skins

The following skins are available for this component:

"dhx_skyblue" | "dhx_web"
"dhx_terrace" | "material"
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Localizing ColorPicker DHTMLX Docs

Documentation
  • dhtmlXColorPicker API
  • How to Start with ColorPicker
  • Object Constructor
  • Skinning Colorpicker
  • Localizing ColorPicker
  • Manipulating ColorPicker
  • Manipulating Colors
  • Handling Events
  • Migration from 3.6 to 4.0
Start ColorPicker

Localizing ColorPicker

dhtmlxColorPicker allows its users to add and use different languages with the ability to switch between them dynamically.
Firstly, the user needs to define necessary language settings with script (if no language pack is provided with the color picker package). This can be done in the following way:

dhtmlXColorPicker.prototype.i18n["ru"] = {
      labelHue : "Отт",
      labelSat : "Нас",
      labelLum : "Ярк",
      labelRed : "Крас",
      labelGreen : "Зел",
      labelBlue : "Син",
      btnAddColor : "Добавить к выбранным",
      btnSelect : "Выбрать",
      btnCancel : "Отмена"
}

When you have necessary language settings, you can switch between them using loadUserLanguage() method indicating the id of the language you used for its definition:

myColorPicker.loadUserLanguage("ru");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Manipulating ColorPicker DHTMLX Docs

Documentation
  • dhtmlXColorPicker API
  • How to Start with ColorPicker
  • Object Constructor
  • Skinning Colorpicker
  • Localizing ColorPicker
  • Manipulating ColorPicker
    • Setting Color Picker's Position
    • Hiding/Showing Color Picker
    • Linking Color Picker to Object
    • Hiding Color Picker on Color Select
    • Removing Color Picker
  • Manipulating Colors
  • Handling Events
  • Migration from 3.6 to 4.0
Start ColorPicker

Manipulating ColorPicker

Setting Color Picker's Position

There is a method in dhtmlxColorPicker that allows changing its position on the fly:

myColorPicker.setPosition(x,y);

This method sets new left (x) top (y) position of the component.

Hiding/Showing Color Picker

The Color Picker can be easily shown/hidden in the following way:

myColorPicker.show();
myColorPicker.hide();

Linking Color Picker to Object

The color picker can be linked to some objects on page. In this case, the linkTo() method is used. The first parameter of this method indicates the object which color will be changed, the second one - indicates the object that will call the color picker, and the third (optional) parameter will contain the hex code of the chosen color.

For example, the code below shows the color picker linked to inputs and a button. The color picker is called by pressing the button. The chosen color will be set as background for one input, and another input will contain this color's value in hex format:

<input id="a1"> // create an input
<input id="a3"> //create one more input
<input type="button" value="Select color" id="a2"> // create a button

<script>
    var myColorPicker = new dhtmlXColorPicker();
    myColorPicker.linkTo("a1","a2","a3");
</script>

Hiding Color Picker on Color Select

By default, the Color Picker's configuration presupposes that the component will be hidden/closed after the end-user chooses the color in the palette and presses the button "Select".

The method hideOnSelect() is responsible for this behavior of the color picker. If this method is set to true, dhtmlxColorPicker will behave the way that was described above. Setting this method to false means that the component will stay on page even after pressing the button "Select".

myColorPicker.hideOnSelect(true/false); // true by default

Removing Color Picker

The method unload() removes the color picker:

var myColorPicker = new dhtmlXColorPicker(...);
 // unloading
myColorPicker.unload();myColorPicker = null;
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Manipulating Colors DHTMLX Docs

Documentation
  • dhtmlXColorPicker API
  • How to Start with ColorPicker
  • Object Constructor
  • Skinning Colorpicker
  • Localizing ColorPicker
  • Manipulating ColorPicker
  • Manipulating Colors
    • Setting/Getting Color
    • Setting Custom Colors
  • Handling Events
  • Migration from 3.6 to 4.0
Start ColorPicker

Manipulating Colors

Setting/Getting Color

The user can set the initial color for the Color Picker using the setColor method:

myColorPicker.setColor(color);

The parameter color can be set as:

  • a string with the Hex color format;
  • an array of decimal values of Red, Green, and Blue;
  • a string with decimal values of Red, Green, and Blue.
myColorPicker.setColor("#123456");
//or
myColorPicker.setColor([56,34,12]);
//or
myColorPicker.setColor("rgb(10,27,99)");

The color currently selected in the Color Picker can be easily returned by the getSelectedColor method:

var colorSelected = myColorPicker.getSelectedColor();

Setting Custom Colors

A custom colors palette can be shown by setting the custom_colors parameter to true. This palette can be used to keep colors that are most used by a user. The colors can be added there by end-users in the following way:

  • selecting the necessary color;
  • pressing the "Add To Custom Colors" button.

Custom colors can be also set by script through the setCustomColors method:

myColorPicker.setCustomColors(colors);

The colors parameter is an array of predefined colors in the Hex color format:

myColorPicker.setCustomColors("#00f0f0",[22,66,77],"rgb(255,24,238)");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXColorPicker API
  • How to Start with ColorPicker
  • Object Constructor
  • Skinning Colorpicker
  • Localizing ColorPicker
  • Manipulating ColorPicker
  • Manipulating Colors
  • Handling Events
    • Attaching events
    • Detaching events
    • The list of events
  • Migration from 3.6 to 4.0
Start ColorPicker

Handling Events

Attaching events

You can attach several handlers to the same event using the method attachEvent():

var myEvent = myColorPicker.attachEvent("onSelect", function(color,node){
    // your code here
});

Several handlers can be attached to one and the same event, and all of them will be executed.

The names of the events are case-insensitive.

Detaching events

To detach an event use the method detachEvent():

myColorPicker.detachEvent(myEvent);

The list of events

You can find the full list of events in the ColorPicker API.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration from 3.6 to 4.0 DHTMLX Docs

Documentation
  • dhtmlXColorPicker API
  • How to Start with ColorPicker
  • Object Constructor
  • Skinning Colorpicker
  • Localizing ColorPicker
  • Manipulating ColorPicker
  • Manipulating Colors
  • Handling Events
  • Migration from 3.6 to 4.0
Start ColorPicker

Migration from 3.6 to 4.0

1) In the new version of DHTMLX Library the names of some methods were changed. We've made these changes as the previous names of the methods under question didn't reflect their functionality precisely, which could cause ambiguity or misunderstanding.

2) Since the release of the latest version of DHTMLX library some functionality has been removed. It was made as this functionality is no longer needed and therefore isn't supported.

Up to version 3.6 | From version 4.0
Function names changed
new dhtmlXColorPickerInput() | new dhtmlXColorPicker()
myColorPicker.setOnSelectHandler(function(){}) | myColorPicker.attachEvent("onSelect", function(){})
myColorPicker.setOnCancelHandler(function(){}) | myColorPicker.attachEvent("onCancel", function(){})
window.dhtmlxColorPickerLangModules | dhtmlXColorPicker.prototype.i18n
myColorPicker.close() | myColorPicker.hide()
Functionality was removed
myColorPicker.init() | inited automatically
myColorPicker.setImagePath(path) | no longer used
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Combo DHTMLX Docs

Documentation
  • Combo
    • dhtmlXCombo API
    • How to Start with Combo
    • Object Constructor
    • Loading Data
    • Integrating with FORM Tag
    • Autocomplete in Combo
    • Operating Combobox
    • Operating Combobox's Options
    • Grouping Combos
    • Creating Combo with Images and Checkboxes
    • Multicolumn Combo
    • Handling Events
    • Migration from 3.6 to 4.0
Start

Combo

dhtmlxCombo is a cross-browser JavaScript combo box with an autocomplete feature. It extends basic select box functionality and provides the ability to display suggestions while a user is typing in a text field.
dhtmlxCombo can be converted from existing instances of HTML Select, or populated with JavaScript. With Ajax data loading, it can get a list of values dynamically from a server data source.

API reference
  • dhtmlXCombo API
Related resources
  • You may download dhtmlxCombo from dhtmlx.com
  • Check online samples for dhtmlxCombo
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Working with Combo

  • How to Start with Combo
  • Object Constructor
  • Integrating with FORM Tag
  • Operating Combobox
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
  • Multicolumn Combo
 Includes Combo initialization and the ways of manipulating this component.

Working with Combo options

  • Loading Data
  • Autocomplete in Combo
  • Operating Combobox's Options
 Shows the possibilities of manipulating Combo options.

Other

  • Handling Events
  • Migration from 3.6 to 4.0
 Covers common info you may need while working with Combo.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXCombo API DHTMLX Docs

Documentation
  • dhtmlXCombo API
    • Methods
    • Events
    • Others
  • How to Start with Combo
  • Object Constructor
  • Loading Data
  • Integrating with FORM Tag
  • Autocomplete in Combo
  • Operating Combobox
  • Operating Combobox's Options
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
  • Multicolumn Combo
  • Handling Events
  • Migration from 3.6 to 4.0
Start Combo

dhtmlXCombo API

Methods
addOption | adds a new option
allowFreeText | defines whether a combo accepts any entered text or the options from the list only
attachChildCombo | grouping combos
attachEvent | adds any user-defined handler to available events
clearAll | removes all options from combobox
closeAll | closes an opened combobox list
confirmValue | confirms the entered value
deleteOption | deletes option by value
destructor | destroys the object and any related HTML elements
detachEvent | detaches a handler from an event
disable | disables a combobox
disableAutocomplete | disables the automatic filling of the combo text field
enable | enables a combobox
enableAutocomplete | enables the automatic filling of the combo text field
enableFilteringMode | enables the filtering mode
enableOptionAutoHeight | enables or disables auto height of the list. The method can't be used with dynamic loading.
enableOptionAutoPositioning | enables or disables options auto positioning
enableOptionAutoWidth | enables or disables auto width of options. The method can't be used with dynamic loading.
filter | filters combo
forEachOption | iterator, calls a user-defined handler function for each option
getActualValue | gets value which will be sent to a server once the form is submitted
getBase | returns a combo's main DOM element
getButton | returns a div DOM element used for a button
getChecked | gets the list of the checked options' values
getComboText | gets the current text of combobox
getIndexByValue | returns the index of an option by value
getInput | returns a div DOM element used for an input
getList | returns a div DOM element used for a list
getOption | gets an option by value
getOptionByIndex | gets an option by index
getOptionByLabel | gets option by label
getOptionsCount | returns the number of combo options
getParent | returns the parent of a DOM element where a combo is initialized
getSelectedIndex | gets index of the selected option
getSelectedText | gets text of the selected option
getSelectedValue | gets value of the selected item
hide | the method hides the whole combo control
isChecked | checks whether a combobox's item is checked
isEnabled | checks whether a combobox is enabled
isVisible | checks whether a combobox is visible
load | loads data to the component via XML or JSON, usually data-values pairs
loadXML | loads the list of options from XML
loadXMLString | loads the list of options from XML string
openSelect | opens the list of options
readonly | switches to readonly mode
render | enables/disables rendering immediately after changes have been made in combobox
selectOption | selects an option
setAutoSubCombo | grouping combos
setChecked | sets the option checked
setComboText | sets some text in a combobox
setComboValue | sets some value in combobox
setDefaultImage | sets the default image
setFilterHandler | sets a custom function for filtering
setFocus | sets focus on the selected option (displayed in the input field)
setFontSize | sets different font sizes for an entered text and for list options text
setImagePath | sets the path to the folder with icons
setName | sets the name used during the form submitting
setOptionHeight | sets the height of combo list
setOptionIndex | changes a single option's position
setOptionWidth | sets the minimal width for combo list
setPlaceholder | sets a placeholder for a combo input
setSize | changes the control's size
setSkin | sets a skin for a combobox
setTemplate | sets a template for an input and options text in the combobox
show | shows combobox ( reverse to the hide command )
sort | sorts listed options
unSelectOption | unselects the option selected in the list
unload | destructor, unloads the combo
updateOption | updates the specified option in the combo box
Events
onBeforeCheck | fires before a checkbox is checked in a combo
onBlur | fires when the focus is moved out from the combo
onChange | fires when the combo's value is changed
onCheck | fires on checking a checkbox in a combo
onClose | fires when the user closes the combo list
onDynXLS | fires when the combo list is being populated with data from the server
onFocus | fires when an item has got focus
onKeyPressed | fires right after the key is pressed inside of the combo
onOpen | fires right after the combo list has opened
onSelectionChange | fires when the preselected value inside the combo changes
onSyncApply | fires when data synchronization is finished
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Other
DOMParent | returns parent DOM element where combo initialized
DOMelem | returns combo's main DOM element
DOMelem_button | returns div DOM element used for button
DOMelem_input | returns input DOM element
DOMlist | returns div DOM element used for list
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • addOption
    • allowFreeText
    • attachChildCombo
    • attachEvent
    • clearAll
    • closeAll
    • confirmValue
    • deleteOption
    • destructor
    • detachEvent
    • disable
    • disableAutocomplete
    • enable
    • enableAutocomplete
    • enableFilteringMode
    • enableOptionAutoHeight
    • enableOptionAutoPositioning
    • enableOptionAutoWidth
    • filter
    • forEachOption
    • getActualValue
    • getBase
    • getButton
    • getChecked
    • getComboText
    • getIndexByValue
    • getInput
    • getList
    • getOption
    • getOptionByIndex
    • getOptionByLabel
    • getOptionsCount
    • getParent
    • getSelectedIndex
    • getSelectedText
    • getSelectedValue
    • hide
    • isChecked
    • isEnabled
    • isVisible
    • load
    • loadXML
    • loadXMLString
    • openSelect
    • readonly
    • render
    • selectOption
    • setAutoSubCombo
    • setChecked
    • setComboText
    • setComboValue
    • setDefaultImage
    • setFilterHandler
    • setFocus
    • setFontSize
    • setImagePath
    • setName
    • setOptionHeight
    • setOptionIndex
    • setOptionWidth
    • setPlaceholder
    • setSize
    • setSkin
    • setTemplate
    • show
    • sort
    • unSelectOption
    • unload
    • updateOption
  • Events
  • Others
Start Combo dhtmlXCombo API

Methods

addOption | adds a new option
allowFreeText | defines whether a combo accepts any entered text or the options from the list only
attachChildCombo | grouping combos
attachEvent | adds any user-defined handler to available events
clearAll | removes all options from combobox
closeAll | closes an opened combobox list
confirmValue | confirms the entered value
deleteOption | deletes option by value
destructor | destroys the object and any related HTML elements
detachEvent | detaches a handler from an event
disable | disables a combobox
disableAutocomplete | disables the automatic filling of the combo text field
enable | enables a combobox
enableAutocomplete | enables the automatic filling of the combo text field
enableFilteringMode | enables the filtering mode
enableOptionAutoHeight | enables or disables auto height of the list. The method can't be used with dynamic loading.
enableOptionAutoPositioning | enables or disables options auto positioning
enableOptionAutoWidth | enables or disables auto width of options. The method can't be used with dynamic loading.
filter | filters combo
forEachOption | iterator, calls a user-defined handler function for each option
getActualValue | gets value which will be sent to a server once the form is submitted
getBase | returns a combo's main DOM element
getButton | returns a div DOM element used for a button
getChecked | gets the list of the checked options' values
getComboText | gets the current text of combobox
getIndexByValue | returns the index of an option by value
getInput | returns a div DOM element used for an input
getList | returns a div DOM element used for a list
getOption | gets an option by value
getOptionByIndex | gets an option by index
getOptionByLabel | gets option by label
getOptionsCount | returns the number of combo options
getParent | returns the parent of a DOM element where a combo is initialized
getSelectedIndex | gets index of the selected option
getSelectedText | gets text of the selected option
getSelectedValue | gets value of the selected item
hide | the method hides the whole combo control
isChecked | checks whether a combobox's item is checked
isEnabled | checks whether a combobox is enabled
isVisible | checks whether a combobox is visible
load | loads data to the component via XML or JSON, usually data-values pairs
loadXML | loads the list of options from XML
loadXMLString | loads the list of options from XML string
openSelect | opens the list of options
readonly | switches to readonly mode
render | enables/disables rendering immediately after changes have been made in combobox
selectOption | selects an option
setAutoSubCombo | grouping combos
setChecked | sets the option checked
setComboText | sets some text in a combobox
setComboValue | sets some value in combobox
setDefaultImage | sets the default image
setFilterHandler | sets a custom function for filtering
setFocus | sets focus on the selected option (displayed in the input field)
setFontSize | sets different font sizes for an entered text and for list options text
setImagePath | sets the path to the folder with icons
setName | sets the name used during the form submitting
setOptionHeight | sets the height of combo list
setOptionIndex | changes a single option's position
setOptionWidth | sets the minimal width for combo list
setPlaceholder | sets a placeholder for a combo input
setSize | changes the control's size
setSkin | sets a skin for a combobox
setTemplate | sets a template for an input and options text in the combobox
show | shows combobox ( reverse to the hide command )
sort | sorts listed options
unSelectOption | unselects the option selected in the list
unload | destructor, unloads the combo
updateOption | updates the specified option in the combo box
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addOption DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

addOption

adds a new option

void addOption(string|array options);

Parameters

options string|array different input for different kinds of options. Please, refer to examples.

Example

var myCombo = new dhtmlXCombo("combo_zone3","alfa3",200);
myCombo.addOption([
    ["a","option A"],
    ["b","option B", "color:red;"],
    ["c","option C"]
]);

Related samples

  • Script - single option
  • Script - array of arrays
  • Script - array of objects
See also
  • Articles
    • Loading Data
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


allowFreeText DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

allowFreeText

defines whether a combo accepts any entered text or the options from the list only

void allowFreeText(boolean state);

Parameters

state boolean true/false, allow/disallow, "false" by default

Example

myCombo.allowFreeText(true);

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachChildCombo DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

attachChildCombo

grouping combos

void attachChildCombo();

Deprecated

from version 4.0

Details

if you need to group combos, please read the article "Grouping Combos".

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearAll DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

clearAll

removes all options from combobox

void clearAll(boolean hideList);

Parameters

hideList boolean set false to prevent list hiding, true by default

Example

myCombo.clearAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


closeAll DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

closeAll

closes an opened combobox list

void closeAll();

Example

myCombo.closeAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


confirmValue DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

confirmValue

confirms the entered value

void confirmValue();

Example

<form action="cities.php" method="POST" onsubmit="confirmComboValue()">
   <div id="combo_container" style="width:200px; height:30px;"></div>
   <input type="submit" />
</form>

<script>
     var combo = new dhtmlXCombo("combo_container","state",200);
     combo.load("get_states.php");

     function confirmComboValue(){
         combo.confirmValue();
     }
</script>

Details

We recommend to call this method when submitting a form.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


deleteOption DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

deleteOption

deletes option by value

void deleteOption(string value);

Parameters

value string value of the option in question

Example

myCombo.deleteOption(value);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


destructor DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

destructor

destroys the object and any related HTML elements

void destructor();

Deprecated

new usage:

myCombo.unload();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disable DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

disable

disables a combobox

void disable( [boolean mode] );

Parameters

mode boolean optional, true|false to disable/enable a combobox

Example

myCombo.disable();

Details

If a combo is attached to a form, you have to disable the combo by using:

myForm.disableItem("comboItemName");
See also
  • API
    • enable
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


disableAutocomplete DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

disableAutocomplete

disables the automatic filling of the combo text field

void disableAutocomplete();

Example

myCombo.disableAutocomplete();

Related samples

  • Enable/disable autocomplete
Details

Used for the "start" filter-mode, enabled by default.

In the image below autocomplete is enabled in the left combo:

See also
  • API
    • enableAutocomplete
    • Change log

    added in version 4.0

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


enable DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

enable

enables a combobox

void enable( [boolean mode] );

Parameters

mode boolean optional, true|false to enable/disable a combobox

Example

myCombo.enable();

Details

If a combo is attached to a form, you have to disable the combo by using:

myForm.disableItem("comboItemName");
See also
  • API
    • disable
    • Change log

    added in version 4.0

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


enableAutocomplete DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

enableAutocomplete

enables the automatic filling of the combo text field

void enableAutocomplete();

Example

myCombo.enableAutocomplete();

Related samples

  • Enable/disable autocomplete
Details

Used for the "start" filter-mode, enabled by default.

Autocomplete is enabled in the left combo in the image below:

See also
  • API
    • disableAutocomplete
    • Change log

    added in version 4.0

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


enableFilteringMode DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

enableFilteringMode

enables the filtering mode

void enableFilteringMode(string|boolean mode, [string url,boolean cache,boolean autoSubLoad] );

Parameters

mode | string|boolean | the filtering mode (true for the 'start' mode or 'between', see the details)
url | string | url for filtering from XML, optional
cache | boolean | XML caching, optional
autoSubLoad | boolean | enables autoloading of additional suggestions on selecting the last loaded option

Example

myCombo.enableFilteringMode(mode, url, cache, autoSubload);

Related samples

  • Filter on client
Details

The 'between' value sets the mode when the combo searches for any occurrence of the typed text in items (in contrast to the 'start' mode that performs searching from the item's beginning).
Also the 'between' mode isn't supported by dhtmlxConnector. So, if you've decided to use it and deal with the server, you will need to provide a fully custom server-side solution.

See also
  • Articles
    • Autocomplete in Combo
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


enableOptionAutoHeight DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

enableOptionAutoHeight

enables or disables auto height of the list. The method can't be used with dynamic loading.

void enableOptionAutoHeight(boolean flag,number maxHeight);

Deprecated

from version 4.0

Parameters

flag | boolean | true/false
maxHeight | number | height limitation (if the height of the list is bigger than maxHeight, a vertical scroll appears)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableOptionAutoPositioning DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

enableOptionAutoPositioning

enables or disables options auto positioning

void enableOptionAutoPositioning(boolean flag);

Deprecated

from version 4.0

Parameters

flag boolean true/false
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableOptionAutoWidth DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

enableOptionAutoWidth

enables or disables auto width of options. The method can't be used with dynamic loading.

void enableOptionAutoWidth(boolean flag);

Deprecated

from version 4.0

Parameters

flag boolean true/false
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


filter DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

filter

filters combo

void filter(function handler,boolean showList);

Parameters

handler | function | user-defined filter function
showList | boolean | show list after filtering (true by default)

Example

// keep options started from 'a'
var mask = "a";
myCombo.filter(function(opt){
    return opt.text.match(new RegExp("^"+mask.toLowerCase(),"i"))!=null;
}, false);

Change log

added in version 4.0
showList param added in 4.1.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachOption DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

forEachOption

iterator, calls a user-defined handler function for each option

void forEachOption(function handler);

Parameters

handler function a user-defined function, will take the option id as an argument

Example

myCombo.forEachOption(function(optId){
    // your code here
});

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getActualValue DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getActualValue

gets value which will be sent to a server once the form is submitted

string getActualValue();

Returns

string the value to be sent to the server

Example

myCombo.getActualValue();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getBase DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getBase

returns a combo's main DOM element

HTMLElement getBase();

Returns

HTMLElement combo.DOMelem

Example

var baseObj = myCombo.getBase();

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getButton DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getButton

returns a div DOM element used for a button

HTMLElement getButton();

Returns

HTMLElement combo.DOMelem_button

Example

var buttonObj = myCombo.getButton();

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getChecked DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getChecked

gets the list of the checked options' values

array getChecked(number index);

Parameters

index number the value's index

Returns

array the list of values

Example

myCombo.getChecked();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getComboText DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getComboText

gets the current text of combobox

string getComboText();

Returns

string the current text of combobox

Example

myCombo.getComboText();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getIndexByValue DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getIndexByValue

returns the index of an option by value

number getIndexByValue(string value);

Parameters

value string value of the option in question

Returns

number the index of an option

Example

myCombo.getIndexByValue(value);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getInput DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getInput

returns a div DOM element used for an input

HTMLElement getInput();

Returns

HTMLElement combo.DOMelem_input

Example

var inputObj = myCombo.getInput();

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getList DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getList

returns a div DOM element used for a list

HTMLElement getList();

Returns

HTMLElement combo.DOMlist

Example

var listObj = myCombo.getList();

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getOption DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getOption

gets an option by value

object getOption(string value);

Parameters

value string value of the option in question

Returns

object the option's properties

Example

myCombo.getOption(value);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getOptionByIndex DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getOptionByIndex

gets an option by index

object getOptionByIndex(number ind);

Parameters

ind number index of the option in question

Returns

object the option's properties

Example

myCombo.getOptionByIndex(index);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getOptionByLabel DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getOptionByLabel

gets option by label

object getOptionByLabel(string label);

Parameters

label string label of the option in question

Returns

object the option's properties

Example

myCombo.getOptionByLabel(label);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getOptionsCount DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getOptionsCount

returns the number of combo options

number getOptionsCount();

Returns

number the number of combo options

Example

var i = myCombo.getOptionsCount();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getParent DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getParent

returns the parent of a DOM element where a combo is initialized

HTMLElement getParent();

Returns

HTMLElement combo.DOMParent

Example

var parentObj = myCombo.getParent();

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelectedIndex DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getSelectedIndex

gets index of the selected option

number getSelectedIndex();

Returns

number index of the selected option

Example

myCombo.getSelectedIndex();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelectedText DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getSelectedText

gets text of the selected option

string getSelectedText();

Returns

string text of the selected option

Example

myCombo.getSelectedText();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelectedValue DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

getSelectedValue

gets value of the selected item

string getSelectedValue();

Returns

string value of the selected item

Example

myCombo.getSelectedValue();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hide DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

hide

the method hides the whole combo control

void hide();

Example

myCombo.hide();

Details

in order to hide (close) the list of options use the closeAll method

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isChecked DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

isChecked

checks whether a combobox's item is checked

boolean isChecked(number index);

Parameters

index number the index of an item

Returns

boolean true/false

Example

myCombo.isChecked(index);

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isEnabled DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

isEnabled

checks whether a combobox is enabled

boolean isEnabled();

Returns

boolean true/false

Example

myCombo.isEnabled();

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isVisible DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

isVisible

checks whether a combobox is visible

boolean isVisible();

Returns

boolean true/false

Example

myCombo.isVisible();

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


load DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

load

loads data to the component via XML or JSON, usually data-values pairs

promise load(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.load({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.load('<data><node id="a1".../></data>');

// json/xml from server
myComponent.load("server/data.xml");

// local json/xml with callback
myComponent.load({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.load('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.load("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.load(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure the response has the header "Content-Type: text/xml" for the XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadXML DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

loadXML

loads the list of options from XML

void loadXML(string url);

Deprecated

new usage:

myCombo.load(url, callback);

Parameters

url string url of the xml
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadXMLString DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

loadXMLString

loads the list of options from XML string

void loadXMLString(string string);

Deprecated

new usage:

myCombo.load(url, callback);

Parameters

string string xml string
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


openSelect DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

openSelect

opens the list of options

void openSelect();

Example

myCombo.openSelect();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


readonly DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

readonly

switches to readonly mode

void readonly(boolean mode);

Parameters

mode boolean true to set readonly mode

Example

myCombo.readonly(mode);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


render DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

render

enables/disables rendering immediately after changes have been made in combobox

void render(boolean mode);

Deprecated

from version 4.0

Parameters

mode boolean enable/disable
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectOption DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

selectOption

selects an option

void selectOption(number ind);

Parameters

ind number index of the option in question

Example

myCombo.selectOption(ind);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setAutoSubCombo DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setAutoSubCombo

grouping combos

void setAutoSubCombo();

Deprecated

from version 4.0

Details

if you need to group combos, please read the article "Grouping Combos"

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setChecked DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setChecked

sets the option checked

void setChecked(number index,boolean state);

Parameters

index | number | the option's index
state | boolean | true/false to check/uncheck

Example

myCombo.setChecked(index, state);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setComboText DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setComboText

sets some text in a combobox

void setComboText(string text);

Parameters

text string a new text label

Example

myCombo.setComboText(text);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setComboValue DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setComboValue

sets some value in combobox

void setComboValue(string value);

Parameters

value string a combobox's value

Example

myCombo.setComboValue(value);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDefaultImage DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setDefaultImage

sets the default image

void setDefaultImage(string url);

Parameters

url string the url of the default image

Example

myCombo.setDefaultImage(url);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setFilterHandler DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setFilterHandler

sets a custom function for filtering

void setFilterHandler(function handler);

Parameters

handler function a handler function for filtering

Example

myCombo.setFilterHandler(handler);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setFocus DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setFocus

sets focus on the selected option (displayed in the input field)

void setFocus();

Example

myCombo.setFocus();

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setFontSize DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setFontSize

sets different font sizes for an entered text and for list options text

void setFontSize(string sizeInp,string sizeList);

Parameters

sizeInp | string | the font size of text in the input, string format ("11px")
sizeList | string | the font size of text in the options list, string format ("16px")

Example

myCombo.setFontSize(sizeInp,sizeList);

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setImagePath DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setImagePath

sets the path to the folder with icons

void setImagePath(string path);

Parameters

path string a path to the folder with icons

Example

myCombo.setImagePath(path);

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setName DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setName

sets the name used during the form submitting

void setName(string name);

Parameters

name string a new combobox's name

Example

myCombo.setName(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOptionHeight DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setOptionHeight

sets the height of combo list

void setOptionHeight(number height);

Deprecated

from version 4.0

Parameters

height number the height of combo list
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOptionIndex DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setOptionIndex

changes a single option's position

void setOptionIndex(string value,number index);

Parameters

value | string | the value of the option
index | number | the new option's position

Example

myCombo.setOptionIndex(value, index);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOptionWidth DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setOptionWidth

sets the minimal width for combo list

void setOptionWidth(number width);

Parameters

width number minimal width

Example

myCombo.setOptionWidth(300);

Details

sets width for popup by using formula: max(option_width, combo_width)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setPlaceholder DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setPlaceholder

sets a placeholder for a combo input

void setPlaceholder(string text);

Parameters

text string the placeholder's text

Example

myCombo.setPlaceholder("Select country");

Details

limited support (modern browsers only)

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSize DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setSize

changes the control's size

void setSize(number new_size);

Parameters

new_size number a new size value

Example

myCombo.setSize(number);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setSkin

sets a skin for a combobox

void setSkin(string skin);

Parameters

skin string name of the skin

Example

myCombo.setSkin(skin);

Details

the available skins are:

  • "dhx_skyblue"
  • "dhx_web"
  • "dhx_terrace"
Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setTemplate DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

setTemplate

sets a template for an input and options text in the combobox

void setTemplate(object data);

Parameters

data object template settings
Details

In the case of a simple combo:

myCombo.setTemplate({
    input: "#capital#",
    option: "#capital# - #country#"
});
myCombo.addOption(
    "1",            // option value
    {country: "Finland", capital: "Helsinki"},  // text
    null,           // custom css, if any css, img, selected
    "finland.png",  // img, if there are any
    true            // true, if select after add
);

In the case of a multicolumn combo

// multicolumn
myCombo.setTemplate({
    input: "#capital#, #country#",
    header: false, // set if you want to hide the header
    columns: [
        {header: "&nbsp;",  width:  40, css: "flag",    option: "<img src='#flag#'>"},
        {header: "Capital", width:  80, css: "capital", option: "#capital#"},
        {header: "Country", width: 110, css: "country", option: "#country#"},
        {header: "Proverb", width: 250, css: "proverb", option: "#proverb#"}
    ]
});
myCombo.addOption([
    {
        value: "1",
        text: {
            flag: "../common/flags/austria.png",
            capital: "Vienna",
            country: "Austria",
            proverb: "Two wrongs don't make a right"
        }
    },
]);

Change log
  • added in version 4.0
  • ability to hide header for multicolumn combo added in 4.6 (header: false)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

show

shows combobox ( reverse to the hide command )

void show(boolean mode);

Parameters

mode boolean enable/disable

Example

myCombo.show();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


sort DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

sort

sorts listed options

void sort(string|function mode);

Parameters

mode string|function "asc", "desc", function

Example

// sorting by the native combo method
myCombo.sort("asc");
// or
myCombo.sort("desc");

// using a custom user function
myCombo.sort(function(a,b){
    return (a>b?1:-1);
});

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unSelectOption DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

unSelectOption

unselects the option selected in the list

void unSelectOption();

Example

myCombo.unSelectOption();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

unload

destructor, unloads the combo

void unload();

Example

myCombo.unload();

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


updateOption DHTMLX Docs

Documentation
  • addOption
  • allowFreeText
  • attachChildCombo
  • attachEvent
  • clearAll
  • closeAll
  • confirmValue
  • deleteOption
  • destructor
  • detachEvent
  • disable
  • disableAutocomplete
  • enable
  • enableAutocomplete
  • enableFilteringMode
  • enableOptionAutoHeight
  • enableOptionAutoPositioning
  • enableOptionAutoWidth
  • filter
  • forEachOption
  • getActualValue
  • getBase
  • getButton
  • getChecked
  • getComboText
  • getIndexByValue
  • getInput
  • getList
  • getOption
  • getOptionByIndex
  • getOptionByLabel
  • getOptionsCount
  • getParent
  • getSelectedIndex
  • getSelectedText
  • getSelectedValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • load
  • loadXML
  • loadXMLString
  • openSelect
  • readonly
  • render
  • selectOption
  • setAutoSubCombo
  • setChecked
  • setComboText
  • setComboValue
  • setDefaultImage
  • setFilterHandler
  • setFocus
  • setFontSize
  • setImagePath
  • setName
  • setOptionHeight
  • setOptionIndex
  • setOptionWidth
  • setPlaceholder
  • setSize
  • setSkin
  • setTemplate
  • show
  • sort
  • unSelectOption
  • unload
  • updateOption
Start Combo dhtmlXCombo API Methods

updateOption

updates the specified option in the combo box

void updateOption(string oldvalue,string value,string text,string css);

Parameters

oldvalue | string | the current option's value
value | string | a new option's value
text | string | a new option's text
css | string | a new style for the option

Example

var myCombo = new dhtmlxCombo("combo_zone3","alfa3",200);
myCombo.addOption([
    {value: "a", text: "option A", img_src: "../images/red.gif", css:"color:red;"},
    {value: "b", text: "option B", img_src: "../images/green.gif"},
    {value: "c", text: "option C", img_src: "../images/blue.gif"}
]);
...
myCombo.updateOption("b","b","New option B","color:green;");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onBeforeCheck
    • onBlur
    • onChange
    • onCheck
    • onClose
    • onDynXLS
    • onFocus
    • onKeyPressed
    • onOpen
    • onSelectionChange
    • onSyncApply
    • onXLE
    • onXLS
  • Others
Start Combo dhtmlXCombo API

Events

onBeforeCheck | fires before a checkbox is checked in a combo
onBlur | fires when the focus is moved out from the combo
onChange | fires when the combo's value is changed
onCheck | fires on checking a checkbox in a combo
onClose | fires when the user closes the combo list
onDynXLS | fires when the combo list is being populated with data from the server
onFocus | fires when an item has got focus
onKeyPressed | fires right after the key is pressed inside of the combo
onOpen | fires right after the combo list has opened
onSelectionChange | fires when the preselected value inside the combo changes
onSyncApply | fires when data synchronization is finished
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeCheck DHTMLX Docs

Documentation
  • onBeforeCheck
  • onBlur
  • onChange
  • onCheck
  • onClose
  • onDynXLS
  • onFocus
  • onKeyPressed
  • onOpen
  • onSelectionChange
  • onSyncApply
  • onXLE
  • onXLS
Start Combo dhtmlXCombo API Events

onBeforeCheck

fires before a checkbox is checked in a combo

boolean onBeforeCheck(string|number value,boolean newState){ ... };

Parameters

value | string|number | option value
newState | boolean | true if an item is going to become checked

Returns

boolean true to allow an item to be checked, otherwise - false

Example

myCombo.attachEvent("onBeforeCheck", function(value, newState){
    // your code here
    return true;
});

Change log

added in version 4.4

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBlur DHTMLX Docs

Documentation
  • onBeforeCheck
  • onBlur
  • onChange
  • onCheck
  • onClose
  • onDynXLS
  • onFocus
  • onKeyPressed
  • onOpen
  • onSelectionChange
  • onSyncApply
  • onXLE
  • onXLS
Start Combo dhtmlXCombo API Events

onBlur

fires when the focus is moved out from the combo

void onBlur(){ ... };

Example

myCombo.attachEvent("onBlur", function(){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onChange DHTMLX Docs

Documentation
  • onBeforeCheck
  • onBlur
  • onChange
  • onCheck
  • onClose
  • onDynXLS
  • onFocus
  • onKeyPressed
  • onOpen
  • onSelectionChange
  • onSyncApply
  • onXLE
  • onXLS
Start Combo dhtmlXCombo API Events

onChange

fires when the combo's value is changed

void onChange(string value,string text){ ... };

Parameters

value | string | the value of the option
text | string | the text of the option

Example

myCombo.attachEvent("onChange", function(value, text){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCheck DHTMLX Docs

Documentation
  • onBeforeCheck
  • onBlur
  • onChange
  • onCheck
  • onClose
  • onDynXLS
  • onFocus
  • onKeyPressed
  • onOpen
  • onSelectionChange
  • onSyncApply
  • onXLE
  • onXLS
Start Combo dhtmlXCombo API Events

onCheck

fires on checking a checkbox in a combo

void onCheck(string|number value,boolean state){ ... };

Parameters

value | string|number | option value
state | boolean | true if checked

Example

myCombo.attachEvent("onCheck", function(value, state){
    // your code here
});

Change log

since version 4.4, this event can't cancel "check" process by returning false.
Please, use onBeforeCheck for this purpose.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClose DHTMLX Docs

Documentation
  • onBeforeCheck
  • onBlur
  • onChange
  • onCheck
  • onClose
  • onDynXLS
  • onFocus
  • onKeyPressed
  • onOpen
  • onSelectionChange
  • onSyncApply
  • onXLE
  • onXLS
Start Combo dhtmlXCombo API Events

onClose

fires when the user closes the combo list

void onClose(){ ... };

Example

myCombo.attachEvent("onClose", function(){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDynXLS DHTMLX Docs

Documentation
  • onBeforeCheck
  • onBlur
  • onChange
  • onCheck
  • onClose
  • onDynXLS
  • onFocus
  • onKeyPressed
  • onOpen
  • onSelectionChange
  • onSyncApply
  • onXLE
  • onXLS
Start Combo dhtmlXCombo API Events

onDynXLS

fires when the combo list is being populated with data from the server

void onDynXLS(){ ... };

Example

myCombo.enableFilteringMode(true,"dummy");
myCombo.attachEvent("onDynXLS", myComboFilter);

function myComboFilter(text){//where 'text' is the text typed by the user in the combo
    myCombo.clearAll();
    dhtmlxAjax.get("data.php?mask="+text, function(xml){
        myCombo.load(xml.xmlDoc.responseText);
    })
}

Details

The event is blockable. Returning false or nothing will block requests to the server

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onFocus DHTMLX Docs

Documentation
  • onBeforeCheck
  • onBlur
  • onChange
  • onCheck
  • onClose
  • onDynXLS
  • onFocus
  • onKeyPressed
  • onOpen
  • onSelectionChange
  • onSyncApply
  • onXLE
  • onXLS
Start Combo dhtmlXCombo API Events

onFocus

fires when an item has got focus

void onFocus(){ ... };

Example

myCombo.attachEvent("onFocus", function(){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onKeyPressed DHTMLX Docs

Documentation
  • onBeforeCheck
  • onBlur
  • onChange
  • onCheck
  • onClose
  • onDynXLS
  • onFocus
  • onKeyPressed
  • onOpen
  • onSelectionChange
  • onSyncApply
  • onXLE
  • onXLS
Start Combo dhtmlXCombo API Events

onKeyPressed

fires right after the key is pressed inside of the combo

void onKeyPressed(type keyCode){ ... };

Parameters

keyCode type keyCode of the pressed key

Example

myCombo.attachEvent("onKeyPressed", function(keyCode){
    //your code here
 });

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onOpen DHTMLX Docs

Documentation
  • onBeforeCheck
  • onBlur
  • onChange
  • onCheck
  • onClose
  • onDynXLS
  • onFocus
  • onKeyPressed
  • onOpen
  • onSelectionChange
  • onSyncApply
  • onXLE
  • onXLS
Start Combo dhtmlXCombo API Events

onOpen

fires right after the combo list has opened

void onOpen(){ ... };

Example

myCombo.attachEvent("onOpen", function(){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelectionChange DHTMLX Docs

Documentation
  • onBeforeCheck
  • onBlur
  • onChange
  • onCheck
  • onClose
  • onDynXLS
  • onFocus
  • onKeyPressed
  • onOpen
  • onSelectionChange
  • onSyncApply
  • onXLE
  • onXLS
Start Combo dhtmlXCombo API Events

onSelectionChange

fires when the preselected value inside the combo changes

void onSelectionChange(){ ... };

Example

myCombo.attachEvent("onSelectionChange", function(){
    //your code here
 });

Details

Differs from onChange event that occurs only when the value is really changed.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSyncApply DHTMLX Docs

Documentation
  • onBeforeCheck
  • onBlur
  • onChange
  • onCheck
  • onClose
  • onDynXLS
  • onFocus
  • onKeyPressed
  • onOpen
  • onSelectionChange
  • onSyncApply
  • onXLE
  • onXLS
Start Combo dhtmlXCombo API Events

onSyncApply

fires when data synchronization is finished

void onSyncApply(){ ... };

Example

myCombo.attachEvent("onSyncApply", function(){
    //your code here
});

Details

If the combo.sync(store) method was called, the combo will be updated each time when data is changed in the store. The onSyncApply event handler will be called after combo update.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onBeforeCheck
  • onBlur
  • onChange
  • onCheck
  • onClose
  • onDynXLS
  • onFocus
  • onKeyPressed
  • onOpen
  • onSelectionChange
  • onSyncApply
  • onXLE
  • onXLS
Start Combo dhtmlXCombo API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onBeforeCheck
  • onBlur
  • onChange
  • onCheck
  • onClose
  • onDynXLS
  • onFocus
  • onKeyPressed
  • onOpen
  • onSelectionChange
  • onSyncApply
  • onXLE
  • onXLS
Start Combo dhtmlXCombo API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • DOMParent
    • DOMelem
    • DOMelem_button
    • DOMelem_input
    • DOMlist
Start Combo dhtmlXCombo API

Others

DOMParent | returns parent DOM element where combo initialized
DOMelem | returns combo's main DOM element
DOMelem_button | returns div DOM element used for button
DOMelem_input | returns input DOM element
DOMlist | returns div DOM element used for list
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DOMParent DHTMLX Docs

Documentation
  • DOMParent
  • DOMelem
  • DOMelem_button
  • DOMelem_input
  • DOMlist
Start Combo dhtmlXCombo API Others

DOMParent

returns parent DOM element where combo initialized

DOMParent;

Deprecated

new usage

var parentObj = myCombo.getParent();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DOMelem DHTMLX Docs

Documentation
  • DOMParent
  • DOMelem
  • DOMelem_button
  • DOMelem_input
  • DOMlist
Start Combo dhtmlXCombo API Others

DOMelem

returns combo's main DOM element

DOMelem;

Deprecated

new usage

var baseObj = myCombo.getBase();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DOMelem_button DHTMLX Docs

Documentation
  • DOMParent
  • DOMelem
  • DOMelem_button
  • DOMelem_input
  • DOMlist
Start Combo dhtmlXCombo API Others

DOMelem_button

returns div DOM element used for button

DOMelem_button;

Deprecated

new usage

var buttonObj = myCombo.getButton();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DOMelem_input DHTMLX Docs

Documentation
  • DOMParent
  • DOMelem
  • DOMelem_button
  • DOMelem_input
  • DOMlist
Start Combo dhtmlXCombo API Others

DOMelem_input

returns input DOM element

DOMelem_input;

Deprecated

new usage

var inputObj = myCombo.getInput();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DOMlist DHTMLX Docs

Documentation
  • DOMParent
  • DOMelem
  • DOMelem_button
  • DOMelem_input
  • DOMlist
Start Combo dhtmlXCombo API Others

DOMlist

returns div DOM element used for list

DOMlist;

Deprecated

new usage

var listObj = myCombo.getList();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


How to Start with Combo DHTMLX Docs

Documentation
  • dhtmlXCombo API
  • How to Start with Combo
    • Step 1. Include necessary files
    • Step 2. Write native selectbox code
    • Step 3. Create Combo from select control
    • Alternative way of Combo initialization
  • Object Constructor
  • Loading Data
  • Integrating with FORM Tag
  • Autocomplete in Combo
  • Operating Combobox
  • Operating Combobox's Options
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
  • Multicolumn Combo
  • Handling Events
  • Migration from 3.6 to 4.0
Start Combo

How to Start with Combo

dhtmlxCombo can be initialized in a plenty of ways. The simplest one is initialization from existing selectbox control. To achieve this you need to take the following steps:

Step 1. Include necessary files

Each DHTMLX component can be used standalone or as a part of the general library. If you use dhtmlxCombo standalone, you need to include 2 files:

  • dhtmlxcombo.js
  • dhtmlxcombo.css
<!DOCTYPE html>
<html>
    <head>
        <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxcombo.css">
        <script src="../codebase/dhtmlxcombo.js"></script>
   </head>
    <body>
    ...
    </body>
</html>

If you use dhtmlxCombo as a part of "dhtmlxSuite" package you need to include 2 files:

  • dhtmlx.js
  • dhtmlx.css
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Step 2. Write native selectbox code

<select style='width:200px;'  id="combo_zone1" name="alfa1">
    <option value="1">a00</option>
    <option value="2">a01</option>
</select>

Step 3. Create Combo from select control

var myCombo = dhtmlXComboFromSelect("combo_zone1");
  • combo_zone1 - id of the select which needs to be converted

Alternative way of Combo initialization

Another approach is to create a new combobox inside of some HTML container:

  1. Include necessary files
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxcombo.css">
<script src="../codebase/dhtmlxcombo.js"></script>
  2. Write any container code (DIV is most common)
    <div id="combo_zone2" style="width:200px; height:30px;"></div>
  3. Create dhtmlxCombo in HTML container
    var myCombo = new dhtmlXCombo("combo_zone2","alfa2",200);
    • combo_zone2 - id of HTML container
    • alfa2 - name used in form integration
    • 200 - width of combobox
    • use the 4th parameter in the constructor, if you need to add images into Combo ("image")
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • dhtmlXCombo API
  • How to Start with Combo
  • Object Constructor
    • Specifying Combo Options
    • Initialization from HTML select
  • Loading Data
  • Integrating with FORM Tag
  • Autocomplete in Combo
  • Operating Combobox
  • Operating Combobox's Options
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
  • Multicolumn Combo
  • Handling Events
  • Migration from 3.6 to 4.0
Start Combo

Object Constructor

var combo = new dhtmlXCombo(parent,name,width,type,index,filter,xml,readonly);

where

  • parent - id of HTML element which will be used as parent (or object itself)
  • name - (string) name which will be assigned to related html input
  • width - (string) - width of combo (defined in pixels)
  • type - type of options used in combo, optional
  • index - tab index assigned to control, optional
  • filter - (boolean) switch between combobox and auto-filter modes (enableFilteringMode())
  • xml - (string) url of data file (load())
  • readonly - (boolean) switch to readonly mode (readonly())

If existing select object was defined as parent - combo will take all data from it (list of options, sizes, tabindex, name)

<div id='my_combo_here'></div>
<script>
//common init code
var combo = new dhtmlXCombo("my_combo_here","some_name","100px");
</script>

Combo can also be initialized by object notation

var myCombo = new dhtmlXCombo({
    some_option1:some_value_1,
    some_option2:some_value_2,
    ...
    some_optionN:some_value_N,
});

Specifying Combo Options

Options of the combo can be defined through items collection

myCombo = new dhtmlXCombo({
    parent:"combo_container",
    items:[
        {value:"1", text:"One"},
        {value:"2", text:"Two"},
        {value:"3", text:"Three"}
    ],
    onChange:function(){
        alert("I'm changed");
    }
});

Each option can have the following attributes:

  • value - (string) value of option
  • text - (string) text which will be shown for the option
  • css - (string) style string which can be assigned to option

Related sample: Object API init

Initialization from HTML select

To initialize Combo from HTML select, you need to specify the object dhtmlXComboFromSelect:

myCombo = dhtmlXComboFromSelect("mySelect");

And then define options of the created HTML select:

<select id="mySelect" style="width:230px;">
    <option value="the_adventures_of_tom_sawyer">The Adventures of Tom Sawyer</option>
    <option value="the_dead_zone">The Dead Zone</option>
    <option value="the_first_men_in_the_moon">The First Men in the Moon</option>
    ...
</select>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading Data DHTMLX Docs

Documentation
  • dhtmlXCombo API
  • How to Start with Combo
  • Object Constructor
  • Loading Data
    • Through the "addOption" command
    • From the server side
    • From autocomplete XML file
    • From HTML
  • Integrating with FORM Tag
  • Autocomplete in Combo
  • Operating Combobox
  • Operating Combobox's Options
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
  • Multicolumn Combo
  • Handling Events
  • Migration from 3.6 to 4.0
Start Combo

Loading Data

There are several ways of loading Combo options. They are described in this article.

Through the "addOption" command

You can use the addOption method to load data into Combo:

var myCombo = new dhtmlXCombo("combo_zone3","alfa3",200);
myCombo.addOption(value,label,css,img_src);

The parameters are:

  • value - (string) the option value
  • label - (string) the option label
  • css - (string) the css string attached to the option, optional
  • img_src - (string) the path to the option icon image. Available just for the image combo type.

Related sample: Script - single option

Loading a few options at once

  • as an array of arrays (in this case you can't use 4th parameter "img_src")
var myCombo = new dhtmlXCombo("combo_zone3","alfa3",200);
myCombo.addOption([
    ["a","option A"],
    ["b","option B", "color:red;"],
    ["c","option C"]
]);

Related sample: Script - array of arrays

  • as an array of objects (you can use all 4 parameters)
var myCombo = new dhtmlXCombo("combo_zone3","alfa3",200);
myCombo.addOption([
 {value:"a", text:"option A", img_src:"../images/blue.gif", css:"color:red;"},
 {value:"b", text:"option B", img_src:"../images/green.gif"},
 {value:"c", text:"option C", img_src:"../images/red.gif"}
]);

Related sample: Script - array of objects

From the server side

External XML file

var myCombo = new dhtmlXCombo("combo_zone3","alfa3",200);
myCombo.load("xml/data.xml");

where XML has the following format:

  <?xml version="1.0" ?>
  <complete>
     <option value="1">one</option>
     <option value="2">two</option>
     <option value="3">three</option>
     <option value="4">four</option>
     <option value="5">five</option>
     <option value="6">six</option>
     <option value="7">seven</option>
     <option value="8">eight</option>
     <option value="9">nine</option>
     <option value="10">ten</option>
  </complete>

Possible attributes of the <option> tag are as follows:

  • value - option value
  • selected - if option is selected
  • img_src - icon url (also add the 4th parameter to combobox constructor - "image")
  • checked - checkbox state (for combo with "checkbox" type, 0 by default)

Related sample: XML from server

External JSON file

myCombo = new dhtmlXCombo("combo_zone");
myCombo.load("json/data.json");

where JSON has the following format:

options: [
    {value: "the_dead_zone", text: "The Dead Zone"},
    {value: "the_first_men_in_the_moon", text: "The First Men in the Moon"},
    {value: "the_green_mile", text: "The Green Mile"},
    {value: "the_invisible_man", selected: "1", text: "The Invisible Man"},
    {value: "the_running_man", checked: "1", text: "The Running Man"},
    {value: "the_talisman", checked: "1", text: "The Talisman"},
    {value: "the_time_machine", text: "The Time Machine"},
    {value: "the_tommyknockers", text: "The Tommyknockers"},
]

Related sample: JSON from server

From autocomplete XML file

Please check the chapter Autocomplete in Combo for more details.

From HTML

Options can be loaded from HTML in the case of converting from existing select box.

myCombo = dhtmlXComboFromSelect("mySelect");

where HTML has the following format:

<select id="mySelect" style="width:230px;">
    <option value="the_adventures_of_tom_sawyer">The Adventures of Tom Sawyer</option>
    <option value="the_dead_zone">The Dead Zone</option>
    <option value="the_first_men_in_the_moon">The First Men in the Moon</option>
    <option value="the_girl_who_loved_tom_gordon">The Girl Who Loved Tom Gordon</option>
    <option value="the_green_mile">The Green Mile</option>
    <option value="the_invisible_man" selected="1">The Invisible Man</option>
    <option value="the_island_of_doctor_moreau">The Island of Doctor Moreau</option>
    <option value="the_prince_and_the_pauper">The Prince and the Pauper</option>
    <option value="the_running_man">The Running Man</option>
    <option value="the_talisman">The Talisman</option>
    <option value="the_time_machine">The Time Machine</option>
    <option value="the_tommyknockers">The Tommyknockers</option>
    <option value="the_war_of_the_worlds">The War of the Worlds</option>
</select>

Related sample: Init from select

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Integrating with FORM Tag DHTMLX Docs

Documentation
  • dhtmlXCombo API
  • How to Start with Combo
  • Object Constructor
  • Loading Data
  • Integrating with FORM Tag
  • Autocomplete in Combo
  • Operating Combobox
  • Operating Combobox's Options
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
  • Multicolumn Combo
  • Handling Events
  • Migration from 3.6 to 4.0
Start Combo

Integrating with FORM Tag

dhtmlxCombo automatically integrates in surrounding FORM tag. While submitting such form, two form fields will be sent to server side:

  • COMBONAME - value of combobox
  • COMBONAME_new_value - true if value is text entered in combobox, false if value is one of items from predefined list of combobox

If combo is initialized by the next command:

  var z=new dhtmlXCombo("combo_zone3","alfa3",200);

server-side script will receive fields with names "alfa3" and "alfa3_new_value".

Note! Fields get values when combo loses focus. If the form is submitted right after the new value is entered, this value can not be sent. To solve the problem we recommend to call the confirmValue() method on form submit.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Autocomplete in Combo DHTMLX Docs

Documentation
  • dhtmlXCombo API
  • How to Start with Combo
  • Object Constructor
  • Loading Data
  • Integrating with FORM Tag
  • Autocomplete in Combo
    • Generating List of Suggestions
    • Response Details
    • Custom filtering
    • User-defined function
  • Operating Combobox
  • Operating Combobox's Options
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
  • Multicolumn Combo
  • Handling Events
  • Migration from 3.6 to 4.0
Start Combo

Autocomplete in Combo

dhtmlxCombo provides the autocomplete feature, i.e. it can work in the filtering mode.

In this mode values in the list are filtered by the current text entered in the edit control. To enable filtration, the next command should be called:

myCombo.enableFilteringMode(true);

Generating List of Suggestions

By default, combobox uses options which have been already loaded in it, but it is possible to define an external script which will be called for generating the list of suggestions.

myCombo.enableFilteringMode(true,"php/complete.php",cache);
  • php/complete.php - path to script
  • cache - true/false - enable/disable caching of script responses ( using "true" recommended )

In the described situation, once text in edit control is changed, the next URL will be called:

"php/complete.php?pos=0&mask=TEXT"

  • TEXT - current text in edit control

Response Details

The combobox awaits that script response will be an XML file in the same format which was used for initialization. If you prefer, you can return only a part of suggestion. The combobox can automatically send additional requests and add more data to the list of options.

myCombo.enableFilteringMode(true,"php/complete.php",cache,true);

The server-side script will be called by the URL below:

"php/complete.php?pos=START&mask=TEXT"

  • START - position from which a suggestion must be returned.

For all additional sub fetches returned XML must have the "add" attribute of the main tag:

<?xml version="1.0" ?>
<complete add="true">
...

Custom filtering

To provide custom filtering rules in Combo, use the onDynXLS event. The event fires when Combo gets data from the server and allows you to specify a function for processing this data.

myCombo.enableFilteringMode(true,"dummy");
myCombo.attachEvent("onDynXLS", myComboFilter);

function myComboFilter(text){ // where 'text' is the text typed by the user into Combo
    myCombo.clearAll();
    dhtmlxAjax.get("data.php?mask="+text, function(xml){
        myCombo.load(xml.xmlDoc.responseText);
    })
};

User-defined function

You can define a custom filtering function. For this purpose, use the code as in:

myCombo.filter(function(text){
    if (text.indexOf("a") === 0) return true;
    return false;
})

To keep option in the list, you need to return true.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Operating Combobox DHTMLX Docs

Documentation
  • dhtmlXCombo API
  • How to Start with Combo
  • Object Constructor
  • Loading Data
  • Integrating with FORM Tag
  • Autocomplete in Combo
  • Operating Combobox
    • Accessing combo elements
  • Operating Combobox's Options
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
  • Multicolumn Combo
  • Handling Events
  • Migration from 3.6 to 4.0
Start Combo

Operating Combobox

  1. To show/hide a combobox use the methods show() and hide(), respectively:
    myCombo.show(mode);
  2. To enable/disable the readonly mode the method readonly() is used:
    myCombo.readonly(mode);
  3. To enable/disable a combobox use the corresponding methods:enable() and disable()
    myCombo.disable(mode);

Accessing combo elements

You can access the input element of the combo as combo.DOMelem_input. Direct access to the element allows assigning custom event handlers. The next code for example limits input in combo, allowing only digits:

dhtmlxEvent(combo.DOMelem_input, "keypress", function(e){
    e = e||event;
    var code = e.which||e.keyCode;
    if (code >=48 && code < 58) return true;

    e.cancelBubble=true;
    if (e.preventDefault) e.preventDefault();
    return false;
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Operating Combobox's Options DHTMLX Docs

Documentation
  • dhtmlXCombo API
  • How to Start with Combo
  • Object Constructor
  • Loading Data
  • Integrating with FORM Tag
  • Autocomplete in Combo
  • Operating Combobox
  • Operating Combobox's Options
    • Adding Option to Combo
    • Deleting Option
    • Updating Option
    • Selecting Option
    • Getting Value of Selected Option
    • Getting Text of Selected Option
    • Getting Text of Combo Editor
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
  • Multicolumn Combo
  • Handling Events
  • Migration from 3.6 to 4.0
Start Combo

Operating Combobox's Options

There's a set of operations you can apply to the Combo options. You can find the list of them below:

Adding Option to Combo

To add options to Combo, use the addOption method:

myCombo.addOption(options);

The method takes a list of options that should be added to Combo. The type of the options parameter may differ. Please, check the related samples.

Related sample: Script - single option
Related sample: Script - array of arrays
Related sample: Script - array of objects

Deleting Option

To delete an option, use the deleteOption method:

myCombo.deleteOption(value);

The method takes the option's value as a parameter.

Updating Option

To update an option, use the updateOption method:

myCombo.updateOption(oldvalue,value,text,css);

The parameters are:

  • oldvalue - (string) the current option's value
  • value - (string) a new option's value
  • text - (string) a new option's text
  • css - (string) a new style for the option

Selecting Option

To select an option in the Combo, use the selectOption method:

myCombo.selectOption(ind);

It takes the index of the option in question as a parameter.

To unselect a selected option, use the unSelectOption method:

myCombo.unSelectOption();

Getting Value of Selected Option

To get the selected value option, use the getSelectedValue method:

myCombo.getSelectedValue();

It returns the value of the selected item as a string.

Getting Text of Selected Option

To get the text of the selected option, use the getSelectedText method:

myCombo.getSelectedText();

Getting Text of Combo Editor

To get the text set in Combo editor, use the getComboText method:

myCombo.getComboText();

To set text into the Combo editor, use the setComboText method:

myCombo.setComboText(text);

As a parameter, it takes a new text to be set into the Combo editor.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Grouping Combos DHTMLX Docs

Documentation
  • dhtmlXCombo API
  • How to Start with Combo
  • Object Constructor
  • Loading Data
  • Integrating with FORM Tag
  • Autocomplete in Combo
  • Operating Combobox
  • Operating Combobox's Options
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
  • Multicolumn Combo
  • Handling Events
  • Migration from 3.6 to 4.0
Start Combo

Grouping Combos

Starting from version 4.0 the methods attachChildCombo() and setAutoSubCombo() have been deprecated. Now users have the possibility to group combos by themselves. The new variant of grouping is more extended. It allows you to define the conditions under which child-combos are hidden of disabled.

The code snippet below creates the variant of grouping combos presented in the picture above:

// init master combo
myCombo = new dhtmlXCombo("combo_zone", "combo", 230);
myCombo.load("combo_group.php?mode=state");
myCombo.enableFilteringMode(true);

// init slave combo
myCombo2 = new dhtmlXCombo("combo_zone2", "combo2", 230);
myCombo2.enableFilteringMode(true);
myCombo2.disable(); // disable on init

// grouping logic

// we will enable and reload slave combo
// if any not-empty value is selected in master combo,
// and disable and clear slave combo
// if value not selected in master
myCombo.attachEvent("onChange", function(value){
    myCombo2.clearAll();
    myCombo2.setComboValue(null);
    myCombo2.setComboText("");
    if (value == null) {
        myCombo2.disable();
    } else {
        myCombo2.enable();
        myCombo2.load("combo_group.php?state="+value);
    }
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Creating Combo with Images and Checkboxes DHTMLX Docs

Documentation
  • dhtmlXCombo API
  • How to Start with Combo
  • Object Constructor
  • Loading Data
  • Integrating with FORM Tag
  • Autocomplete in Combo
  • Operating Combobox
  • Operating Combobox's Options
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
    • Setting combo type
    • Type "checkbox"
    • Type "image"
  • Multicolumn Combo
  • Handling Events
  • Migration from 3.6 to 4.0
Start Combo

Creating Combo with Images and Checkboxes

Combo supports two special types:

  • image
  • checkbox
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxcombo.css">
<script src="../codebase/dhtmlxcommon.js"></script>
<script src="../codebase/dhtmlxcombo.js"></script>

Setting combo type

There are two ways of combo intialization:

  • from selectbox
  • in html container.

In first case the type is set by the "opt_type" attribute of the <select> tag:

<select opt_type="checkbox" style="width:200px;"  id="combo_zone" name="alfa">
 ...
</select>
<script>
    var combo = dhtmlXComboFromSelect("combo_zone");
</script>

When combo is initialized using dhtmlXCombo(...), you can define the type as follows:

<div id="combo_zone1" style="width:200px;"></div>
<script>
    var combo = new dhtmlXCombo("combo_zone1","alfa1",200,"image");
    ...
</script>

Type "checkbox"

The option can be marked as checked with the help of one of the following methods:

  • in the xml:
    <option value="some value" checked="1">some text</option>
  • by the setChecked(option_index,mode) method:
    /*the 4th and 7th options are checked*/
myCombo.setChecked(3,true);
myCombo.setChecked(6,true);

The array with values of selected options can be received by the getChecked() method:

var checked_array = combo.getChecked();

Type "image"

Image path is set by the "img_src" attribute:

  <option value="some value" img_src="some.gif">some text</option>

The setDefaultImage(src) method allows setting the default image:

  var combo = new dhtmlXCombo("combo_zone","alfa",200,"image");
  combo.setDefaultImage("../images/book.gif");
  ...
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Multicolumn Combo DHTMLX Docs

Documentation
  • dhtmlXCombo API
  • How to Start with Combo
  • Object Constructor
  • Loading Data
  • Integrating with FORM Tag
  • Autocomplete in Combo
  • Operating Combobox
  • Operating Combobox's Options
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
  • Multicolumn Combo
    • Init from script
    • Init from JSON
    • Init from XML
  • Handling Events
  • Migration from 3.6 to 4.0
Start Combo

Multicolumn Combo

Starting from version 4.1 you can create a combo with multiple columns.

There are several ways of initializing a multicolumn combo.

Init from script

To init a multicolumn combo on the page you need to do the following:

1) Create a dhtmlXCombo object

myCombo = new dhtmlXCombo("combo_zone_script", "combo_script", 200);

2) Set a template for the input and options

myCombo.setTemplate({
    input: "#capital#, #country#",
    header: false, // if you want to hide header
    columns: [
        {header: "&nbsp;",  width:  40, css: "flag",    option: "#flag#"},
        {header: "Capital", width:  80, css: "capital", option: "#capital#"},
        {header: "Country", width: 110, css: "country", option: "#country#"},
        {header: "Proverb", width: 250, css: "proverb", option: "#proverb#"}
    ]
});

3) Add some options

myCombo.addOption([
    {value: "1", text:
        {flag: "../austria.png", country: "Austria", capital:"Vienna"}
    },
    {value: "2", text:
        {flag: "../belarus.png", country: "Belarus", capital:"Minsk"}
    },
    {value: "3", selected: 1, text:
        {flag: "../cameroon.png",country: "Cameroon", capital: "Yaoundé"}
    },
    {value: "4", text:
        {flag: "../canada.png", country: "Canada", capital: "Ottawa"}
    }
]);

Use the following properties to customize the columns:

  • header - (string) the column's title
  • width - (number) the column's width
  • css - (string) css-style used for the column (optional)
  • option - (string) template for the column's options

Init from JSON

myCombo = new dhtmlXCombo("combo_zone_json", "combo_json", 200);
myCombo.load("../data.json");
myCombo.enableFilteringMode(true);

{template: {
    input: "#capital#, #country#",
    columns: [
        {header: "&nbsp;",  width:  40, css: "flag",    option: "<img src='#flag#'>"},
        {header: "Capital", width:  80, css: "capital", option: "#capital#"},
        {header: "Country", width: 110, css: "country", option: "#country#"},
        {header: "Proverb", width: 250, css: "proverb", option: "#proverb#"}
    ]
},
options: [
    {value: "1", text:
        {flag: "../austria.png", country: "Austria", capital:"Vienna"}
    },
    {value: "2", text:
        {flag: "../belarus.png", country: "Belarus", capital:"Minsk"}
    },
    {value: "3", selected: 1, text:
        {flag: "../cameroon.png",country: "Cameroon", capital: "Yaoundé"}
    },
    {value: "4", text:
        {flag: "../canada.png", country: "Canada", capital: "Ottawa"}
    }
]}

Init from XML

myCombo = new dhtmlXCombo("combo_zone_xml", "combo_xml", 200);
myCombo.load("../common/multicolumn_data.xml");
myCombo.enableFilteringMode(true);

<?xml version="1.0" encoding="UTF-8"?>
<complete>
    <template>
        <input><![CDATA[#capital#, #country#]]></input>
        <header>false</header> <!-- do not render header -->
        <columns>
            <column width="40" css="flag" header="&amp;nbsp;">
                <option>
                    <![CDATA[<
                        img src='#flag#'
                        border='0'
                        style='margin-top: 4px;
                        margin-left: 2px;'>]]>
                </option>
            </column>
            <column width="80"  css="capital" header="Capital" option="#capital#"/>
            <column width="110" css="country" header="Country" option="#country#"/>
            <column width="250" css="proverb" header="Proverb" option="#proverb#"/>
        </columns>
    </template>
    <option value="1">
        <text>
            <flag><![CDATA[../common/flags/austria.png]]></flag>
            <country>Austria</country>
            <capital>Vienna</capital>
            <proverb>Two wrongs don't make a right</proverb>
        </text>
    </option>
    ...
</complete>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXCombo API
  • How to Start with Combo
  • Object Constructor
  • Loading Data
  • Integrating with FORM Tag
  • Autocomplete in Combo
  • Operating Combobox
  • Operating Combobox's Options
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
  • Multicolumn Combo
  • Handling Events
    • Attaching Event Handler
    • Detaching Event Handler
    • List of supported events
  • Migration from 3.6 to 4.0
Start Combo

Handling Events

Attaching Event Handler

The user can add any user-defined handler to any of the available events. To do this, the user can use the attachEvent() method with the following parameters:

  • evName - name of the event;
  • evHandler - user-defined event handler.
 myCombo.attachEvent(evName, evHandler);

Several handlers can be attached to one and the same event, and all of them will be executed.

The names of the events are case-insensitive.

Detaching Event Handler

There is a simple way of removing an event-handler:

myCombo.detachEvent(id); // unique id of the event handler

List of supported events

You can find the full list of combo events in the Combo API.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration from 3.6 to 4.0 DHTMLX Docs

Documentation
  • dhtmlXCombo API
  • How to Start with Combo
  • Object Constructor
  • Loading Data
  • Integrating with FORM Tag
  • Autocomplete in Combo
  • Operating Combobox
  • Operating Combobox's Options
  • Grouping Combos
  • Creating Combo with Images and Checkboxes
  • Multicolumn Combo
  • Handling Events
  • Migration from 3.6 to 4.0
Start Combo

Migration from 3.6 to 4.0

1) In the new version of DHTMLX Library the names of some methods were changed. We've made these changes as the previous names of the methods under question didn't reflect their functionality precisely, which could cause ambiguity or misunderstanding.

2) Since the release of the latest version of DHTMLX library some functionality has been removed. It was made as this functionality is no longer needed and therefore isn't supported.

Up to version 3.6 | From version 4.0
Function names changed
myCombo.loadXML(url, call) | myCombo.load(url, call)
myCombo.loadXMLString(url, call) | myCombo.load(url, call)
myCombo.destructor() | myCombo.unload()
Functionality was removed
myCombo.enableOptionAutoHeight() |
myCombo.enableOptionAutoPositioning() |
myCombo.enableOptionAutoWidth() |
myCombo.render() |
myCombo.setOptionHeight() |
myCombo.attachChildCombo() |
myCombo.setAutoSubCombo() |
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataSelector DHTMLX Docs

Documentation
  • DataSelector
    • Initialization
    • Integration with dhtmlxForm
    • Localization support
    • DataSelector Skins
    • dhtmlXDataSelector API
Start

DataSelector

dhtmlxDataSelector is a macro component with rich select functionality. It allows getting big datasets from a database, as well as grouping and structuring the received data for convenient work with it.

API reference
  • dhtmlXDataSelector API
Related resources
  • You may download dhtmlxDataSelector as a separate package if you are already using dhtmlxSuite
  • If you don't have dhtmlxSuite yet, you can download the package of dhtmlxSuite library with dhtmlxDataSelector.

Initialization

To start working with DataSelector, you need to initialize it on a page. For this purpose, complete the following steps:

1) Include dhtmlx.js/css and dhtmlxdataselector.js/css on your page.

Note that dhtmlx.js and dhtmlx.css should be included before dhtmlxdataselector js/css.

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css"/>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxdataselector.css"/>
    <script src="codebase/dhtmlx.js"></script>
    <script src="codebase/dhtmlxdataselector.js"></script>
</head>

2) Create an instance of DataSelector:

var myDataSelector = new dhtmlXDataSelector({
    url:        "data_static.php",  // url to get data
    image_path: "codebase/imgs/",   // path to grid images
    icons_path: "codebase/imgs/"    // path to toolbar icons
});

3) Attach the onSelect event to handle the value selected by the user:

var myDataSelector.attachEvent("onSelect", function(id, value){
    // your code here
});

4) Show dialog window:

myDataSelector.show();

Integration with dhtmlxForm

DataSelector can be used as a part of dhtmlxForm:

To implement this integration, use the code below:

var formData = [
    {
     type: "dataselector",
     ...,
     url: "data_static.php",
     image_path: "codebase/imgs/",
     icons_path: "codebase/imgs/"
    },
    ... other form items
];
var myForm = new dhtmlXForm("parentId", formData);

Localization support

It's possible to add different languages for dhtmlxDataSelector and then switch between them when necessary. DataSelector allows localizing the text of buttons and the window's header:

To apply this or that language, you need to define language settings:

// specifying settings of some language, e.g. French
// make sure that dhtmlxdataselector.js is loaded
dhtmlXDataSelector.prototype.langData.fr = {
    ok: "Sélectionner",
    cancel: "Annuler",
    caption: "Sélectionnez un utilisateur"
};

When you have settings of several languages, you can switch between them by means of the loadUserLanguage method which takes a two-letter string of language name as a parameter:

myDataSelector.loadUserLanguage("fr");

In case you want to apply language settings once for all DataSelector instances, use the following codeline:

// make sure dhtmlxdataselector.js is loaded
dhtmlXDataSelector.prototype.lang = "fr";

DataSelector Skins

There are three types of skins available for DataSelector:

  • dhx_web

  • dhx_skyblue

  • dhx_terrace

The skin "dhx_skyblue" is used by default. Depending on the attached CSS skin file, DataSelector will try to detect the skin automatically. If you have several attached css files, you need to force skin during initialization:

var myDataSelector = new dhtmlXDataSelector({
    skin: "dhx_web"
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXDataSelector API DHTMLX Docs

Documentation
  • dhtmlXDataSelector API
    • Methods
    • Events
    • Others
Start DataSelector

dhtmlXDataSelector API

Methods
attachEvent | adds any user-defined handler to available events
detachEvent | detaches a handler from an event
loadUserLanguage | sets a new language interface for DataSelector
setStrings | defines a collection of string resources
setURL | sets the path to the server-side script
show | shows dhtmlxDataSelector
unload | destructor, unloads dhtmlXDataSelector instance and clears memory
Events
onGridCreated | fires immediately after a grid has been created
onSelect | fires when selection in the DataSelector is changed
Other
lang | defines the default language for all DataSelector instances
langData | the storage of custom DataSelector languages
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • attachEvent
    • detachEvent
    • loadUserLanguage
    • setStrings
    • setURL
    • show
    • unload
  • Events
  • Others
Start DataSelector dhtmlXDataSelector API

Methods

attachEvent | adds any user-defined handler to available events
detachEvent | detaches a handler from an event
loadUserLanguage | sets a new language interface for DataSelector
setStrings | defines a collection of string resources
setURL | sets the path to the server-side script
show | shows dhtmlxDataSelector
unload | destructor, unloads dhtmlXDataSelector instance and clears memory
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start DataSelector dhtmlXDataSelector API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start DataSelector dhtmlXDataSelector API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadUserLanguage DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start DataSelector dhtmlXDataSelector API Methods

loadUserLanguage

sets a new language interface for DataSelector

void loadUserLanguage(string lang);

Parameters

lang string the name of a language

Example

// add once, make sure that dhtmlxdataselector.js is loaded
dhtmlXDataSelector.prototype.langData["fr"] = {
    // the "OK" button
    ok: "Sélectionner",
    // the "Cancel" button
    cancel: "Annuler",
    // the text of the header
    caption: "Sélectionnez un utilisateur"
};

// initialize fileselector
var myDataSelector = new dhtmlXDataSelector();
myDataSelector.loadUserLanguage("fr");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setStrings DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start DataSelector dhtmlXDataSelector API Methods

setStrings

defines a collection of string resources

void setStrings(object data);

Parameters

data object string resources

Example

// for defined instance after init
var myDataSelector = new dhtmlXDataSelector(...);
myDataSelector.setStrings({
    ok: "Select",
    cancel: "Cancel",
    caption: "Please select"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setURL DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start DataSelector dhtmlXDataSelector API Methods

setURL

sets the path to the server-side script

void setURL(string url);

Parameters

url string path to the server-side script

Example

// on init stage
var myDataSelector = new dhtmlXDataSelector({
    url: "server/data.php"
});

// using method
myDataSelector.setURL("server/data.php");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start DataSelector dhtmlXDataSelector API Methods

show

shows dhtmlxDataSelector

void show();

Example

myDataSelector.show();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start DataSelector dhtmlXDataSelector API Methods

unload

destructor, unloads dhtmlXDataSelector instance and clears memory

void unload();

Example

var myDataSelector = new dhtmlXDataSelector(...);
 // unloading
myDataSelector.unload();
myDataSelector = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onGridCreated
    • onSelect
  • Others
Start DataSelector dhtmlXDataSelector API

Events

onGridCreated | fires immediately after a grid has been created
onSelect | fires when selection in the DataSelector is changed
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onGridCreated DHTMLX Docs

Documentation
  • onGridCreated
  • onSelect
Start DataSelector dhtmlXDataSelector API Events

onGridCreated

fires immediately after a grid has been created

void onGridCreated(object gridObj){ ... };

Parameters

gridObj object a grid object

Example

myDataSelector.attachEvent("onGridCreated", function(gridObj){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelect DHTMLX Docs

Documentation
  • onGridCreated
  • onSelect
Start DataSelector dhtmlXDataSelector API Events

onSelect

fires when selection in the DataSelector is changed

void onSelect(string|number id,mixed value){ ... };

Parameters

id | string|number | the id of the selected item
value | mixed | the value of the selected item

Example

myDataSelector.attachEvent("onSelect", function(id, value){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • lang
    • langData
Start DataSelector dhtmlXDataSelector API

Others

lang | defines the default language for all DataSelector instances
langData | the storage of custom DataSelector languages
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


lang DHTMLX Docs

Documentation
  • lang
  • langData
Start DataSelector dhtmlXDataSelector API Others

lang

defines the default language for all DataSelector instances

string lang;

Example

// way 1

// add settings for custom language
dhtmlXDataSelector.prototype.langData["fr"] = {
    ...
};

// initialize DataSelector
var myDataSelector = new dhtmlXDataSelector(...);

// apply language settings
myDataSelector.loadUserLanguage("fr");

// way 2 - simply change the lang property once, before init

// add settings for custom language
dhtmlXDataSelector.prototype.langData["fr"] = {
    ...
};

// make custom language default
dhtmlXDataSelector.prototype.lang = "fr";

// initialize DataSelector
// this instance will be initialized in French
var myDataSelector = new dhtmlXDataSelector(...);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


langData DHTMLX Docs

Documentation
  • lang
  • langData
Start DataSelector dhtmlXDataSelector API Others

langData

the storage of custom DataSelector languages

object langData;

Example

dhtmlXDataSelector.prototype.langData.fr = {
    ok: "Sélectionner",
    cancel: "Annuler",
    caption: "Sélectionnez un utilisateur"
};

// initialize DataSelector
var myDataSelector = new dhtmlXDataSelector();

// apply language settings
myDataSelector.loadUserLanguage("fr");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataStore DHTMLX Docs

Documentation
  • DataStore
    • DataStore API
    • Initializing DataStore
    • Syntax Templates
    • Data Scheme
    • Binding Components to DataStore
    • Server-Side Integration
    • Step-by-Step Example
Start

DataStore

DataStore is a component which was basically designed to perform a function of a data store. But at the same time, it's a full-fledged DHTMLX component with its own API.

Main Use Case

Storing data that's used by several components on a page. You can use more than one DataStore. They can be linked or not.

Description:

  1. The component has no graphical representation and used just to store data. We can compare DataStore with database table or view. UI components can be filled from it. You can also establish relationships between different DataStores the same as between tables in a database.
  2. Any data manipulation is made directly in dhtmlXDataStore object (not in a component that represents the data): sorting, filtering, deleting, adding, updating. For example, to delete a record from a grid (or some other component that takes data from DataStore) you need to delete this record from DataStore and it will be removed from all the bound components automatically.
  3. Controls relations between components. If you link grid and form to the same DataStore, details of the record selected in the grid will be shown in the form automatically. No additional coding is necessary.
API reference
  • DataStore API
Guides

Configuring DataStore

  • Initializing DataStore
  • Syntax Templates
  • Data Scheme
 Discusses the initialization of DataStore and the ways of customizing this component: choosing a syntax template and setting a default scheme for data records.

Working with DataStore

  • Binding Components to DataStore
  • Server-Side Integration
  • Step-by-Step Example
 Describes the possibilities of binding DataStore with other components, integrating it with server and using DataStore in practice.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataStore API DHTMLX Docs

Documentation
  • DataStore API
    • Methods
    • Events
  • Initializing DataStore
  • Syntax Templates
  • Data Scheme
  • Binding Components to DataStore
  • Server-Side Integration
  • Step-by-Step Example
Start DataStore

DataStore API

Methods
add | Adds a new record to the dataset.
attachEvent | adds any user-defined handler to available events
bind | binds 2 dataStore objects (just for filtration one of datasets. Changes in the master dataStore [creating, updating, deleting] doesn't reflect in the bound dataStore).
clearAll | Removes all data from the component.
dataCount | Returns the total count of items in DataStore. In case of dynamic loading the method returns the expected count of items.
detachEvent | detaches a handler from an event
exists | Returns true if an item with the defined ID already exists.
filter | Filters DataStore by provided parameters.
first | Returns the ID of the first item ( an item with the index == 0 )
getCursor | get position of virtual cursor
idByIndex | Returns the ID of an item with the specified index.
indexById | Returns the index of an item with the specified ID.
item | Returns hash of data related to the specific item.
last | Returns the ID of the last item ( an item with the index == dataCount-1).
load | loads data to the component via XML or JSON, usually data-values pairs
next | Returns the ID of the next item ( an item with the index == current + 1).
parse | Parse an object or a string and fill the DataStore by parsed items.
previous | Returns the ID of the previous item ( an item with the index == current - 1).
remove | Removes item by the ID.
saveBatch | Makes simultaneous saving several components (batch saving).
serialize | serializes data to a JSON object .
setCursor | set virtual cursor
sort | Sorts a dataset.
sync | binds 2 dataStore objects (changes in the master dataStore [creating, updating, deleting] reflect in the bound dataStore).
unbind | unbinds 2 DataStore objects
update | updates a specific item
Events
onAfterAdd | fires after item adding is finished.
onAfterCursorChange | event called after value of cursor was changed
onAfterDelete | Occurs after item deleting is finished.
onBeforeAdd | fires before item adding is initiated
onBeforeCursorChange | event called just before value of cursor will be changed
onBeforeDelete | fires before item deleting is initiated
onDataRequest | called when component issues dynamic request for a data
onLoadError | occurs when server side returns invalid response during data loading
onStoreUpdated | fires when data was changed by any means
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • add
    • attachEvent
    • bind
    • clearAll
    • dataCount
    • detachEvent
    • exists
    • filter
    • first
    • getCursor
    • idByIndex
    • indexById
    • item
    • last
    • load
    • next
    • parse
    • previous
    • remove
    • saveBatch
    • serialize
    • setCursor
    • sort
    • sync
    • unbind
    • update
  • Events
Start DataStore DataStore API

Methods

add | Adds a new record to the dataset.
attachEvent | adds any user-defined handler to available events
bind | binds 2 dataStore objects (just for filtration one of datasets. Changes in the master dataStore [creating, updating, deleting] doesn't reflect in the bound dataStore).
clearAll | Removes all data from the component.
dataCount | Returns the total count of items in DataStore. In case of dynamic loading the method returns the expected count of items.
detachEvent | detaches a handler from an event
exists | Returns true if an item with the defined ID already exists.
filter | Filters DataStore by provided parameters.
first | Returns the ID of the first item ( an item with the index == 0 )
getCursor | get position of virtual cursor
idByIndex | Returns the ID of an item with the specified index.
indexById | Returns the index of an item with the specified ID.
item | Returns hash of data related to the specific item.
last | Returns the ID of the last item ( an item with the index == dataCount-1).
load | loads data to the component via XML or JSON, usually data-values pairs
next | Returns the ID of the next item ( an item with the index == current + 1).
parse | Parse an object or a string and fill the DataStore by parsed items.
previous | Returns the ID of the previous item ( an item with the index == current - 1).
remove | Removes item by the ID.
saveBatch | Makes simultaneous saving several components (batch saving).
serialize | serializes data to a JSON object .
setCursor | set virtual cursor
sort | Sorts a dataset.
sync | binds 2 dataStore objects (changes in the master dataStore [creating, updating, deleting] reflect in the bound dataStore).
unbind | unbinds 2 DataStore objects
update | updates a specific item
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


add DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

add

Adds a new record to the dataset.

void add();

Example

myStore.add({
          FirstName:"Alex",
          LastName:"Fgorle",
          Department:"HR",
          Gender: "Male"
});
//or if you use scheme
myStore.data.scheme({
        FirstName:"New employee",
            LastName:"",
            Department:"Unknown",
            Gender: "Male"
});

myStore.add({});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


bind DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

bind

binds 2 dataStore objects (just for filtration one of datasets. Changes in the master dataStore [creating, updating, deleting] doesn't reflect in the bound dataStore).

void bind(object target,function rule);

Parameters

target | object | the object that method is assigned to
rule | function | sets the rule according which components will be bound

Example

var data1 = new dhtmlXDataStore({ url:"../data/data1.json", datatype:"json" });
var data2 = new dhtmlXDataStore({ url:"../data/data2.json", datatype:"json" });

data2.bind(data1, function(tobj, sobj){
    if (sobj)
        return tobj.id == sobj.id;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearAll DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

clearAll

Removes all data from the component.

void clearAll();

Example

data.clearAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dataCount DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

dataCount

Returns the total count of items in DataStore. In case of dynamic loading the method returns the expected count of items.

void dataCount();

Example

var count = data.dataCount();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


exists DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

exists

Returns true if an item with the defined ID already exists.

void exists();

Example

var check = data.exists(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


filter DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

filter

Filters DataStore by provided parameters.

void filter();

Example

//shows all items where Publisher == "Test"
data.filter("Publisher","Test");
  //shows all items where Publisher starts from "Test"
data.filter(function(obj,value){
        if (obj.Publisher.indexOf(value)==0) return true;
        return false;
},"Test");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


first DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

first

Returns the ID of the first item ( an item with the index == 0 )

void first();

Example

var id = data.first();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCursor DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

getCursor

get position of virtual cursor

string getCursor();

Returns

string id of currently selected item
Details

Returns null if no item was selected.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


idByIndex DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

idByIndex

Returns the ID of an item with the specified index.

void idByIndex();

Example

var id = data.idByIndex(index);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


indexById DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

indexById

Returns the index of an item with the specified ID.

void indexById();

Example

var index = data.indexById(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


item DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

item

Returns hash of data related to the specific item.

void item();

Example

var item1 = data.item(id);
alert(item1.Version);
item1.Version = 2; //sets property 'Version' of the item to value '2'.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


last DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

last

Returns the ID of the last item ( an item with the index == dataCount-1).

void last();

Example

var id = data.last();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


load DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

load

loads data to the component via XML or JSON, usually data-values pairs

promise load(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.load({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.load('<data><node id="a1".../></data>');

// json/xml from server
myComponent.load("server/data.xml");

// local json/xml with callback
myComponent.load({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.load('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.load("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.load(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure the response has the header "Content-Type: text/xml" for the XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


next DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

next

Returns the ID of the next item ( an item with the index == current + 1).

void next();

Example

var next_id = data.next(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


parse DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

parse

Parse an object or a string and fill the DataStore by parsed items.

void parse();

Example

data.parse("<data> ... </data>");
//or
data.parse([1,2,3],[4,5,6](1,2,3],[4,5,6.html),"jsarray");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


previous DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

previous

Returns the ID of the previous item ( an item with the index == current - 1).

void previous();

Example

var prev_id = data.previous(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


remove DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

remove

Removes item by the ID.

void remove();

Example

//ids of bound component's items and dataStore items' ids coincide.
var id = myGrid.getSelectedRowId()
data.remove(id)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveBatch DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

saveBatch

Makes simultaneous saving several components (batch saving).

void saveBatch();

Example

data.saveBatch(function(){
        myForm1.save();
        myForm2.save();
});

Details

where myForm1, myForm2 - forms bound to DataStore.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


serialize DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

serialize

serializes data to a JSON object .

void serialize();

Example

data.serialize();

Details

Returns:

  • JSON object
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCursor DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

setCursor

set virtual cursor

void setCursor(string id);

Parameters

id string id of item which need to be selected

Example

data.setCursor(123)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


sort DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

sort

Sorts a dataset.

void sort();

Example

data.sort(function(a,b){
    return a.Version > b.Version ? 1 : -1;
},"asc");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


sync DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

sync

binds 2 dataStore objects (changes in the master dataStore [creating, updating, deleting] reflect in the bound dataStore).

void sync(object target, [object rule] );

Parameters

target | object | the object that method is assigned to
rule | object | optional, object with two attributes to enable filtering and sorting of DataStore

Example

var data1 = new dhtmlXDataStore({ url:"../data/data1.json", datatype:"json" });
var data2 = new dhtmlXDataStore({ datatype:"json" });

data2.sync(data1, {sort:true, filter:true});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unbind DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

unbind

unbinds 2 DataStore objects

void unbind();

Example

var data1 = new dhtmlXDataStore({ url:"../data/data1.json", datatype:"json" });
var data2 = new dhtmlXDataStore({ url:"../data/data2.json", datatype:"json" });

data2.bind(data1, function(tobj, sobj){
    if (sobj)
        return tobj.id == sobj.id;
});

data2.unbind(data1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


update DHTMLX Docs

Documentation
  • add
  • attachEvent
  • bind
  • clearAll
  • dataCount
  • detachEvent
  • exists
  • filter
  • first
  • getCursor
  • idByIndex
  • indexById
  • item
  • last
  • load
  • next
  • parse
  • previous
  • remove
  • saveBatch
  • serialize
  • setCursor
  • sort
  • sync
  • unbind
  • update
Start DataStore DataStore API Methods

update

updates a specific item

void update(string|number id,object data);

Parameters

id | string|number | the item id
data | object | the data object of the item

Example

var data = myDatastore.item(id);
myDatastore.update(data);
//or
var data = myDatastore.item(id);
data.property = "new value";
myDatastore.update(id, data);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onAfterAdd
    • onAfterCursorChange
    • onAfterDelete
    • onBeforeAdd
    • onBeforeCursorChange
    • onBeforeDelete
    • onDataRequest
    • onLoadError
    • onStoreUpdated
    • onXLE
    • onXLS
Start DataStore DataStore API

Events

onAfterAdd | fires after item adding is finished.
onAfterCursorChange | event called after value of cursor was changed
onAfterDelete | Occurs after item deleting is finished.
onBeforeAdd | fires before item adding is initiated
onBeforeCursorChange | event called just before value of cursor will be changed
onBeforeDelete | fires before item deleting is initiated
onDataRequest | called when component issues dynamic request for a data
onLoadError | occurs when server side returns invalid response during data loading
onStoreUpdated | fires when data was changed by any means
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterAdd DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterCursorChange
  • onAfterDelete
  • onBeforeAdd
  • onBeforeCursorChange
  • onBeforeDelete
  • onDataRequest
  • onLoadError
  • onStoreUpdated
  • onXLE
  • onXLS
Start DataStore DataStore API Events

onAfterAdd

fires after item adding is finished.

void onAfterAdd(){ ... };

Example

data.attachEvent("onAfterAdd", function (id, pos){
     //any custom logic here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterCursorChange DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterCursorChange
  • onAfterDelete
  • onBeforeAdd
  • onBeforeCursorChange
  • onBeforeDelete
  • onDataRequest
  • onLoadError
  • onStoreUpdated
  • onXLE
  • onXLS
Start DataStore DataStore API Events

onAfterCursorChange

event called after value of cursor was changed

void onAfterCursorChange(string id){ ... };

Parameters

id string new cursor position

Example

data.attachEvent("onAfterCursorChange", function(id){
   //custom code
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterDelete DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterCursorChange
  • onAfterDelete
  • onBeforeAdd
  • onBeforeCursorChange
  • onBeforeDelete
  • onDataRequest
  • onLoadError
  • onStoreUpdated
  • onXLE
  • onXLS
Start DataStore DataStore API Events

onAfterDelete

Occurs after item deleting is finished.

void onAfterDelete(){ ... };

Example

data.attachEvent("onAfterDelete", function (id){
     //any custom logic here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeAdd DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterCursorChange
  • onAfterDelete
  • onBeforeAdd
  • onBeforeCursorChange
  • onBeforeDelete
  • onDataRequest
  • onLoadError
  • onStoreUpdated
  • onXLE
  • onXLS
Start DataStore DataStore API Events

onBeforeAdd

fires before item adding is initiated

void onBeforeAdd(){ ... };

Example

data.attachEvent("onBeforeAdd", function (id, obj, pos){
     //any custom logic here
     return true;
});

Details

Event is blockable, if false value is returned by a custom method, the default reaction will be blocked.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeCursorChange DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterCursorChange
  • onAfterDelete
  • onBeforeAdd
  • onBeforeCursorChange
  • onBeforeDelete
  • onDataRequest
  • onLoadError
  • onStoreUpdated
  • onXLE
  • onXLS
Start DataStore DataStore API Events

onBeforeCursorChange

event called just before value of cursor will be changed

void onBeforeCursorChange(string id){ ... };

Parameters

id string old cursor position

Example

data.attachEvent("onBeforeCursorChange", function(id){
   //custom code
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDelete DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterCursorChange
  • onAfterDelete
  • onBeforeAdd
  • onBeforeCursorChange
  • onBeforeDelete
  • onDataRequest
  • onLoadError
  • onStoreUpdated
  • onXLE
  • onXLS
Start DataStore DataStore API Events

onBeforeDelete

fires before item deleting is initiated

void onBeforeDelete(string|number id){ ... };

Parameters

id string|number the item's id

Example

data.attachEvent("onBeforeDelete", function (id){
     //any custom logic here
     return true;
});

Details

the event is blockable, if false value is returned by a custom method, the default reaction (the item's deleting) will be blocked

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDataRequest DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterCursorChange
  • onAfterDelete
  • onBeforeAdd
  • onBeforeCursorChange
  • onBeforeDelete
  • onDataRequest
  • onLoadError
  • onStoreUpdated
  • onXLE
  • onXLS
Start DataStore DataStore API Events

onDataRequest

called when component issues dynamic request for a data

void onDataRequest(number start,number count){ ... };

Parameters

start | number | request data from start position
count | number | the number of records in the request

Example

data.attachEvent("onDataRequest", function(start, count){
    return true;
});

Details

The event is blockable. Returning false from the event handler will prevent data loading.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onLoadError DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterCursorChange
  • onAfterDelete
  • onBeforeAdd
  • onBeforeCursorChange
  • onBeforeDelete
  • onDataRequest
  • onLoadError
  • onStoreUpdated
  • onXLE
  • onXLS
Start DataStore DataStore API Events

onLoadError

occurs when server side returns invalid response during data loading

void onLoadError(string text,object xml,object loader){ ... };

Parameters

text | string | the text of server response
xml | object | the XML object of server response
loader | object | the XMLHttpRequest object related to data loading

Example

store.attachEvent("onLoadError", function(text, xml, loader){
    // custom code
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onStoreUpdated DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterCursorChange
  • onAfterDelete
  • onBeforeAdd
  • onBeforeCursorChange
  • onBeforeDelete
  • onDataRequest
  • onLoadError
  • onStoreUpdated
  • onXLE
  • onXLS
Start DataStore DataStore API Events

onStoreUpdated

fires when data was changed by any means

void onStoreUpdated(string id,object data,string mode){ ... };

Parameters

id | string | id of item that was updated
data | object | data object of updated item
mode | string | update type ("update", "insert", "delete", "paint", "move")

Example

myDataStore.attachEvent("onStoreUpdated", function(id, data, mode){
    //custom code
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterCursorChange
  • onAfterDelete
  • onBeforeAdd
  • onBeforeCursorChange
  • onBeforeDelete
  • onDataRequest
  • onLoadError
  • onStoreUpdated
  • onXLE
  • onXLS
Start DataStore DataStore API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterCursorChange
  • onAfterDelete
  • onBeforeAdd
  • onBeforeCursorChange
  • onBeforeDelete
  • onDataRequest
  • onLoadError
  • onStoreUpdated
  • onXLE
  • onXLS
Start DataStore DataStore API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing DataStore DHTMLX Docs

Documentation
  • DataStore API
  • Initializing DataStore
    • Included files
    • Object constructor
    • Parameters
  • Syntax Templates
  • Data Scheme
  • Binding Components to DataStore
  • Server-Side Integration
  • Step-by-Step Example
Start DataStore

Initializing DataStore

Included files

To use the functionality of dhtmlXDataStore you need to include one file:

<script type="text/javascript" src="../codebase/datastore.js"></script>

Note, if you use the dhtmlxSuite package you needn't include any additional files.

Object constructor

There are 2 ways of initializing DataStore and filling it with data:

1) To create and then fill with script:

var myDataStore = new dhtmlXDataStore();
myDataStore.parse([
    {id:"1", name:"Accounts Department"},
    {id:"2", name:"Customer Service"},
    {id:"3", name:"Developing Department"}
]);

2) To specify the path to a data file in the constructor (fill from server):

var data = new dhtmlXDataStore({
    url:"data/data.json",
    datatype:"json"
});

Parameters

data (object)

The loaded data.

var contacts = new dhtmlXDataStore({
    data:[
        {name: "Alex", gender:"male"},
        {name: "Kate", gender:"female"}
    ]
});

dataFeed (string)

The path to php file which will get change requests. Used to reload data from server.

var contacts = new dhtmlXDataStore({
    dataFeed:"../data/json.php",
    datatype:"json"
});

datatype

The type of data. (json, xml, jsarray, csv)

var contacts = new dhtmlXDataStore({
    url:"data/data.json",
    datatype:"json"
});

scheme (object)

The default scheme for data records.

var contacts = new dhtmlXDataStore({
    url:"data/data.json",
    datatype:"json",
    scheme({
        name:"Unknown",
        gender:"male",
        age:25,
        department: "Unknown"
    })
});

url (string)

The data url.

var contacts = new dhtmlXDataStore({
    url:"data/data.json",
    datatype:"json"
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Syntax Templates DHTMLX Docs

Documentation
  • DataStore API
  • Initializing DataStore
  • Syntax Templates
    • JSON
    • XML
    • JSArray
    • CSV
  • Data Scheme
  • Binding Components to DataStore
  • Server-Side Integration
  • Step-by-Step Example
Start DataStore

Syntax Templates

JSON

Object can contain any number of properties.

The “id” property is used as the ID of the object. If there is no such property, random IDs are created for each object.

[{
 "id":"1",
 "Name":"Dammann",
 "Department":"Legal Department",
 "Gender":"Male"
},{
 "id":"2",
 "Name":"Barby",
 "Department":"Human Resources",
 "Gender":"Female"
}]

XML

The tags of the top and of the second level can have any name.

<data>
    <item id="1">
        <Name><![CDATA[Dammann]]></Name>
        <Department><![CDATA[Legal Department]]></Department>
        <Gender><![CDATA[Male]]></Gender>
    </item>
    <item id="2">
        <Name><![CDATA[Barby]]></Name>
        <Department><![CDATA[Human Resources]]></Department>
        <Gender><![CDATA[Female]]></Gender>
    </item>
</data>

JSArray

There are no names for columns in JSArray's data, so they are auto-named: the first column is accessible as “data0”, the second one - as “data1”, etc. The IDs are auto-generated.

[["1", "Dammann", "Legal Department", "Male"],
["2", "Barby", "Human Resources", "Female"]]

CSV

There are no names for columns in CSV's data, so they are auto-named: the first column is accessible as “data0”, the second one - as “data1”, etc. The IDs are auto-generated.

"1", "Dammann", "Legal Department", "Male"
"2", "Barby", "Human Resources", "Female"
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Data Scheme DHTMLX Docs

Documentation
  • DataStore API
  • Initializing DataStore
  • Syntax Templates
  • Data Scheme
  • Binding Components to DataStore
  • Server-Side Integration
  • Step-by-Step Example
Start DataStore

Data Scheme

Data scheme allows setting a default scheme for data records of DataStore. So in cases when you add an empty record to DataStore (data.add({})), the record will be populated with the values set by the scheme.

myDataStore.data.scheme({
    name:"Unknown",
    gender:"male",
    age:25,
    department: "Unknown"
});
//will add {name:"Unknown",gender:"male",age:25,department:"Unknown"} record
myDataStore.add({});

There are also 2 special keys you can use in a scheme:

  • $init - called during initial object creation

    Let's assume you want to populate a combo with data from some column of db (e.g. column 'name' with the names of departments). To make the combo recognize the names of departments as options, combo should get data as sets of 'text' and 'value' parameters. In this situation the $init key is useful:
     myDataStore.data.scheme({
    $init:function(obj){
        obj.value = obj.name;  // 'name' is the name of the column from the db
        obj.text = obj.name;
    }
 });
  • $update - called each time after data changing
    myDataStore.data.scheme({
    $update:function(obj){
        obj.text = obj.name + " " + obj.number;
    }
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Binding Components to DataStore DHTMLX Docs

Documentation
  • DataStore API
  • Initializing DataStore
  • Syntax Templates
  • Data Scheme
  • Binding Components to DataStore
    • Methods used for data binding
    • Binding cases
    • Unbinding DataStore objects
    • CRUD operations in bound components
    • Sorting and Filtering in Grid binded to DataStore
  • Server-Side Integration
  • Step-by-Step Example
Start DataStore

Binding Components to DataStore

Components bound to DataStore will keep their data synchronized with the data stored in DataStore. They will also be bound with each other (e.g. a grid and a form).

Methods used for data binding
  • sync() - copies all the data from the store (used for multirecords components like a grid).
  • bind() - copies just a single record related to some item (used for single-record component like a form).
  • dataFeed() - helps to reload data from the server (instead of the master component).

Binding cases
  • binding components to DataStore:
var list1 = new dhtmlXDataStore({ url:"../data/data1.json", datatype:"json" });
grid.sync(list1);
  • binding 2 DataStores:
var data1 = new dhtmlXDataStore({ url:"../data/data1.json", datatype:"json" });
var data2 = new dhtmlXDataStore({ url:"../data/data2.json", datatype:"json" });

data2.bind(data1, function(data, filter){
    if (filter)
        return data.id == filter.id;
});

grid1.attachEvent("onRowSelect", function(id){
    data1.setCursor(id);
});
grid1.sync(data1);
grid2.sync(data2);
  • binding DataStore to the server-side:
var data1 = new dhtmlXDataStore({ url:"../data/data1.json", datatype:"json" });
var data2 = new dhtmlXDataStore({ dataFeed:"../data/json.php", datatype:"json" });

data2.bind(data1, function(data, filter){
    filter.Package = "Filter by "+data.Package;
});

grid1.attachEvent("onSelectStateChanged", function(id){
    data1.setCursor(id);
});
grid1.sync(data1);
grid2.sync(data2);

Unbinding DataStore objects

The unbind() method is used to unbind 2 DataStore objects:

...
data2.bind(data1, function(data, filter){
    if (filter)
        return data.id == filter.id;
});

data2.unbind(data1);

CRUD operations in bound components

To perform any data manipulation in the bound-to-DataStore component(s) you should remember the main thing: operations are performed with components indirectly, by means of the related dhtmlxDataStore object.

What does it mean? For example, if you want to delete some record from a grid, you should delete it from the DataStore the grid is bound to. After the record has been deleted from Datastore, it will be automatically deleted from the grid. This rule concerns any operation: update, deletion, creation, filtering or sorting.

var store = new dhtmlXDataStore({
    url:"php/data.php"
});

myGrid.sync(store);
...
var selectedItem = myGrid.getSelectedRowId();
store.remove(selectedItem);

Tip 1

Some components (grid, dataview, form) while being bound to dataStore start to have the method save(item_id) available. The method allows you to save changes in Datastore programmatically.

Let's assume, you have a grid. When you edit some record and press 'Enter', the changes are saved automatically. To save some data programmatically just use the following code:

var store = new dhtmlXDataStore();

myDP = new dataProcessor("php/data.php");
myDP.init(store);

grid.sync(store);
var selectedItem = myGrid.getSelectedRowId();
grid.save(selectedItem);

Tip 2

The second tip concerns the method setCursor(item_id). When dealing with several components, you can be confused while loading data from master to slave components - for which one to call the method. Remember, the method is called for the master to push data to slaves.

For example, if you have a grid bound to DataStore and a form bound to the grid, and want to update form data, call:

myform.bind(mygrid);
mygrid.setCursor(row_id);

Sorting and Filtering in Grid binded to DataStore

When you bind Grid to DataStore, the filtering and sorting functions won't work properly in Grid.
If you reload the page, the changes made in Grid will be reverted, as DataStore won't apply them.

To solve this issue, while binding grid to datastore with the help of the sync method, you need to pass the second parameter to this method - object with two attributes that switches on the filtering and sorting functionality of DataStore:

  • rule - (object) object with two attributes to enable filtering and sorting of DataStore
myGrid.sync(data, {sort:true, filter:true});

In the downloaded dhtmlxSuite package you can find a sample of such a case, by following the path dhtmlxDataStore/samples/04_mastergrid/01_client.html.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Server-Side Integration DHTMLX Docs

Documentation
  • DataStore API
  • Initializing DataStore
  • Syntax Templates
  • Data Scheme
  • Binding Components to DataStore
  • Server-Side Integration
  • Step-by-Step Example
Start DataStore

Server-Side Integration

For implementing server-side functionality you should use dhtmlxConnector and dataProcessor like for any other DHTMLX component.

dhtmlxConnector lets you just load data from DB.

dhtmlxConnector + dataProcessor allows making Create/Update/Delete operations.

JSONDataConnector/DataConnector

There are 2 connector types you can use for dhtmlXDataStore objects:

  • JSONDataConnector
  • DataConnector

They both work in the same way but differ in the type of the returned data. The first one generates 'xml' data feed, the second one - 'json' data feed.

<?php
require_once("../../connector/data_connector.php");
require_once("../../connector/db_sqlite.php");

if (!$db = sqlite_open('db', 0777, $sqliteerror)) {
    die($sqliteerror);
}
$data = new JSONDataConnector($db,"SQLite");
$data->render_table("users", "id", "name,age,city");
?>

dataProcessor

To implement CRUD operations you should initialize dataProcessor and define a dataStore object as the parameter of the init() command.

var myDataStore = new dhtmlXDataStore({
    url:"php/data.php",
    datatype:"json"
});

myDP = new dataProcessor("php/data.php");
myDP.init(myDataStore);

Detailed information

You can find the detailed information concerning the usage of dhtmlxConnector and dataProcessor in the related documentation:

  • 'dhtmlxConnector' documentation
  • 'dataProcessor' documentation
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Step-by-Step Example DHTMLX Docs

Documentation
  • DataStore API
  • Initializing DataStore
  • Syntax Templates
  • Data Scheme
  • Binding Components to DataStore
  • Server-Side Integration
  • Step-by-Step Example
Start DataStore

Step-by-Step Example

You probably find it hard to think of situations where this "invisible store" would be useful.

So let's consider some company for example. It has a number of departments. There are employees in each department.

The goal

Let's assume we want to present the following info on a page :

  • All company's staff.
  • Some element that allows filtering staff by department.
  • Details of the selected employee.

Chosen Components

Clearly, we need several components to achieve our goal.

The final set of components can vary, but we've chosen the following:

  • dhtmlxCombo - allows filtering employees by department;
  • dhtmlxGrid - contains department's employees;
  • dhtmlxForm - contains employee's details;
  • dhtmlxlayout - allows grouping elements on a page.

Implementation

We've divided this stage into 4 steps:

  1. Components initialization (without data loading, just creating instances and their configuration):
    var layout = new dhtmlXLayoutObject(...);
var myGrid = layout.cells("c").attachGrid();
var myForm = layout.cells("b").attachForm();
var myCombo = new dhtmlXCombo(...);
  2. Creating 2 dhtmlXDataStore objects (one with deparments' names and the second one with employees details):
    var employees = new dhtmlXDataStore();
var departments = new dhtmlXDataStore();
  3. Loading data to components ( through sync() method, the so-called synchronization of dhtmlxDataStore with the representative component):
    myCombo.sync(departments);// to load data to the combo
myGrid.sync(employees); // to load data to the grid
  4. Linking the represented components (through bind() command):
    myGrid.bind(myCombo, function(data, filter){  // to link the grid to the combo
    return myGrid.cells(data, 2).getValue() == filter.text;
});
myForm.bind(myGrid);// to link the form to the grid

As you can see, we've needed just 4 commands to load data and link the components (steps 3 and 4) that proves the above-mentioned statement: dhtmlXDataStore is really a handy way to store data when dealing with several components.

Often repeated problem:

If you deal with a grid (bind it to smth or smth to it) and the grid (or bound-to-it component) doesn't display anything, check if you call mygrid.setColumnIds('field_1,field_2,field_3'), where field_1,field_2,field_3 are the names of the related data items of the bound component.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataView DHTMLX Docs

Documentation
  • DataView
    • dhtmlXDataView API
    • Object Constructor
    • Initializing DataView
    • Specifying Templates
    • Paging
    • Loading Data
    • Dynamic Loading
    • Connecting to Database
    • Operating Items
    • Drag-n-Drop
    • Moving Items by API
    • Handling Events
    • Migration from dhtmlxFolders
Start

DataView

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 make your data organized.

If you're building an online store or an 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 the object rendering and create an Ajax-enabled item browser with any design you want.

API reference
  • dhtmlXDataView API
Related resources
  • You may download dhtmlxDataView from dhtmlx.com
  • Check online samples for dhtmlxDataView
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Configuring Dataview

  • Initializing DataView
  • Object Constructor
  • Specifying Templates
  • Paging
 Describes the initialization of DataView as well as the elements of its customization: types of data templates and paging.

Loading Data

  • Loading Data
  • Dynamic Loading
  • Connecting to Database
 Guides you through the possibilities of loading data into DataView.

Operating Items

  • Adding Items
  • Deleting Items
  • Editing Items
  • Selection
  • Sorting
  • Filtering
  • Drag-n-Drop
  • Moving Items by API
 Covers the ways of working with data in DataView: adding/deleting, selecting, filtering, sorting and moving items.

Other

  • Handling Events
  • Migration from dhtmlxFolders
 Includes common info you may need while working with DataView.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXDataView API DHTMLX Docs

Documentation
  • dhtmlXDataView API
    • Methods
    • Events
    • Others
  • Object Constructor
  • Initializing DataView
  • Specifying Templates
  • Paging
  • Loading Data
  • Dynamic Loading
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
  • Migration from dhtmlxFolders
Start DataView

dhtmlXDataView API

Methods
add | adds a data item to the dataview
attachEvent | adds any user-defined handler to available events
changeId | changes the id of an item
clearAll | removes all data from DataView and repaints the component
copy | creates a copy of an item
customize | customizes the currently active template by replacing default properties with the one from provided object
dataCount | returns the total count of items in the dataview
define | configures some mode of DataView
destructor | destructs the DataView object
detachEvent | detaches a handler from an event
edit | switches the specified item to the edit state
exists | returns true if the item with the defined ID already exists
filter | filters DataView by the provided parameters
first | returns the ID of the first item (item with the index == 0)
get | gets the object of the data item with the specified id
getSelected | returns the currently selected ID
idByIndex | returns the ID of the item with the specified index
indexById | returns the index of the item with the specified ID
isEdit | gets the status of the edit operation
isSelected | returns true, if an item is selected
last | returns the ID of the last item (the item with the index == dataCount-1)
load | loads data to the component via XML or JSON, usually data-values pairs
locate | returns an item's ID by HTML event (checks if any item is in the area of HTML event)
move | moves an item to the defined position
moveBottom | sets an item as the last item in the view
moveDown | changes the index of an item by moving it to the end of the view by the defined count of steps
moveTop | sets an item as the first item in the view
moveUp | changes the index of an item by moving it to the start of the view by the defined count of steps
next | returns ID of the next item (item with the index == current + 1)
parse | parses an object or a string and fills the dataview with the parsed items
previous | returns ID of the previous item (item with the index == current - 1)
refresh | repaints an item or the whole dataview
remove | removes a data item from the dataview
select | marks an item as selected
selectAll | selects all items in the dataview
serialize | serializes component back to json
set | associates the hash of data with some ID
show | adjusts the scrollbars of dataview to make the item in question visible
sort | adds any user-defined handler for available events
stopEdit | if there was some item in the edit state, this command switches it back to the normal state
unselect | removes selection from a certain item
unselectAll | removes selection from all the items in the dataview
update | updates a particular item in the dataview
Events
onAfterAdd | fires when item adding is finished
onAfterDelete | fires after item deleting is finished
onAfterDrop | fires when the drag-n-drop operation is finished
onAfterEditStart | fires when the editor is ready for data input
onAfterEditStop | fires when the editor is closed
onAfterRender | called after view was repainted
onAfterSelect | fires when the selection of an item is finished
onBeforeAdd | fires before item adding is initiated
onBeforeContextMenu | called on the right mouse click
onBeforeDelete | fires before item deleting is initiated
onBeforeDrag | fires before the drag operation started
onBeforeDragIn | fires before an item is dragged to another potential target
onBeforeDrop | fires before an item is dragged to another target and the mouse button is released
onBeforeEditStart | fires before the editing process is initialized
onBeforeEditStop | fires before editor closing is initialized
onBeforeRender | fires before repainting the dataview
onBeforeSelect | fires before selection of an item is started
onDataRequest | called when component issues dynamic request for a data
onDragOut | fires when an item is dragged out of a potential target
onEditKeyPress | fires when a key is pressed while the editor is active
onItemClick | fires when an item is clicked
onItemDblClick | fires when an item is double clicked
onItemRender | fires before rendering a separate item
onMouseMove | fires when the mouse pointer is moved over an item
onMouseMoving | fires when the mouse pointer is moved over a dataview
onMouseOut | fires when the mouse pointer is moved out of the dataview, or out of some item in the dataview
onSelectChange | fires when the selection is changed
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Other
$view top html node of component
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • add
    • attachEvent
    • changeId
    • clearAll
    • copy
    • customize
    • dataCount
    • define
    • destructor
    • detachEvent
    • edit
    • exists
    • filter
    • first
    • get
    • getSelected
    • idByIndex
    • indexById
    • isEdit
    • isSelected
    • last
    • load
    • locate
    • move
    • moveBottom
    • moveDown
    • moveTop
    • moveUp
    • next
    • parse
    • previous
    • refresh
    • remove
    • select
    • selectAll
    • serialize
    • set
    • show
    • sort
    • stopEdit
    • unselect
    • unselectAll
    • update
  • Events
  • Others
Start DataView dhtmlXDataView API

Methods

add | adds a data item to the dataview
attachEvent | adds any user-defined handler to available events
changeId | changes the id of an item
clearAll | removes all data from DataView and repaints the component
copy | creates a copy of an item
customize | customizes the currently active template by replacing default properties with the one from provided object
dataCount | returns the total count of items in the dataview
define | configures some mode of DataView
destructor | destructs the DataView object
detachEvent | detaches a handler from an event
edit | switches the specified item to the edit state
exists | returns true if the item with the defined ID already exists
filter | filters DataView by the provided parameters
first | returns the ID of the first item (item with the index == 0)
get | gets the object of the data item with the specified id
getSelected | returns the currently selected ID
idByIndex | returns the ID of the item with the specified index
indexById | returns the index of the item with the specified ID
isEdit | gets the status of the edit operation
isSelected | returns true, if an item is selected
last | returns the ID of the last item (the item with the index == dataCount-1)
load | loads data to the component via XML or JSON, usually data-values pairs
locate | returns an item's ID by HTML event (checks if any item is in the area of HTML event)
move | moves an item to the defined position
moveBottom | sets an item as the last item in the view
moveDown | changes the index of an item by moving it to the end of the view by the defined count of steps
moveTop | sets an item as the first item in the view
moveUp | changes the index of an item by moving it to the start of the view by the defined count of steps
next | returns ID of the next item (item with the index == current + 1)
parse | parses an object or a string and fills the dataview with the parsed items
previous | returns ID of the previous item (item with the index == current - 1)
refresh | repaints an item or the whole dataview
remove | removes a data item from the dataview
select | marks an item as selected
selectAll | selects all items in the dataview
serialize | serializes component back to json
set | associates the hash of data with some ID
show | adjusts the scrollbars of dataview to make the item in question visible
sort | adds any user-defined handler for available events
stopEdit | if there was some item in the edit state, this command switches it back to the normal state
unselect | removes selection from a certain item
unselectAll | removes selection from all the items in the dataview
update | updates a particular item in the dataview
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


add DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

add

adds a data item to the dataview

void add(object obj, [number index] );

Parameters

obj | object | the item object
index | number | optional, the item's position (zero-based numbering)

Example

// initializing a dataview
var myDataView = new dhtmlXDataView({
    container:"data_container",
    type:{
        template:"Package"
    }
});

// adding a new data item to the dataview
myDataView.add({
    id:15,
    Package:"test one",
    Version:"0.1",
    Maintainer:"dhtmlx"
}, 0)

Details

Note:

  • if the index parameter isn't specified in the method, the item will be added to the bottom of the list
  • if the id property isn't specified for the item, it will be auto generated
See also
  • API
    • remove
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


changeId DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

changeId

changes the id of an item

void changeId(string oldId,string newId);

Parameters

oldId | string | the id of an existing item
newId | string | a new id for the item

Example

myDataView.changeId("12333433", "12");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearAll DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

clearAll

removes all data from DataView and repaints the component

void clearAll();

Example

myDataView.clearAll();

Details

the command doesn't trigger server-side updates

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


copy DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

copy

creates a copy of an item

void copy(string|number sid, [number tindex,object tobj,string|number tid] );

Parameters

sid | string|number | id of the source item, mandatory
tindex | number | target index, optional
tobj | object | target object (target dataview), optional
tid | string|number | id which will be assigned to a newly created item, optional

Example

// make a copy of an element
var new_id = myDataView.copy(source_id);
// make a copy at the specific position
var new_id = myDataView.copy(source_id, index);
// make a copy in the different view
var new_id = myDataView.copy(source_id, index, some_other_view);
   //or
var new_id = myDataView.copy(source_id, null , some_other_view);

// make a copy by the defined ID
myDataView.copy(source_id, null, null, target_id);
   //or
myDataView.copy(source_id, index, null, target_id);
   //or
myDataView.copy(source_id, index, some_other_view, target_id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


customize DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

customize

customizes the currently active template by replacing default properties with the one from provided object

void customize(object properties);

Parameters

properties object a set of custom properties

Example

myDataView.customize({
    some_path:"../imgs/",
    some_property:value
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dataCount DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

dataCount

returns the total count of items in the dataview

number dataCount();

Returns

number the total count of items in the dataview

Example

var count = myDataView.dataCount();

Details

in case of dynamic loading the method returns the expected count of items

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


define DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

define

configures some mode of DataView

void define(string mode,boolean value);

Parameters

mode | string | name of the mode or the property which needs to be configured
value | boolean | value which will be assigned to the mode or the property, true by default

Example

myDataView.define("select","multiselect")
myDataView.define("type",{
    template:"some here"
});

Details

list of supported properties can be checked here

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


destructor DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

destructor

destructs the DataView object

void destructor();

Example

DataView.destructor();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


edit DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

edit

switches the specified item to the edit state

void edit(string|number id);

Parameters

id string|number id of the item in question

Example

myDataView.edit(id);

Details

there can be only one editable item at the same time, so the previously opened editor closes on the command activation

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


exists DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

exists

returns true if the item with the defined ID already exists

boolean exists(string|number id);

Parameters

id string|number id of the item in question

Returns

boolean true/false if the item exists/doesn't exist

Example

var check = myDataView.exists(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


filter DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

filter

filters DataView by the provided parameters

void filter(string|function key,string value);

Parameters

key | string|function | name of the property or custom filtering method
value | string | the value which will be used for filtering

Example

//show all items where Publisher == "Test"
myDataView.filter("#Publisher#","Test");
//show all items where Publisher starts from "Test"
myDataView.filter(function(obj,value){
    if (obj.Publisher.indexOf(value)==0) return true;
    return false;
},"Test");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


first DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

first

returns the ID of the first item (item with the index == 0)

string|number first();

Returns

string|number the ID of the first item

Example

var id = myDataView.first();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


get DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

get

gets the object of the data item with the specified id

object get(string|number id);

Parameters

id string|number id of the item in question

Returns

object the object of a data item

Example

var data = myDataView.get(id);
alert(data.Version);
data.Version = 2; // beware that you need to force the refresh

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelected DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

getSelected

returns the currently selected ID

string|number getSelected(boolean as_array);

Parameters

as_array boolean true, to force the return value to be an array

Returns

string|number currently selected id

Example

var id = myDataView.getSelected();

Details
  • if the multiselection is enabled and multiple items are selected, this method will return an array of IDs;
  • "as_array" parameter makes sense in multiselection mode, where a method may return a single value or an array based on selection state.

By using the "as_array" parameter you will always receive an array as the result of the method, which can simplify further processing.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


idByIndex DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

idByIndex

returns the ID of the item with the specified index

string|number idByIndex(number index);

Parameters

index number index of the item in question

Returns

string|number the ID of the item with the specified index

Example

var id = myDataView.idByIndex(index);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


indexById DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

indexById

returns the index of the item with the specified ID

number indexById(string|number ID);

Parameters

ID string|number ID of the item in question

Returns

number the index of the item with the specified ID

Example

var index = myDataView.indexById(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isEdit DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

isEdit

gets the status of the edit operation

string isEdit();

Returns

string id of item that is in the edit state

Example

var edit = myDataView.isEdit();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isSelected DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

isSelected

returns true, if an item is selected

void isSelected(string|number id);

Parameters

id string|number id of the item in question

Example

var check = myDataView.isSelected(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


last DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

last

returns the ID of the last item (the item with the index == dataCount-1)

string|number last();

Returns

string|number the ID of the last item

Example

var id = myDataView.last();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


load DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

load

loads data from an external file (xml, json, jsarray, csv)

promise load(string url, [string type,function callback] );

Parameters

url | string | an URL an the external file
type | string | optional, type of data (xml,csv,json,jsarray), xml by default
callback | function | optional, after loading callback function, can be omitted

Returns

promise a "promise" object

Example

// load dataview from an external file
myDataView.load("dataview.xml");

// load dataview, execute doAfterRefresh() function after dataview was loaded
myDataView.load("dataview.xml", doAfterRefresh);

// load dataview from an external csv file,
// execute doAfterRefresh() function after dataview was loaded
myDataView.load("dataview.csv","csv", doAfterRefresh,);

// returns a "promise" object, see details
myDataView.load(url).then(function(text){
    // text - a server side response
});

Details

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promix.js.

Change log
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


locate DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

locate

returns an item's ID by HTML event (checks if any item is in the area of HTML event)

void locate(Event Object ev);

Parameters

ev Event Object native HTML event

Example

some.onclick=function(e){
    var id = myDataView.locate(e||event);
    if (id)
        do_something();
}

Details

the method returns null if the relative item isn't found

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


move DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

move

moves an item to the defined position

void move(string|number sid, [number tindex,object tobj,string|number tid] );

Parameters

sid | string|number | id of the source item, mandatory
tindex | number | target index, optional
tobj | object | target object (target dataview), optional
tid | string|number | the id which will be assigned to the item after moving, optional

Example

//move to some position
myDataView.move(source_id, index);
//move to a different view
myDataView.move(source_id, index, some_other_view);
   //or
myDataView.move(source_id, null, some_other_view);
   //or
myDataView.move(source_id, index, some_other_view, target_id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveBottom DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

moveBottom

sets an item as the last item in the view

void moveBottom(string|number id);

Parameters

id string|number id of the item in question

Example

myDataView.moveBottom(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveDown DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

moveDown

changes the index of an item by moving it to the end of the view by the defined count of steps

void moveDown(string|number id, [number step] );

Parameters

id | string|number | id of the item in question
step | number | the count of steps, optional, 1 by default

Example

myDataView.moveDown(id);
//or
myDataView.moveDown(id,10);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveTop DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

moveTop

sets an item as the first item in the view

void moveTop(string|number id);

Parameters

id string|number id of the item in question

Example

myDataView.moveTop(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveUp DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

moveUp

changes the index of an item by moving it to the start of the view by the defined count of steps

void moveUp(string|number id, [number step] );

Parameters

id | string|number | id of the item in question
step | number | the count of steps, optional, 1 by default

Example

myDataView.moveUp(id);
//or
myDataView.moveUp(id,10);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


next DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

next

returns ID of the next item (item with the index == current + 1)

string|number next(string|number id);

Parameters

id string|number id of the item in question

Returns

string|number the id of the next item

Example

var next_id = myDataView.next(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


parse DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

parse

parses an object or a string and fills the dataview with the parsed items

void parse(string|object obj,string type);

Parameters

obj | string|object | an object or a string to parse
type | string | type of data

Example

myDataView.parse("<data> ... </data>");
//or
myDataView.parse([[1,2,3],[4,5,6]],"jsarray");

Details

types of an object to parse:

  • jsarray - string or array
  • json - string or object
  • xml, html, csv - string

possible data types:

  • "xml"
  • "html"
  • "json"
  • "jsarray"
  • "csv"
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


previous DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

previous

returns ID of the previous item (item with the index == current - 1)

string|number previous(string|number id);

Parameters

id string|number id of the item in question

Returns

string|number the id of the previous item

Example

var prev_id = myDataView.previous(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


refresh DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

refresh

repaints an item or the whole dataview

void refresh( [string|number id] );

Parameters

id string|number id of the item in question, optional

Example

//repaint a single item
myDataView.refresh(id);
//repaint the whole view
myDataView.refresh();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


remove DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

remove

removes a data item from the dataview

void remove(string|number id);

Parameters

id string|number the item's id or an array of ids

Example

myDataView.remove("item1");
//or
myDataView.remove(["item1","item2", "item3"]);

See also
  • API
    • add
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


select DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

select

marks an item as selected

void select( [string|number id] );

Parameters

id string|number id of the item which should be selected, optional

Example

//select one record
myDataView.select(id);
//select all
myDataView.select();

Details

if the id is not provided, the method works as selectAll()

See also
  • API
    • selectAll
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


selectAll DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

selectAll

selects all items in the dataview

void selectAll();

Example

myDataView.selectAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


serialize DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

serialize

serializes component back to json

object serialize();

Returns

object data from the dataview as json object

Example

var data = myDataView.serialize();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


set DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

set

associates the hash of data with some ID

void set(string|number id,object hash);

Parameters

id | string|number | id of the item in question
hash | object | a javascript object which contains data

Example

myDataView.set(id,{
    property:value
});

Details

the method was added as a pair for the method get(), but so far there aren't any practical use-cases which can be based on it

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

show

adjusts the scrollbars of dataview to make the item in question visible

void show(string|number id);

Parameters

id string|number id of the item in question

Example

myDataView.show(id);

Details

the method can be used as the continuation of the select() command which selects an item, but doesn't guarantee that the item is visible

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


sort DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

sort

adds any user-defined handler for available events

void sort(string key,string direction);

Parameters

key | string | the property name by which the dataview will be sorted or a custom sorting method
direction | string | the sorting direction, can take "asc" or "desc" values

Example

myDataView.sort("#Version#","asc");
myDataView.sort(function(a,b){
    return a.Version > b.Version ? 1 : -1;
},"asc");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


stopEdit DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

stopEdit

if there was some item in the edit state, this command switches it back to the normal state

void stopEdit();

Example

myDataView.stopEdit();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unselect DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

unselect

removes selection from a certain item

void unselect( [string|number id] );

Parameters

id string|number id of the item which needs to be unselected, optional

Example

//unselect one record
myDataView.unselect(id);
//unselect all
myDataView.unselect();

Details

if the id is not provided, the method works as unselectAll()

See also
  • API
    • unselectAll
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


unselectAll DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

unselectAll

removes selection from all the items in the dataview

void unselectAll();

Example

myDataView.unselectAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


update DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start DataView dhtmlXDataView API Methods

update

updates a particular item in the dataview

void update(string id,object data);

Parameters

id | string | id of item
data | object | data object

Example

myDataView.update(123, { text:"abc", value:22 });

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onAfterAdd
    • onAfterDelete
    • onAfterDrop
    • onAfterEditStart
    • onAfterEditStop
    • onAfterRender
    • onAfterSelect
    • onBeforeAdd
    • onBeforeContextMenu
    • onBeforeDelete
    • onBeforeDrag
    • onBeforeDragIn
    • onBeforeDrop
    • onBeforeEditStart
    • onBeforeEditStop
    • onBeforeRender
    • onBeforeSelect
    • onDataRequest
    • onDragOut
    • onEditKeyPress
    • onItemClick
    • onItemDblClick
    • onItemRender
    • onMouseMove
    • onMouseMoving
    • onMouseOut
    • onSelectChange
    • onXLE
    • onXLS
  • Others
Start DataView dhtmlXDataView API

Events

onAfterAdd | fires when item adding is finished
onAfterDelete | fires after item deleting is finished
onAfterDrop | fires when the drag-n-drop operation is finished
onAfterEditStart | fires when the editor is ready for data input
onAfterEditStop | fires when the editor is closed
onAfterRender | called after view was repainted
onAfterSelect | fires when the selection of an item is finished
onBeforeAdd | fires before item adding is initiated
onBeforeContextMenu | called on the right mouse click
onBeforeDelete | fires before item deleting is initiated
onBeforeDrag | fires before the drag operation started
onBeforeDragIn | fires before an item is dragged to another potential target
onBeforeDrop | fires before an item is dragged to another target and the mouse button is released
onBeforeEditStart | fires before the editing process is initialized
onBeforeEditStop | fires before editor closing is initialized
onBeforeRender | fires before repainting the dataview
onBeforeSelect | fires before selection of an item is started
onDataRequest | called when component issues dynamic request for a data
onDragOut | fires when an item is dragged out of a potential target
onEditKeyPress | fires when a key is pressed while the editor is active
onItemClick | fires when an item is clicked
onItemDblClick | fires when an item is double clicked
onItemRender | fires before rendering a separate item
onMouseMove | fires when the mouse pointer is moved over an item
onMouseMoving | fires when the mouse pointer is moved over a dataview
onMouseOut | fires when the mouse pointer is moved out of the dataview, or out of some item in the dataview
onSelectChange | fires when the selection is changed
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterAdd DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onAfterAdd

fires when item adding is finished

void onAfterAdd(object obj, [number index] ){ ... };

Parameters

obj | object | the object which was added
index | number | index at which the item was added, optional

Example

myDataView.attachEvent("onAfterAdd", function (obj, index){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterDelete DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onAfterDelete

fires after item deleting is finished

void onAfterDelete(string|number id){ ... };

Parameters

id string|number id of the item which was removed

Example

myDataView.attachEvent("onAfterDelete", function (id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterDrop DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onAfterDrop

fires when the drag-n-drop operation is finished

void onAfterDrop(object context,Event object event){ ... };

Parameters

context | object | context object
event | Event object | native HTML event

Example

myDataView.attachEvent("onAfterDrop", function (context,ev){
     // your code here
});

Details

possible values of the context object:

  • context.start - ID of an item, from which the dragging process has started
  • context.source - array of the dragged IDs (drag source)
  • context.target - ID of the target item (drop target)
  • context.from - view object to which the dragged item belongs
  • context.to - view object to which the drop target belongs
  • context.index - index in the target view at which new item will be added
  • context.new_id - id which will be used for the moved item (actual only while moving between different views)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterEditStart DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onAfterEditStart

fires when the editor is ready for data input

void onAfterEditStart(string|number id){ ... };

Parameters

id string|number id of the item that will be edited

Example

myDataView.attachEvent("onAfterEditStart", function (id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterEditStop DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onAfterEditStop

fires when the editor is closed

void onAfterEditStop(string|number id){ ... };

Parameters

id string|number id of the item

Example

myDataView.attachEvent("onAfterEditStop", function (id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterRender DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onAfterRender

called after view was repainted

void onAfterRender(){ ... };

Example

myDataView.attachEvent("onAfterRender", function(){
    //  your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterSelect DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onAfterSelect

fires when the selection of an item is finished

void onAfterSelect(string|number id){ ... };

Parameters

id string|number id of the item

Example

myDataView.attachEvent("onAfterSelect", function (id){
    // your code here
});

Details

in case of multi-select, the event fires only for the items which were clicked. And it doesn't fire for the items which were selected by shift-click or any similar actions.

The event won't fire for Ctrl-click which results in item unselecting. Basically, while onBeforeSelect fires for both select and unselect actions, onAfterSelect will fire only for true selects.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeAdd DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onBeforeAdd

fires before item adding is initiated

boolean onBeforeAdd(object obj, [index index] ){ ... };

Parameters

obj | object | an object which will be added
index | index | index, at which item will be added, optional

Returns

boolean true - to trigger the default action, false - to block it

Example

myDataView.attachEvent("onBeforeAdd", function (obj, index){
    // your code here
    return true;
});

Details

the event is blockable, if the false value is returned from the custom method, the default reaction will be blocked

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeContextMenu DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onBeforeContextMenu

called on the right mouse click

boolean onBeforeContextMenu(string id,Event e){ ... };

Parameters

id | string | id of item on which right click occurs
e | Event | native event object

Returns

boolean true to trigger the default action, false to block it

Example

myDataView.attachEvent("onBeforeContextMenu", function(id, e){
     // your code here
});

Details

the event is blockable, returning false will block the default action

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDelete DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onBeforeDelete

fires before item deleting is initiated

boolean onBeforeDelete(string|number id){ ... };

Parameters

id string|number id of the item which will be removed

Returns

boolean true to trigger the default action, false to block it

Example

myDataView.attachEvent("onBeforeDelete", function (id){
    // your code here
});

Details

the event is blockable, returning false will block the default action

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDrag DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onBeforeDrag

fires before the drag operation started

boolean onBeforeDrag(object context,Event object ev){ ... };

Parameters

context | object | context object
ev | Event object | native event object

Returns

boolean true - to trigger the default action, false - to block it

Example

myDataView.attachEvent("onBeforeDrag", function (context, ev){
    // your code here
    return true;
});

Details

possible context object values:

  • context.start - ID of an item from which the dragging process started;
  • context.source - array of the dragged IDs (drag source);
  • context.html - this property can be set to redefine the content of the drag-marker;
  • context.from - an object to which the dragged item belongs.

The event is blockable, returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDragIn DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onBeforeDragIn

fires before an item is dragged to another potential target

boolean onBeforeDragIn(object context,Event object ev){ ... };

Parameters

context | object | context object
ev | Event object | native event object

Returns

boolean true - to trigger the default action, false - to block it

Example

myDataView.attachEvent("onBeforeDragIn", function (context, ev){
    // your code here
    return true;
});

Details
  • context.start - ID of an item, from which the dragging process was started
  • context.source - an array of dragged IDs (drag source)
  • context.target - ID of the target item (drop target)
  • context.from - a view object to which the dragged item belongs
  • context.to - a view object to which the drop target belongs
  • context.index - an index in the target view at which new item will be added

The event is blockable, returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDrop DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onBeforeDrop

fires before an item is dragged to another target and the mouse button is released

boolean onBeforeDrop(object context,Event object ev){ ... };

Parameters

context | object | context object
ev | Event object | native HTML event

Returns

boolean true - to trigger the default action, false - to block it

Example

myDataView.attachEvent("onBeforeDrop", function (context,ev){
    // your code here
    return true;
});

Details
  • context.start - ID of an item from which the dragging process started
  • context.source - array of the dragged IDs (drag source)
  • context.target - ID of the target item (drop target)
  • context.from - a view object to which the dragged item belongs
  • context.to - a view object to which the drop target belongs
  • context.index - an index in the target view at which a new item will be added
  • context.new_id - an id which will be used for the moved item (actual only while moving between different views)

The event is blockable, returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeEditStart DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onBeforeEditStart

fires before the editing process is initialized

boolean onBeforeEditStart(string|number id){ ... };

Parameters

id string|number id of an item

Returns

boolean true - to trigger the default action, false - to block it

Example

myDataView.attachEvent("onBeforeEditStart", function (id){
    // your code here
    return true;
});

Details

The event is blockable, returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeEditStop DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onBeforeEditStop

fires before editor closing is initialized

boolean onBeforeEditStop(string|number id){ ... };

Parameters

id string|number id of the item

Returns

boolean true - to trigger the default action, false - to block it

Example

myDataView.attachEvent("onBeforeEditStop", function (id){
    // your code here
    return true;
});

Details

The event is blockable, returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeRender DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onBeforeRender

fires before repainting the dataview

boolean onBeforeRender(){ ... };

Returns

boolean true - to trigger the default action, false - to block it

Example

myDataView.attachEvent("onBeforeRender", function(){
     // your code here
});

Details

The event is blockable, returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeSelect DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onBeforeSelect

fires before selection of an item is started

boolean onBeforeSelect(string|number id,boolean state){ ... };

Parameters

id | string|number | id of the item
state | boolean | the selected state of the item (true when item is selected by action)

Returns

boolean true - to trigger the default action, false - to block it

Example

myDataView.attachEvent("onBeforeSelect", function (id, state){
    // your code here
    return true;
});

Details

The event is blockable, returning false will block the default action.

In case of multi-select, the event fires only for items which were clicked, and it doesn't fire for the items which were selected by Shift-click or similar actions.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDataRequest DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onDataRequest

called when component issues dynamic request for a data

boolean onDataRequest(number start,number count){ ... };

Parameters

start | number | request data from start position
count | number | request count records

Returns

boolean true - to trigger data loading, false - to block it

Example

myDataView.attachEvent("onDataRequest", function(start, count){
    return true;
});

Details

The event is blockable. Returning false from event handler will prevent data loading.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDragOut DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onDragOut

fires when an item is dragged out of a potential target

void onDragOut(object context,Event object ev){ ... };

Parameters

context | object | context object
ev | Event object | native event object

Example

myDataView.attachEvent("onDragOut", function (context, ev){
    // your code here
    return true;
});

Details

possible values of the context object:

  • context.start - ID of an item, from which the dragging process started
  • context.source - an array of the dragged IDs (drag source)
  • context.target - null
  • context.from - a view object to which the dragged item belongs
  • context.to - null
  • context.index - index in the target view at which new item will be added
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEditKeyPress DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onEditKeyPress

fires when a key is pressed while the editor is active

void onEditKeyPress(string code,string ctrl,string shift,Event object ev){ ... };

Parameters

code | string | key code
ctrl | string | control key flag
shift | string | shift key flag
ev | Event object | native event object

Example

myDataView.attachEvent("onEditKeyPress", function (code, ctrl, shift, ev){
    // your code here
    return true;
});

Details

the event can be used to define on which key the editing process will be stopped

myDataView.attachEvent("onEditKeyPress", function (code, ctrl, shift, ev){
    if (code == 13)
        this.stopEdit();
    return true;
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onItemClick DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onItemClick

fires when an item is clicked

boolean onItemClick(string|number id,Event object ev,object html){ ... };

Parameters

id | string|number | id of the item
ev | Event object | native event object
html | object | target HTML element

Returns

boolean true - to trigger the default action, false - to block it

Example

myDataView.attachEvent("onItemClick", function (id, ev, html){
    // your code here
    return true;
});

Details

The event is blockable. Returning false from event handler will prevent the default action (clicking an item).

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onItemDblClick DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onItemDblClick

fires when an item is double clicked

boolean onItemDblClick(string|number id,Event object ev,object html){ ... };

Parameters

id | string|number | id of the item
ev | Event object | native event object
html | object | target HTML element

Returns

boolean true - to trigger the default action, false - to block it

Example

myDataView.attachEvent("onItemDblClick", function (id, ev, html){
    // your code here
    return true;
});

Details

The event is blockable. Returning false from event handler will prevent the default action (double-clicking an item).

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onItemRender DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onItemRender

fires before rendering a separate item

void onItemRender(object obj){ ... };

Parameters

obj object data object

Example

myDataView.attachEvent("onItemRender", function(obj){
    // your code here
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseMove DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onMouseMove

fires when the mouse pointer is moved over an item

void onMouseMove(string|number id,Event object ev,object html){ ... };

Parameters

id | string|number | id of the item
ev | Event object | native event object
html | object | target HTML element

Example

myDataView.attachEvent("onMouseMove", function (id, ev, html){
    // your code here
    return true;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseMoving DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onMouseMoving

fires when the mouse pointer is moved over a dataview

void onMouseMoving(Event ev){ ... };

Parameters

ev Event a native event object

Example

myDataView.attachEvent("onMousemoving", function (ev){
    // your code here
});

Details

The event name is case-insensitive.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseOut DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onMouseOut

fires when the mouse pointer is moved out of the dataview, or out of some item in the dataview

void onMouseOut(Event object ev){ ... };

Parameters

ev Event object native event object

Example

myDataView.attachEvent("onMouseOut", function (ev){
    // your code here
    return true;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelectChange DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onSelectChange

fires when the selection is changed

void onSelectChange(array sel_arr){ ... };

Parameters

sel_arr array an array of items, the selected state of which is changed

Example

myDataView.attachEvent("onSelectChange", function (sel_arr){
   // your code here
});

Details

the event also fires for multi-select actions

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start DataView dhtmlXDataView API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • $view
Start DataView dhtmlXDataView API

Others

$view top html node of component
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


$view DHTMLX Docs

Documentation
  • $view
Start DataView dhtmlXDataView API Others

$view

top html node of component

Node $view;

Example

var node = some.$view;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • dhtmlXDataView API
  • Object Constructor
    • Simple
    • Detailed
  • Initializing DataView
  • Specifying Templates
  • Paging
  • Loading Data
  • Dynamic Loading
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
  • Migration from dhtmlxFolders
Start DataView

Object Constructor

There are two possible syntaxes of DataView constructor:

Simple

var myDataView = new dhtmlXDataView("container_id");

Where "container_id" - id of the HTML container, inside of which DataVIew will be initialized.

Detailed

var myDataView = new dhtmlXDataView({
    container:"container_id",
    drag:true,
    select:true,
    type:some
});

The parameters are:

  • container - {string|number|HTMLElement} the ID of an HTML container inside of which an item will be rendered, or the container itself
    • ID of HTML element
    • HTML object
  • drag - {boolean} enables drag-n-drop
    • true - drag-n-drop is allowed
    • false - drag-n-drop is denied
  • select - {string|boolean} defines selection mode
    • false - selection is denied
    • true - single selection is allowed
    • "multiselect" - multiselection is allowed
  • type - {string|object} the name of a render-type, or a custom template
    • name of type
    • type object, check the Templates article
  • height - {string} can be set as "auto" to force auto-height (if the parameter isn't set dataview adjusts to the height of the parent container)
    • "auto" - force auto-height mode (the dataview height will be enlarged to show all items)
  • pager - {object} paging control settings
    • pager object, check the Paging article
  • tooltip - {object} tooltip object settings
    • tooltip object
  • autowidth - {number|boolean} adjusts items' size to the container's size
    • true - 1 item in a row
    • number - the number of items to be set in a row
var myDataView = new dhtmlXDataView({
    container:"container_id",
    tooltip:{
        template:"Details: #property#"
    }
});

Related sample: Static loading

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing DataView DHTMLX Docs

Documentation
  • dhtmlXDataView API
  • Object Constructor
  • Initializing DataView
    • Step 1. Including Necessary Files
    • Step 2. Creating Container
    • Step 3. Initializing DataView
  • Specifying Templates
  • Paging
  • Loading Data
  • Dynamic Loading
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
  • Migration from dhtmlxFolders
Start DataView

Initializing DataView

To initialize DataView, you need to complete the following steps:

  1. include the related js and css files
  2. place a container for dataview on a page
  3. run the dataview initialization

Step 1. Including Necessary Files

To start working with dhtmlxDataView, you need to include DataView js/css files on a page.

In order to use dhtmlxDataView as a separate component, you need to include its source files on the page. There are two of them:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxdataview.css">
    <script src="codebase/dhtmlxdataview.js"></script>
</head>

If you use dhtmlxDataView as a part of "dhtmlxSuite" package, you need to have 2 files included:

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

dhtmlxDataview .js/.css files are part of dhtmlx.js/.css, so there is no need to include them separately.

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Step 2. Creating Container

HTML container for the dataview must have some sizes specified:

<div id="data_container" style="width:596px;height:396px;"></div>

Step 3. Initializing DataView

As only the "container" is mandatory you need to define the template and the source of data to see any result on a page:

view = new dhtmlXDataView({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#"
    }
});
view.add({
    Package:"test one",
    Version:"0.1",
    Maintainer:"dhtmlx"
});

Other possible parameters are given in the article Object Constructor.

Since the add command is not a mandatory part of initialization, you will not have any visible objects on the page before some data isn't loaded into dataview by the load or add commands.

Related sample: Static loading

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Specifying Templates DHTMLX Docs

Documentation
  • dhtmlXDataView API
  • Object Constructor
  • Initializing DataView
  • Specifying Templates
    • Basic Information
    • Types of Templates
    • Templates Syntax
    • Changing Parameters of Templates
    • Predefined Properties of Templates
    • Styling of Templates
    • Special Templates
  • Paging
  • Loading Data
  • Dynamic Loading
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
  • Migration from dhtmlxFolders
Start DataView

Specifying Templates

Basic Information

Templates define the way data is rendered inside of DataView. You can define multiple templates and switch between them dynamically.

view = new dhtmlXDataView({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        height:40
    }
});

The { Package:"a", Version:"b", Maintainer:"c"} will be rendered as:

a : b <br/> c

A template can be defined as a part of the constructor (or not) as:

view.define("type",{
    template:"#Package# : #Version#<br/>#Maintainer#"
});

If you need to provide only a text string and don't need any extra properties, you can use the "template" property directly on the top level (i.e. don't use the type parameter):

view = new dhtmlXDataView({
    container:"data_container",
    template:"#Package# : #Version#<br/>#Maintainer#"
});

Types of Templates

JS string

view.define("type",{
    template:"#Package# : #Version#<br/>#Maintainer#"
});

Related sample: Template from JS string

JS method

view.define("type",{
    template:function(){ return obj.Package +"<br/>"+obj.Maintainer; }
});

Related sample: Template from JS function

HTML container

<textarea id="template_container" rows="5" cols="60">
#Package# : #Version#
<br/>#Maintainer#</textarea>
...
view.define("type",{
    template:"html->template_container",
})

Related sample: Template from HTML container

HTML file

view.define("type",{
    template:"http->../common/template.html",
})

Related sample: Template from HTML file

Named templates

dhtmlx.Type.add(dhtmlXDataView,{
    name:"dataA",
    template:"#Package# : #Version#<br/>#Maintainer#",
    height:40
});

data = new dhtmlXDataView({
    container:"data_container",
    type:"dataA"
});

Related sample: Named templates

Templates Syntax

"#property#" - replaced with a value of the related property

view.define("type",{
    template:"#a# - #b#"
})
// a - b

"{common.property}" - replaced with a constant value from the template

view.define("type",{
    template:"#a# - {common.mydata}",
    mydata:25
})
// a - 25

"{common.method()}" - replaced with the result of a method call

view.define("type",{
    template:"#a# - {common.mymethod()}",
    mymethod:function(obj){
        return obj.b.toUpperCase();
    }
})
// a - B

"#property?valueA:valueB#" - ternary operator

view.define("type",{
    template:"#a# - #flag?exist:not exist#"
})
// a - not exist

"{-obj" - replaced with #

Related sample: Template syntax

Changing Parameters of Templates

Sometimes it can be useful to change some parameter of a template. As a result, the view will be repainted with new configuration.

view.customize({
    height:100
});

If you define some property in template as {common.some}, you will be able to change it any time by using the "customize" command.

Predefined Properties of Templates

view = new dhtmlXDataView({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        css:"some",
        width:120,
        height:40,
        margin:5,
        padding:0,
    }
});
  • template - (string) the template definition
  • height - (number) the item height. The default value - 115;
  • width - (number) the item width. The default value - 210;
  • margin - (number) the item margin. The default value - 0;
  • padding - (number) the item padding. The default value - 0;
  • border - (number) sets the border of the item container. The default value - 1;
  • css - (string) allows applying an additional css class to the template (see details below). The default value - 'default'.

Styling of Templates

If you want apply a custom CSS style to the template, use the following technique:

  1. Set the css property of the type parameter to some value, for example 'custom'
    view = new dhtmlXDataView({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        css:"custom",
    }
});
  2. Define 2 css classes on the page with the following names (use the !important declaration to guarantee that the defined css property will be surely applied):
    • .dhx_dataview_[css]_item - applied to items in the unselected state
    • .dhx_dataview_[css]_item_selected - applied to items in the selected state
    .dhx_dataview_custom_item_selected{
    font-weight:bold !important;
}
.dhx_dataview_custom_item{
    font-size:12px !important;
}

Note, the css property has the default value - 'default'. So, you can skip step 1 and define the css classes with the following names:

  • .dhx_dataview_default_item - applied to items in the unselected state
  • .dhx_dataview_default_item_selected - applied to items in the selected state

Special Templates

In addition to a standard template, dataview can have additional task-specific templates defined:

  • template_edit - applied to items during the Items editing process
  • template_loading - used as a stub during the Dynamic loading of data from the server
view = new dhtmlXDataView({
    container:"data_container",
    edit:true,
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        template_edit:"<input class='dhx_item_editor' bind='obj.Package'>",
        template_loading:"Loading..."
    }
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Paging DHTMLX Docs

Documentation
  • dhtmlXDataView API
  • Object Constructor
  • Initializing DataView
  • Specifying Templates
  • Paging
    • Navigation Between Pages
    • Changing Pager's Settings
    • Custom Pager's Skins
    • Pager's Events
  • Loading Data
  • Dynamic Loading
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
  • Migration from dhtmlxFolders
Start DataView

Paging

To create DataView with a paging area use the following code:

data = new dhtmlXDataView({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        height:40
    },
    pager:{
        container:"paging_here",
        size:20,
        group:8
    }
});

Pager object can contain the properties given below:

  • container - id of html container where a pager will be placed ( mandatory )
  • size - count of objects per page
  • group - count of visible page selectors

Related sample: Dynamic paging

Related sample: Static paging

Navigation Between Pages

var pager = view.config.pager;
pager.select(page_number);

Changing Pager's Settings

var pager = view.config.pager;
pager.define("group",5); //set group as 5
pager.define("size",25); //25 objects per page
pager.refresh();

Configurable properties are:

  • page - current page
  • limit - total count of pages
  • group - count of pages in the single visible group
  • size - count of items per page

Custom Pager's Skins

//default
pager.define("template","{common.pages()}");
//custom
pager.define("template","{common.first()}{common.pages()}{common.last()}");
pager.define("template",
  "{common.prev()}<div class='paging_text'>Page #page# from #limit#</div>{common.next()}");

Supported objects are:

  • common
    • common.pages() - block of page-buttons
    • common.first() - "first page" button
    • common.last() - "last page" button
    • common.prev() - "previous page" button
    • common.next() - "next page" button

  • obj
    • obj.page - current page
    • obj.limit - total number of pages
    • obj.size - count of items per page

Pager's Events

The list of supported pager's events includes:

  • onAfterPageChange
    • new page number
    • old page number

  • onBeforePageChange
    • new page number
    • old page number
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading Data DHTMLX Docs

Documentation
  • dhtmlXDataView API
  • Object Constructor
  • Initializing DataView
  • Specifying Templates
  • Paging
  • Loading Data
    • JSON
    • XML
    • HTML
    • CSV
    • JSArray
    • Parsing
    • Custom Data Types
  • Dynamic Loading
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
  • Migration from dhtmlxFolders
Start DataView

Loading Data

To load data from some external file you can use the load command:

view.load(url, datatype);

It takes the path to the file and a necessary data type as parameters. Where a data type can be: "json","xml","jsarray","csv","html".

Note that:

  • JSON and XML are the fastest for loading and the only formats which support dynamic loading.

  • Loading is asynchronous, which means you need to catch the end of loading before executing any commands against the data.

view.load(url, function(){
    alert("data is really loaded");
    //any operations with data can be placed here
},datatype);

If the datatype parameter is skipped, the operation will try to process the incoming data as XML.

JSON

view.load("some.json", "json");

where some.json contains a value similar to the following one:

"some.json"

[{
  "id":"1",
  "Package":"acx100-source",
  "Version":"20080210-1.1",
  "Maintainer":"Stefano Canepa"
},{
  "id":"2",
  "Package":"alien-arena-browser",
  "Version":"7.0-1",
  "Maintainer":"Debian Games Team"
},{
  "id":"3",
  "Package":"alien-arena-server",
  "Version":"7.0-1",
  "Maintainer":"Debian Games Team"
}]

The object can contain any number of properties and all of them will be available in templates.

The "id" property will be used as the ID of object. If there is no such a property, the component will create random IDs for each object.

Related sample: Loading data from JSON file

XML

view.load("some.xml", "xml");

There aren't any requirements for incoming XML (it can be in any format), all the top level tags will be converted into objects.

"some.xml"

<data>
    <item id="1">
        <Package><![CDATA[acx100-source]]></Package>
        <Version><![CDATA[20080210-1.1]]></Version>
        <Maintainer><![CDATA[Stefano Canepa]]></Maintainer>
    </item>
    <item id="2">
        <Package><![CDATA[alien-arena-browser]]></Package>
        <Version><![CDATA[7.0-1]]></Version>
        <Maintainer><![CDATA[Debian Games Team]]></Maintainer>
    </item>
</data>

The names of the top level and the second level tags don't matter.

The attributes of the top level tags (item in the snippet above) and values of nested tags will be available as properties in the template and for scripting.

If you want to process only the tags with specific names you can change the xpath used for data collecting:

dhtmlx.dataDriver.xml.records = "/data/item"; //select only item tags

Related sample: Loading data from xml

HTML

The processing works similar to that of XML, but will react only on <li> tags inside of the data (it makes no practical sense for loading from an url, exists just for consistence)

view.load("some.html", "html");

"some.html"

<ul>
    <li id="1" version="20080210-1.1" maintainer="Stefano Canepa">acx100-source</li>
    <li id="2" version="7.0-1" maintainer="Debian Games Team">alien-arena-browser</li>
    <li id="3" version="7.0-1" maintainer="Debian Games Team">alien-arena-server</li>
</ul>

The key-tag can be changed by using:

dhtmlx.dataDriver.md.tag = "DIV";

Related sample: Loading from html file

CSV

Data in CSV doesn't have names for columns, so they are autonamed: the first column is accessible as "data0", the second one - as "data1", etc. IDs are auto-generated.

view.load("some.csv", "csv");

"some.csv"

"1", "acx100-source", "20080210-1.1", "Stefano Canepa"
"2", "alien-arena-browser", "7.0-1", "Debian Games Team"
"3", "alien-arena-server", "7.0-1", "Debian Games Team"

You can configure a row and a line separators as:

dhtmlx.dataDriver.csv.row = "\n";
dhtmlx.dataDriver.csv.cell= ",";

Related sample: Loading data from CSV file

JSArray

Data in JS array doesn't have names for columns, so they are autonamed: the first column is accessible as "data0", the second as "data1" and etc. IDs are auto-generated.

view.load("some.js", "jsarray");

"some.js"

[["1", "acx100-source", "20080210-1.1", "Stefano Canepa"],
["2", "alien-arena-browser", "7.0-1", "Debian Games Team"],
["3", "alien-arena-server", "7.0-1", "Debian Games Team"]]

Related sample: Loading data from JS array

Parsing

When the data is already available on the client side, you can use the code:

view.parse(data, datatype);

Parsing is executed in sync way, so new items are ready for operations after the command execution.

Parsing can be used with all the above mentioned data types.

XML string

view.parse(
"<data>
    <item id="1">
        <Package><![CDATA[acx100-source]]></Package>
        <Version><![CDATA[20080210-1.1]]></Version>
        <Maintainer><![CDATA[Stefano Canepa]]></Maintainer>
    </item>
</data>"
);

Related sample: Parse data from xml string

JSON object

view.parse([{
  "id":"1",
  "Package":"acx100-source",
  "Version":"20080210-1.1",
  "Maintainer":"Stefano Canepa"
},{
  "id":"2",
  "Package":"alien-arena-browser",
  "Version":"7.0-1",
  "Maintainer":"Debian Games Team"
},{
  "id":"3",
  "Package":"alien-arena-server",
  "Version":"7.0-1",
  "Maintainer":"Debian Games Team"
}],"json");

Related sample: Parse data from JSON object

HTML string

view.parse("id_of_html_element","html");

Related sample: Parse HTML list

CSV string

view.parse('"1", "acx100-source", "20080210-1.1", "Stefano Canepa"
  \n"2", "alien-arena-browser", "7.0-1", "Debian Games Team"
  \n"3", "alien-arena-server", "7.0-1", "Debian Games Team"',"csv");

Related sample: Parse from CSV string

JavaScript array

view.parse([["1", "acx100-source", "20080210-1.1", "Stefano Canepa"],
["2", "alien-arena-browser", "7.0-1", "Debian Games Team"],
["3", "alien-arena-server", "7.0-1", "Debian Games Team"]],"jsarray");

Related sample: Parse JS array

Custom Data Types

If the above loading types are not enough, you can create a custom one.

dhtmlx.dataDriver.mytype=dhtmlx.extend({},dhtmlx.dataDriver.jsarray,{
    getDetails:function(data){
        var result = {};
        result.id = data[0];
        result.Package       = data[1];
        result.Version       = data[2];
        result.Maintainer    = data[3];
        return result;
    }
})
view.load(url, "mytype");

Related sample: Custom data type

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Dynamic Loading DHTMLX Docs

Documentation
  • dhtmlXDataView API
  • Object Constructor
  • Initializing DataView
  • Specifying Templates
  • Paging
  • Loading Data
  • Dynamic Loading
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
  • Migration from dhtmlxFolders
Start DataView

Dynamic Loading

A component loads all data at once by default, but it's possible to configure the component so that data will be loaded on demand (this mode can be used with paging to organize dynamic paging, or without it )

Dynamic loading can be organized with XML and JSON data sources only.

The initial response from server must contain the total_count parameter at the top level. It will contain the info about the expected count of items in the dataview.

Each next request must contain the pos value with the info about index of the first record in the set.

For XML:

<data total_count="5000" pos="0">
   <item id="1">
        <Package><![CDATA[acx100-source]]></Package>
        <Version><![CDATA[20080210-1.1]]></Version>
    </item>
    <item id="2">
        <Package><![CDATA[alien-arena-browser]]></Package>
        <Version><![CDATA[7.0-1]]></Version>
    </item>
    ...
</data>

For JSON:

{
   {"total_count":"5000","pos":"0", data:[
        {
            "id":"1",
            "Package":"acx100-source",
            "Version":"20080210-1.1",
        },{
            "id":"2",
            "Package":"alien-arena-browser",
            "Version":"7.0-1"
        }
        ...
    ]}
}

There is no need for extra commands on the client side, as the presence of the "total_count" parameter will be enough for triggering dynamic loading.

You can define a separate template which will be used for the items which are not loaded yet.

view = new dhtmlXDataView({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        template_loading:"Loading..."
    }
});

Related sample: Dynamic loading

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Connecting to Database DHTMLX Docs

Documentation
  • dhtmlXDataView API
  • Object Constructor
  • Initializing DataView
  • Specifying Templates
  • Paging
  • Loading Data
  • Dynamic Loading
  • Connecting to Database
    • Client-side Initialization
    • Server-side Initialization
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
  • Migration from dhtmlxFolders
Start DataView

Connecting to Database

The same as any other data-driven component dataview can load and save data by means of connectors.

Client-side Initialization

//index.html
var myDataView = new dhtmlXDataView("someContainer"); // initializes DataView
...
myDataView.load("php/data.php");
var myDP = new dataProcessor("php/data.php"); // initializes dhtmlxDataProcessor
myDP.init(myDataView);

Server-side Initialization

<?php
    require_once("../../../connector/dataview_connector.php");

    $conn = new PDO("mysql:dbname=dataview;host=localhost","root","");

    $data = new DataViewConnector($conn);
//table name, ID, list of properties
    $data->render_table("packages_small","Id","Package,Version,Maintainer");
?>

Related sample: Connecting to database

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Operating Items DHTMLX Docs

Documentation
  • dhtmlXDataView API
  • Object Constructor
  • Initializing DataView
  • Specifying Templates
  • Paging
  • Loading Data
  • Dynamic Loading
  • Connecting to Database
  • Operating Items
    • Adding Items
    • Deleting Items
    • Editing Items
    • Selection
    • Sorting
    • Filtering
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
  • Migration from dhtmlxFolders
Start DataView

Operating Items

Adding Items

To add data items into dataview use the method add:

view.add({
    id:"some id",
    property:"some value"
});

If "id" isn't defined, it will be autogenerated.

Deleting Items

The method remove will help you to delete a data item from dataview:

view.remove("some id");
//or
view.remove(["idA","idB","idC","idD"]);

Related sample: Add/delete data on runtime

Editing Items

To enable the item's editing ability the following steps need to be completed:

  1. the edit mode enabled
  2. the edit template defined
view = new dhtmlXDataView({
    container:"data_container",
    edit:true,
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        template_edit:"<input class='dhx_item_editor' bind='obj.Package'>"
    }
});

The edit template works the same as the normal one plus the tags inside of it can have the bind attribute.

It means that during the switching to the edit state, a component will put the related properties into the inputs and on the edit-end command the properties will be filled from the inputs, respectively.

The editing process is triggered by dbl-click by default.

You can switch a cell to manual editing using the code below:

view.edit(id);
view.stopEdit();

Related sample: Edit item

Selection

A component is initialized in the multiselect mode by default. It can be controlled either by using the parameter of constructor or by JS API.

In the first case, use the code below:

var view = new dhtmlXDataView({
    container:"some_html",
    select:"multiselect"
});
...
view.define("select",true);

Possible values of the "select" parameter:

  • false - disable selection;
  • true - enable selection ( single selection );
  • "multiselect" - enable multi-selection.

Single item can be selected by clicking on it.

Multiple items can be selected by using Ctrl and Shift keys while clicking on items.

To select an item by API the following commands can be used:

view.select(id);
view.unselect(id);
view.selectAll();
view.unselectAll();
var boolean= view.isSelected(id);
var id = view.getSelected();

Calling the select() or unselect() methods without parameter is equal to calling selectAll() or unselectAll(), respectively.

The getSelected() method returns the ID of the selected item in single selection mode. In multiselection mode if more than one element selected the method will return an array of IDs.

During the selection of items (by user or by API) the following events are generated:

  • onBeforeSelect
  • onAfterSelect
  • onSelectChange

In case of single selection all 3 events are generated. If multiselection is enabled and Ctrl-click or Shift-click occurs, only the onSelectChange event will be generated.

In multiselect mode the select command can use additional parameters:

// select in addition to existing ones
view.select(id,true); // the same as Ctrl-click
// select all the items from the previously selected till the current one
view.select(id,false,true); // same as Shift-click

Beware that the select method changes the selection only and doesn't affect the items' visibility. So you will need to use the show() method to ensure that an item is visible (scrolled into the visible part of dataview)

view.show(id);

Related sample: Select items

Sorting

Items can be sorted by any properties. The values in DataView are sorted as case-insensitive strings by default.

//sort all data by the Maintainer property in the ascending order
view.sort("#Maintainer#","asc");
//the same but in the desceding order
view.sort("#Maintainer#","desc");

If you need a custom sorting rule, you can define your own sorter function:

view.sort(function(objA, objB){
    //objA and objB - are the objects which need to be compared
    return objA.some_value > objB.some_value?1:-1;
},"asc");

A custom sorting method accepts two objects and must return 1 if the first object is greater than second one, or -1 otherwise.

The values of the direction parameter:

  • "asc" - ascendant order, case-insensitive;
  • any other value - descendant order.

Filtering

A dataset can be filtered by one of the multiple parameters. To apply a simple one-parameter filtering, you can use the code similar to the following one:

//will show the object where the string "Alex" exists in Maintainer's name
//filtering is case-insensitive by default
view.filter("#Maintainer#","Alex");

If you need to apply a more complex filtering, it can be implemented by means of providing the filtering method (filter()) as the first parameter:

view.filter(function(obj){
    if (obj.valueA > 10 && obj.valueB < 100) return true;
    return false;
});

The filtering method receives the object and the filtering value (if it was provided as a part of the filter() command). The result of the method must be true if the object needs to be shown and false otherwise.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Drag-n-Drop DHTMLX Docs

Documentation
  • dhtmlXDataView API
  • Object Constructor
  • Initializing DataView
  • Specifying Templates
  • Paging
  • Loading Data
  • Dynamic Loading
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
    • Drag Context
    • Drag from Custom HTML
    • Drag to Custom HTML
    • D-n-D with Tree and Grid
    • Dragging Dataview items that contain images
  • Moving Items by API
  • Handling Events
  • Migration from dhtmlxFolders
Start DataView

Drag-n-Drop

To enable drag-n-drop you need to set the drag property.

view = new dhtmlXDataView({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#"
    },
    drag:true
});
view.load("../common/data.xml");

Related sample: Drag-and-drop between DataViews

There are 5 events which can be used to customize d-n-d behavior:

  • onBeforeDrag - fires before the mouse button is pressed and moved over the target
  • onBeforeDragIn - fires before a dragged element is moved over the target
  • onDragOut - fires when a dragged element is moved outside the dataview container
  • onBeforeDrop - fires before a dragged element is released over the target(the mouse button released)
  • onAfterDrop - fires after drag-n-drop is finished (the item is rendered at the new position)

onBeforeDrag - can contain the rules specifying which elements can be dragged and which cannot. Allows redefining the representation of the item during the dragging.

view.attachEvent("onBeforeDrag",function(context,ev){
    if (this.get(id).some_property) return false; //deny dnd
    return true; //allow dnd
});
view.attachEvent("onBeforeDrag",function(context,ev){
    //set custom content for the dragged element
    context.md = "Custom <b>text</b>";
});

onBeforeDragIn - allows defining if d-n-d between the source and the target elements is allowed.

view.attachEvent("onBeforeDrag",function(context,ev){
    if (this.get(id).some_property) return false; //deny dnd
    return true; //allow dnd
});

onDragOut - just informs that the item is moved out, can be used for custom styling.

onBeforeDrop - can be used to implement a custom d-n-d reaction.

view.attachEvent("onBeforeDrop",function(context,ev){
    //custom data moving
    this.move(context.source, this.indexById(context.target));
    return false; //block default processing
});

onAfterDrop - informs that d-n-d operation is finished.

Drag Context

The object which is available in all drag events, it contains:

context = {
    source:[1,2,3], //array of IDs for the dragged elements
    target:id, //ID of the currently active target item
    from:some_obj, // reference to the source object
    to:some_obj, // reference to the target object
    html:text //optional, custom text which is rendered as drag-item
};

Related sample: Drag-and-drop text

Drag from Custom HTML

<div package="DragPackage" version="1.0" maintainer="dhtmlx Team"
    id="drag_1"
    style='width:150px; height:50px; color:white; background-color:navy;'>
    Drag me into the dataview
</div>
dhtmlx.DragControl.addDrag("drag_1");

data1.attachEvent("onBeforeDrop",function(context){
    if (context.from == dhtmlx.DragControl){
        this.add({
            Package:context.source.getAttribute("package"),
            Version:context.source.getAttribute("version"),
            Maintainer:context.source.getAttribute("maintainer")
        },this.indexById(context.target||this.first()));
        return false;
    }
    return true;
})

Related sample: Drag HTML element in DataView

Drag to Custom HTML

<div id="data_container2" style="width:400px;height:396px;border:1px solid red;">
    Drop some item here
</div>
dhtmlx.DragControl.addDrop("data_container2",{
    onDrop:function(source, target, d, e){
        var context = dhtmlx.DragControl.getContext();
        var item = context.from.get(context.source[0]);

        var d = document.createElement("DIV");
        d.innerHTML = item.Package+" - "+item.Version;
        target.appendChild(d);
    }
});

Related sample: Drag data from DataView to HTML container

D-n-D with Tree and Grid

Firstly, you need to enable the compatibility mode

dhtmlx.compat("dnd");

After that you will be able to drag items between dataview, grid and tree.

The component isn't able to convert different item types automatically, but it will produce correct d-n-d events which can be used to define a custom reaction on d-n-d.

Dragging Dataview items that contain images

If a dataview item contains images in it, you need to block image dragging via the ondragstart handler.

An example is given below:

data = new dhtmlXDataView({
   container:"data_container",
   drag:true,
   type:{
       template:"<img src='#Image#' ondragstart='return false'/> #Text#",          height:100
   }
});
data.parse([
  {"id":"1", "Text":"Item 1", "Image":"image1.png"},
  {"id":"2", "Text":"Item 2", "Image":"image2.png"},
  ...
],"json");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Moving Items by API DHTMLX Docs

Documentation
  • dhtmlXDataView API
  • Object Constructor
  • Initializing DataView
  • Specifying Templates
  • Paging
  • Loading Data
  • Dynamic Loading
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
    • Moving
    • Copying
  • Handling Events
  • Migration from dhtmlxFolders
Start DataView

Moving Items by API

Moving

There's a possibility to move items with the help of special methods. You may move the items to the very top/bottom of the dataview or move them up/down by the specified number of steps:

view.moveUp(id)
view.moveUp(id,step);

view.moveDown(id)
view.moveDown(id,step)

view.moveTop(id)

view.moveBottom(id)

Items can also be moved to the specified position or to a different view by using the method move():

//move to the position
view.move(id, index);
//move to a different view
view.move(id, index, some_other_view);
//or
view.move(id, null, some_other_view);

//move to different view and change the ID
//scenario may be needed to prevent the ID collision
view.move(id, index, some_other_view, target_id);

ID of the item is preserved while moving.

Copying

It's also possible to copy an item to the defined position. For this purpose the method copy() is used:

//make a copy of element
var new_id = view.copy(source_id);
//make a copy at the specific position
var new_id = view.copy(source_id, index);
//make a copy in a different view
var new_id = view.copy(source_id, index, some_other_view);
//or
var new_id = view.copy(source_id, null , some_other_view);

//make a copy with the defined ID
view.copy(source_id, null, null, target_id);
//or
view.copy(source_id, index, null, target_id);
//or
view.copy(source_id, index, some_other_view, target_id);

The method returns the ID of the copied item which is autogenerated or can be specified as the last parameter.

Related sample: Moving items within DataView Related sample: Moving items between DataViews

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXDataView API
  • Object Constructor
  • Initializing DataView
  • Specifying Templates
  • Paging
  • Loading Data
  • Dynamic Loading
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
    • Attaching events
    • Detaching events
    • Naming tips
    • The list of events
  • Migration from dhtmlxFolders
Start DataView

Handling Events

Attaching events

The attachEvent() method can be used to add an event handler to any of the available events. The method needs to be called with the following parameters:

function my_handler(){ do_something(); };
view.attachEvent("onSomeEvent",my_handler);

Several handlers can be attached to one and the same event and all of them will be executed.

The names of the events are case-insensitive.

Detaching events

There is a simple way of removing an event handler:

var id = view.attachEvent("onSomeEvent",my_handler);
...
view.detachEvent(id); // unique id of the event handler

Naming tips
  • events which start with "before" - can be blocked, returning true from such an event handler will confirm the operation, returning false or not returning anything will block the default event processing;
  • events which start with "after" - can't be blocked, but have a sibling event the name of which starts with "before".

The list of events

You can find the full list of events in the DataView API.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration from dhtmlxFolders DHTMLX Docs

Documentation
  • dhtmlXDataView API
  • Object Constructor
  • Initializing DataView
  • Specifying Templates
  • Paging
  • Loading Data
  • Dynamic Loading
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
  • Migration from dhtmlxFolders
    • Why to migrate
    • When migration is not necessary
Start DataView

Migration from dhtmlxFolders

dhtmlXDataView is the successor of dhtmlxFolders. The main difference between them is the way of applying templates. While folders were linked to XSLT, dataview uses plain templates which are much more simple to write and maintain.

Why to migrate
  • better templating
  • performance improvement
  • true dynamic loading
  • ready server-side solution ( connectors )
  • ability to edit items
  • simple API

When migration is not necessary
  • you have stable working solution - there are no serious bugs in dhtmlxFolders, they are pretty stable and their support is not stopped.
  • you already have your server-side code and custom xslt

The two components use different APIs. If you compare the samples of dhtmlxFolders and dhtmlxDataView, you'll see that both components have a set of samples with exactly the same final result.

4 XSLT files which were provided with dhtmlxFolders can be replaced with types/ftypes.js. Those are named templates for dataview, which provide the same look and feel.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Visual Designer DHTMLX Docs

Documentation
  • Visual Designer
    • User Interface
    • Workspace: Design and Source Views
    • Components Tree
    • Properties/Events Pane
    • Toolbar
    • Context Menu
    • General Principles
    • Adding/Deleting Elements
    • Component Configuration
    • Form Designer
    • Handling Events
    • Auxiliary Actions
    • From Design to Real App
Start

Visual Designer

Visual Designer is an online tool that allows building user interfaces for web applications using DHTMLX components. You can specify the interface layout, place desired components into it and set their configuration. What is more, it is possible to add corresponding event handlers that will process various actions which happen during interaction with the user interface.

Visual Designer includes an embedded Form Designer that makes it easy to build a form and customize its appearance to achieve the best result.

You can download the source code of the ready application prototype to make some improvements when needed.

The current manual refers to the version 1.0.

Guides

Designer Structure

  • User Interface
  • Workspace: Design and Source Views
  • Components Tree
  • Properties/Events Pane
  • Toolbar
  • Context Menu
 Discusses the main elements of Visual Designer.

Designing Basics

  • General Principles
  • Adding/Deleting Elements
  • Component Configuration
  • Form Designer
 Covers the principles of design building, tips on configuring elements and the usage of Form Designer.

Auxiliary Resources

  • Handling Events
  • Auxiliary Actions
  • From Design to Real App
 Includes common info you may need while working with Visual Designer and gives an example of using a newly created design.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


User Interface DHTMLX Docs

Documentation
  • User Interface
  • Workspace: Design and Source Views
  • Components Tree
  • Properties/Events Pane
  • Toolbar
  • Context Menu
  • General Principles
  • Adding/Deleting Elements
  • Component Configuration
  • Form Designer
  • Handling Events
  • Auxiliary Actions
  • From Design to Real App
Start Visual Designer

User Interface

The designer looks like this:

It consists of the following parts:

  • Workspace - the working space of the designer.
    • Design view - the visual design area.
    • Source view - the automatically generated code.
  • Components tree - presents the hierarchical relationship between the components.
  • Properties/events pane - presents properties or events of the selected element.
  • Toolbar - provides access to auxiliary commands.
  • Context menu - the pop-up menu providing access to a list of acceptable elements.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Workspace: Design and Source Views DHTMLX Docs

Documentation
  • User Interface
  • Workspace: Design and Source Views
    • Design View
    • Source View
  • Components Tree
  • Properties/Events Pane
  • Toolbar
  • Context Menu
  • General Principles
  • Adding/Deleting Elements
  • Component Configuration
  • Form Designer
  • Handling Events
  • Auxiliary Actions
  • From Design to Real App
Start Visual Designer

Workspace: Design and Source Views

Design View

The Design view is your virtual sketchpad. While you are adding or deleting elements, altering their properties, all the changes are being presented there.

Design view presents 3U layout by default. Then it presents what you will define in Components tree and Properties/events pane.

Source View

The Source view presents the automatically generated JavaScript code. The code refers to the structure presented in Design view.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Components Tree DHTMLX Docs

Documentation
  • User Interface
  • Workspace: Design and Source Views
  • Components Tree
    • Top bar
  • Properties/Events Pane
  • Toolbar
  • Context Menu
  • General Principles
  • Adding/Deleting Elements
  • Component Configuration
  • Form Designer
  • Handling Events
  • Auxiliary Actions
  • From Design to Real App
Start Visual Designer

Components Tree

The Components tree presents the hierarchical relationship between all the elements in the Design view.

Each element in the tree is presented by the name of the related variable. The currently selected element is highlighted. The related properties and events of the currently selected entry are presented in the Properties/events pane.

3 root nodes of the tree:

  • Main UI - contains main components of the design (visible in Design view).
  • Popups - contains pop-up elements, such as window or context menu that are not visible in Design view.
  • Snippets - the “archive” of previous designs. It allows saving the current design to local storage and load it in the designer later.

Right-click on an entry in the tree lets access the acceptable context menu. Elements can be rearranged in the tree via drag/drop and deleted using the appropriate key.

To expand nested elements in the tree - use [image].

To collapse nested elements in the tree - use [image].

Top bar

Tob bar allows creating new elements and deleting the existing ones.

- creates a new element of the same nesting level.

- creates a new element of the lower nesting level (nested element).

- deletes the currently selected element (highlighted) in the Components tree.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Properties/Events Pane DHTMLX Docs

Documentation
  • User Interface
  • Workspace: Design and Source Views
  • Components Tree
  • Properties/Events Pane
    • Top bar
  • Toolbar
  • Context Menu
  • General Principles
  • Adding/Deleting Elements
  • Component Configuration
  • Form Designer
  • Handling Events
  • Auxiliary Actions
  • From Design to Real App
Start Visual Designer

Properties/Events Pane

The Properties/events pane displays properties and events of the selected element and provides editable text fields, lists and other controls allowing you to edit the properties and events.

Select an element in the Components tree to display its properties/events in the Properties/events pane. Once visible in the Properties/events pane these values can be edited.

The Properties/events pane displays properties by default (to see events click the Events tab in the top bar of the pane).

Use tooltips to see what one or another property means

Top bar

Allows switching between properties and events of the element. The currently selected variant is highlighted.

- switches to element's properties

- switches to element's events (currently selected)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Toolbar DHTMLX Docs

Documentation
  • User Interface
  • Workspace: Design and Source Views
  • Components Tree
  • Properties/Events Pane
  • Toolbar
  • Context Menu
  • General Principles
  • Adding/Deleting Elements
  • Component Configuration
  • Form Designer
  • Handling Events
  • Auxiliary Actions
  • From Design to Real App
Start Visual Designer

Toolbar

Toolbar provides access to auxiliary commands of the designer.

The auxiliary commands are:

- allows switching between views (design and source);

-sets automatic refreshing after each change;

- undoing the last action;

- allows refreshing the current view singly.

  • New - allows resetting the current design and loading the default.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Context Menu DHTMLX Docs

Documentation
  • User Interface
  • Workspace: Design and Source Views
  • Components Tree
  • Properties/Events Pane
  • Toolbar
  • Context Menu
  • General Principles
  • Adding/Deleting Elements
  • Component Configuration
  • Form Designer
  • Handling Events
  • Auxiliary Actions
  • From Design to Real App
Start Visual Designer

Context Menu

Context Menu is a pop-up menu providing access to the list of acceptable elements you can nest to a rollover element.

To get available Context menu, right click the element you want to nest a new element into. The available context menu will appear.

The main purpose of Context menu consists in adding new elements to the design.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


General Principles DHTMLX Docs

Documentation
  • User Interface
  • Workspace: Design and Source Views
  • Components Tree
  • Properties/Events Pane
  • Toolbar
  • Context Menu
  • General Principles
    • Step 1. Scheme of 'Main layout'
    • Step 2. Adding elements
    • Step 3. Configuring elements
    • Step 4. Saving design
  • Adding/Deleting Elements
  • Component Configuration
  • Form Designer
  • Handling Events
  • Auxiliary Actions
  • From Design to Real App
Start Visual Designer

General Principles

In this chapter you'll find out general principles of building design (inheritance and disposal of components).

The main building ground of your design is Components tree. Right there you add and delete elements of the design.

Please note, to see the changes you need to refresh a view. We recommend to use auto-refresh so that a view is refreshed automatically after each change.

Shortly, designing consists of four stages:

  1. Setting the scheme of 'Main layout'.
  2. Adding the needed elements.
  3. Configuring the elements.
  4. Saving the design.

Step 1. Scheme of 'Main layout'

It's a mandatory component and can't be deleted. But you can set any scheme you wish for it (3U scheme is used by default).

Step 2. Adding elements

From all the DHTMLX components we should single out a little group of items that differ from all the others. These are container components which are intended for disposing other components inside of them. They are:

  • layout
  • accordion
  • tabbar
  • windows (available from Popups root)

The inheritance chain of the tree has four basic nesting levels:

  • container components can be nested one into another. So there can be several container components with the appropriate constituent parts in the inheritance chain.
  • constituent parts of common components can have their own constituent parts. So these blocks can also be repeated in the inheritance chain.

There are 2 ways to add component of the same or the lower nesting level: through pop-up context menu and through controls of the 'Components tree'.

If you need to add pop-up elements such as window or context menu, right click the root element 'Popups' and select the desired item.

Step 3. Configuring elements

By that we mean to set their properties to the desired values and add the appropriate event handlers from the Properties/events pane.

Step 4. Saving design

At this point you can save your design to local storage for using it in Designer later.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Adding/Deleting Elements DHTMLX Docs

Documentation
  • User Interface
  • Workspace: Design and Source Views
  • Components Tree
  • Properties/Events Pane
  • Toolbar
  • Context Menu
  • General Principles
  • Adding/Deleting Elements
    • Adding elements
    • Deleting Elements
  • Component Configuration
  • Form Designer
  • Handling Events
  • Auxiliary Actions
  • From Design to Real App
Start Visual Designer

Adding/Deleting Elements

Adding elements

There are two variants of adding a new element to your design:

  • through Context menu.
  • through the controls of Components tree.

Adding a new element through Context menu

To add a new element:

  • Right click an element which you want to nest other elements into. The available context menu will appear.
  • In the opened context menu select an element to nest.

Adding a new element through the buttons of Components tree

This way allows adding a new element by using the navigation buttons of Components tree.

To add a new element of the same nesting level as the currently selected one - click the button [image].

To add a new element of the lower nesting level to the currently selected one (to nest an element) - click [image].

Deleting Elements

There is the only way to delete an existing element. It consists in the following:

  • Select an element you wish to delete in the Components tree;

  • From the top bar of the Components tree click the [image] button;

  • After clicking the button a confirm window will appear;

  • In the confirm window click OK to confirm the operation or Cancel to cancel it.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Component Configuration DHTMLX Docs

Documentation
  • User Interface
  • Workspace: Design and Source Views
  • Components Tree
  • Properties/Events Pane
  • Toolbar
  • Context Menu
  • General Principles
  • Adding/Deleting Elements
  • Component Configuration
  • Form Designer
  • Handling Events
  • Auxiliary Actions
  • From Design to Real App
Start Visual Designer

Component Configuration

To configure a new-added or existed element you should use Properties/events pane.

Select an element in the Components tree and its available properties/events will be presented in the Properties/events pane. Once visible in the Properties/events pane these values can be edited.

You can select a property by clicking on the property title or value. When a property is selected, an editor is displayed instead of the value and the value can be changed. In most property editors Enter should be used to apply the value and Esc to return to the previous value.

Form configuration is given individual consideration to. The reason for it - form's own inner designer for adding and configuring form controls (the common technique of configuring can be applied as well. The inner designer is just an alternative way). For more details see the chapter 'Form designer'.

For information of accessible properties/events please refer to the related component documentation.

Use tooltips to see what one or another property means.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Form Designer DHTMLX Docs

Documentation
  • User Interface
  • Workspace: Design and Source Views
  • Components Tree
  • Properties/Events Pane
  • Toolbar
  • Context Menu
  • General Principles
  • Adding/Deleting Elements
  • Component Configuration
  • Form Designer
    • How to Open
    • User Interface
    • General Design Principles
  • Handling Events
  • Auxiliary Actions
  • From Design to Real App
Start Visual Designer

Form Designer

  • How to Open
  • User Interface
  • General Design Principles
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


How to Open DHTMLX Docs

Documentation
  • How to Open
  • User Interface
  • General Design Principles
Start Visual Designer Form Designer

How to Open

To open form designer:

  • add Form component to your design through Components tree pane and select it (the default form will be loaded to the cell).
  • in the Properties/events pane click on the item 'Design'. A new window containing form designer will be opened.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


User Interface DHTMLX Docs

Documentation
  • How to Open
  • User Interface
  • General Design Principles
Start Visual Designer Form Designer

User Interface

Form designer by default looks like this:

The same as the parent designer, it contains 4 parts:

1) Workspace - the working space. While you're adding or deleting elements, altering their properties, all the changes are being presented there.

2) Controls pane - a list of available controls. Right from here you can add controls to form.

3) Properties pane - displays properties of the selected control and provides editable text fields for editing the properties.

Top bar contains 2 tabs:

  • Properties - allows changing common properties of the currently selected control.
  • Globals - allows affecting all the controls placed on the workspace.

4) Toolbar - provides functionality for locating controls and saving/cancelling the created configuration.

Contains 4 buttons:

  • - allows aligning selected control(s);
  • - allows setting the same distance between several selected controls;
  • - enables deleting a control;
  • - closes the window. Doesn't save the made changes;
  • - enables saving the current configuration and moving it to the workspace of the main (parent) designer.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


General Design Principles DHTMLX Docs

Documentation
  • How to Open
  • User Interface
  • General Design Principles
    • Adding the needed controls
    • Setting properties
    • Saving the configuration
Start Visual Designer Form Designer

General Design Principles

Form designing can be divided into 3 stages:

  1. Adding the needed controls.
  2. Setting their properties.
  3. Saving the configuration.

Adding the needed controls

To add controls to form you should simply drag and drop them from the Controls pane onto your workspace.

Setting properties

The form can be configured in 2 ways:

  • through Properties pane.
  • through Toolbar's items.

Configuring form through Properties pane

To start configuring a control select it in the Workspace and its properties will be displayed in the Properties pane. Once visible in the Properties pane these values can be edited.

Click a control to select it. The selected item is highlighted.

To set the same property for all the controls placed onto the workspace you should open the Globals tab.

The value specified in the Globals tab can be changed for a single control, i.e. when you define a property in the Properties tab, the value defined for the same property of the control in the Globals pane will be ignored. But just for this control. It continues to work for other controls placed onto the workspace.

Configuring form through toolbar's items

In addition to Property pane you can use the Toolbar's buttons Alignment, Distance to configure controls. Alignment and distance settings can be applied to several controls at a time.

To select several controls drag the mouse cursor over the elements with the left button held down until the area you want to be defined is selected. Let up on the button and the controls placed in this area will be selected.

Setting alignment

To set alignment for the control(s):

  • Select elements you want to align.
  • Click the button [image].
  • In the opened dropdown menu select the desired item.

Setting the same distance between controls

To set the same distance between controls:

  • Select the needed elements.
  • Click the button [image].
  • In the opened dropdown menu select the desired item.

Deleting added elements

To delete an element which is added on form:

  • Select an element you want to delete.
  • Click the button [image].
  • After you've clicked the button a confirm window appears.

  • In the confirm window click OK to confirm the operation or Cancel to cancel it.

Saving the configuration

To save the configuration click the button [image] on the Toolbar.

If you want to cancel all made actions, just close the window by clicking the button [image].

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • User Interface
  • Workspace: Design and Source Views
  • Components Tree
  • Properties/Events Pane
  • Toolbar
  • Context Menu
  • General Principles
  • Adding/Deleting Elements
  • Component Configuration
  • Form Designer
  • Handling Events
  • Auxiliary Actions
  • From Design to Real App
Start Visual Designer

Handling Events

All the time when you're interacting with User Interface different events occur. According to the occurred events the appropriate event-handling code is executed. To define what event occurs you need to add the related event handlers.

To get a list of available events you should make the following steps:

  • In the Components tree select a component the related events of which you wish to get.
  • In the top bar of the Properties/events pane click on the Events item.

To add an event handler:

  • Check an event you wish to handle.
  • After you've checked the event, a window with the initial event-handling code opens.
  • In the opened window write the desired event-handling code and click the button Save to save changes or Cancel to cancel them.

To edit an event handler:

  • In a row with the appropriate event click on the Edit item. A window with the event-handling code will be opened.
  • In the opened window write the desired code and click the button Save to save changes or Cancel to cancel them.

To delete an event handler:

  • Uncheck the event the handler of which you wish to delete.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Auxiliary Actions DHTMLX Docs

Documentation
  • User Interface
  • Workspace: Design and Source Views
  • Components Tree
  • Properties/Events Pane
  • Toolbar
  • Context Menu
  • General Principles
  • Adding/Deleting Elements
  • Component Configuration
  • Form Designer
  • Handling Events
  • Auxiliary Actions
    • Auto-refreshing
    • Switching between workspace views
    • Saving design to local storage
    • Single refreshing
    • Resetting to initial state
    • Undoing the last action
  • From Design to Real App
Start Visual Designer

Auxiliary Actions

The auxiliary actions of the designer are:

  • Auto-refreshing.
  • Switching between workspace views.
  • Saving a design to local storage.
  • Single refreshing.
  • Resetting to the initial state (new design).
  • Undoing the last action.

Auto-refreshing

To set auto-refresh:

  • In the toolbar press [image]. Forth, your design will be updated automatically after each change.

Switching between workspace views

To switch between the views:

  • In the toolbar select a tab with the desired view.

Saving design to local storage

To save the current design for further quick access to it from the designer, make the following:

  • Right click the element Snippets. A context menu will appear.
  • In the context menu select collection.

Single refreshing

To make a single design refreshed:

  • In the toolbar press [image]. The design will be updated once.

Resetting to initial state

To reset the designer, make the following steps:

  • In the toolbar press [image]. A drop-down menu will appear.
  • In the drop-down menu select New. The design will be resetted to the default view.

Undoing the last action

To undo the last action, just press the button [image] in the toolbar. The action will be undone.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


From Design to Real App DHTMLX Docs

Documentation
  • User Interface
  • Workspace: Design and Source Views
  • Components Tree
  • Properties/Events Pane
  • Toolbar
  • Context Menu
  • General Principles
  • Adding/Deleting Elements
  • Component Configuration
  • Form Designer
  • Handling Events
  • Auxiliary Actions
  • From Design to Real App
    • HTML Page Setup
    • Integrating Design into Page
Start Visual Designer

From Design to Real App

You have created the desired design. What should you do now? How can you use it in a real app?

Here is a small guide describing your further steps.

HTML Page Setup

1. Download DHTMLX code files

To use the created design in an app you should include code files of the related DHTMLX components on your HTML page. If you have dealed with many components it would be a long list. So we recommend you to use 'dhtmlxSuite' package (you can download it here) as an alternative to standalone components. In case of the 'suite' you need to include just 2 files - dhtmlx.js and dhtmlx.css.

After you have downloaded the package you should unzip its content to the [YOUR APPLICATION ROOT]/codebase folder.

If it's your first encounter with the library or you have any problem at this stage, please, refer to
the basic start tutorial Your First App.

2. Create an HTML file

In the root folder of your application create a file 'index.html' with the following initial code:

<!DOCTYPE html>
    <head>
        <script src="../codebase/dhtmlx.js" type="text/javascript"></script>
        <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
        <style>
    /*these styles allow Layout to work in Full Screen mode correctly in any browser*/
            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                overflow: hidden;
                background-color:white;
            }

        </style>

        <script type="text/javascript">
            window.onload = function(){
                //Here you'll put code of your application
            }
        </script>
    </head>
    <body>
    </body>
</html>

Integrating Design into Page

Here your actions will depend on the version of Visual Designer you are using: desktop or online.

Online version

To integrate the design:

  • In the toolbar select the tab 'Code'. In the workspace you'll see full code of the design.
  • If automatic refresh isn't set, refresh the design to ensure that the code includes all the latest updates (instructions).
  • Select all the code and press CTRL+C.
  • Activate a window with your HTML page, put the cursor in the place marked as 'Here you'll put code of your application' in the code snippet above, and press CTRL+V.

Desktop version

To integrate the design:

  • In the toolbar press [image]. A drop-down menu will appear.
  • In the drop-down menu select SaveAs.
  • After that the browser will ask you where to save the index.js file. Choose the location and click the Save button .
  • Open the saved index.js file in an editor.
  • In the index.js file select the code from the region #GENERATED_CODE# and press CTRL+C.
  • Activate a window with your HTML page, put the cursor in the place, marked as 'Here you'll put code of your application' in the code snippet above, and press CTRL+V.

Now, regardless of the version you are using the <head> block of your HTML file will look as follows:

<head>
    <script src="../codebase/dhtmlx.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
    <style>
   /*these styles allow Layout to work in Full Screen mode correctly in any browser*/
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            overflow: hidden;
            background-color:white;
        }

   </style>

    <script type="text/javascript">
        window.onload = function(){
            dhtmlx.image_path='./codebase/imgs/';

            var main_layout = new dhtmlXLayoutObject(document.body, '2U');

            var a = main_layout.cells('a');
            var tree_1 = a.attachTree();
            tree_1.setIconsPath('./codebase/imgs/');
            tree_1.load('./data/tree.xml');

            ...
        }
    </script>
</head>

That's all. Now you can run the HTML page and see the design inside of an app.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Editor DHTMLX Docs

Documentation
  • Editor
    • dhtmlXEditor API
    • How to Start with dhtmlxEditor
    • Object Constructor
    • Creating a Text Editor on the Page
    • Adding Editor to DHTMLX Components
    • Setting/Getting the Editor's Content
    • Skinning the Editor
    • Handling Events
Start

Editor

This component is a simple text editor that can be used in web pages. It contains functionality that is often used in desktop editors.

API reference
  • dhtmlXEditor API
Related resources
  • You may download dhtmlxEditor from dhtmlx.com
  • Check online samples for dhtmlxEditor
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Creating Text Editor on the Page

  • How to Start with dhtmlxEditor
  • Object Constructor
  • Creating a basic editor
  • Creating an editor with toolbar
 Discusses the ways of initializing Editor on a page.

Attaching Editor to DHTMLX Components

  • Adding an Editor to Accordion
  • Adding an Editor to Layout
  • Adding an Editor to Tabbar
  • Adding an Editor to Window
  • Adding an Editor to Form
  • Adding an Editor to Popup
 Covers how you can integrate Editor with third-party components.

Working with Editor

  • Setting/getting the content
  • Skinning the Editor
  • Handling Events
 Tells about configuring Editor and manipulating its content.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXEditor API DHTMLX Docs

Documentation
  • dhtmlXEditor API
    • Methods
    • Events
  • How to Start with dhtmlxEditor
  • Object Constructor
  • Creating a Text Editor on the Page
  • Adding Editor to DHTMLX Components
  • Setting/Getting the Editor's Content
  • Skinning the Editor
  • Handling Events
Start Editor

dhtmlXEditor API

Methods
alignCenter | centres the selected text
alignJustify | makes text to take the entire space available
alignLeft | aligns selected text along the left margin
alignRight | aligns selected text along the right margin
applyBold | makes the selected part of text bold
applyH1 | applies H1 to selected block of text
applyH2 | applies H2 to selected block of text
applyH3 | applies H3 to selected block of text
applyH4 | applies H4 to selected block of text
applyItalic | makes the selected text italic
applyStrikethrough | makes selection strikethrough
applySub | applies subscript
applySuper | applies superscript
applyUnderscore | makes the selected text underlined
attachEvent | adds any user-defined handler to available events
clearFormatting | clears the specified text formatting
createBulList | creates bullet list
createNumList | creates numbered list
decreaseIndent | decreases indent of text block
detachEvent | detaches a handler from an event
getContent | gets HTML content of the editor document
increaseIndent | increases indent of text block
setContent | sets content to editor document
setContentHTML | sets content from the html document to editor document
Events
onAccess | fires when the specified native event fires
onContentSet | fires when content has been loaded into Editor
onFocusChanged | fires on changing the focus location in the Editor
onToolbarClick | fires on clicking a toolbar item
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • alignCenter
    • alignJustify
    • alignLeft
    • alignRight
    • applyBold
    • applyH1
    • applyH2
    • applyH3
    • applyH4
    • applyItalic
    • applyStrikethrough
    • applySub
    • applySuper
    • applyUnderscore
    • attachEvent
    • clearFormatting
    • createBulList
    • createNumList
    • decreaseIndent
    • detachEvent
    • getContent
    • increaseIndent
    • setContent
    • setContentHTML
  • Events
Start Editor dhtmlXEditor API

Methods

alignCenter | centres the selected text
alignJustify | makes text to take the entire space available
alignLeft | aligns selected text along the left margin
alignRight | aligns selected text along the right margin
applyBold | makes the selected part of text bold
applyH1 | applies H1 to selected block of text
applyH2 | applies H2 to selected block of text
applyH3 | applies H3 to selected block of text
applyH4 | applies H4 to selected block of text
applyItalic | makes the selected text italic
applyStrikethrough | makes selection strikethrough
applySub | applies subscript
applySuper | applies superscript
applyUnderscore | makes the selected text underlined
attachEvent | adds any user-defined handler to available events
clearFormatting | clears the specified text formatting
createBulList | creates bullet list
createNumList | creates numbered list
decreaseIndent | decreases indent of text block
detachEvent | detaches a handler from an event
getContent | gets HTML content of the editor document
increaseIndent | increases indent of text block
setContent | sets content to editor document
setContentHTML | sets content from the html document to editor document
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


alignCenter DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

alignCenter

centres the selected text

void alignCenter();

Example

myCombo.alignCenter();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


alignJustify DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

alignJustify

makes text to take the entire space available

void alignJustify();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


alignLeft DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

alignLeft

aligns selected text along the left margin

void alignLeft();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


alignRight DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

alignRight

aligns selected text along the right margin

void alignRight();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


applyBold DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

applyBold

makes the selected part of text bold

void applyBold();

Example

myEditor.applyBold();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


applyH1 DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

applyH1

applies H1 to selected block of text

void applyH1();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


applyH2 DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

applyH2

applies H2 to selected block of text

void applyH2();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


applyH3 DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

applyH3

applies H3 to selected block of text

void applyH3();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


applyH4 DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

applyH4

applies H4 to selected block of text

void applyH4();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


applyItalic DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

applyItalic

makes the selected text italic

void applyItalic();

Example

myEditor.applyItalic();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


applyStrikethrough DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

applyStrikethrough

makes selection strikethrough

void applyStrikethrough();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


applySub DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

applySub

applies subscript

void applySub();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


applySuper DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

applySuper

applies superscript

void applySuper();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


applyUnderscore DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

applyUnderscore

makes the selected text underlined

void applyUnderscore();

Example

myEditor.applyUnderscore();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearFormatting DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

clearFormatting

clears the specified text formatting

void clearFormatting();

Example

myEditor.clearFormatting();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


createBulList DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

createBulList

creates bullet list

void createBulList();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


createNumList DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

createNumList

creates numbered list

void createNumList();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


decreaseIndent DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

decreaseIndent

decreases indent of text block

void decreaseIndent();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getContent DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

getContent

gets HTML content of the editor document

HTMLElement getContent();

Returns

HTMLElement HTML content of the editor document

Example

myEditor.getContent();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


increaseIndent DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

increaseIndent

increases indent of text block

void increaseIndent();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setContent DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

setContent

sets content to editor document

void setContent(string html);

Parameters

html string html string which should be set as the content of editor

Example

myEditor.setContent(html);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setContentHTML DHTMLX Docs

Documentation
  • alignCenter
  • alignJustify
  • alignLeft
  • alignRight
  • applyBold
  • applyH1
  • applyH2
  • applyH3
  • applyH4
  • applyItalic
  • applyStrikethrough
  • applySub
  • applySuper
  • applyUnderscore
  • attachEvent
  • clearFormatting
  • createBulList
  • createNumList
  • decreaseIndent
  • detachEvent
  • getContent
  • increaseIndent
  • setContent
  • setContentHTML
Start Editor dhtmlXEditor API Methods

setContentHTML

sets content from the html document to editor document

void setContentHTML(string url);

Parameters

url string path to the html page

Example

myEditor.setContentHTML(url);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onAccess
    • onContentSet
    • onFocusChanged
    • onToolbarClick
Start Editor dhtmlXEditor API

Events

onAccess | fires when the specified native event fires
onContentSet | fires when content has been loaded into Editor
onFocusChanged | fires on changing the focus location in the Editor
onToolbarClick | fires on clicking a toolbar item
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAccess DHTMLX Docs

Documentation
  • onAccess
  • onContentSet
  • onFocusChanged
  • onToolbarClick
Start Editor dhtmlXEditor API Events

onAccess

fires when the specified native event fires

void onAccess(string eventName,event evObj){ ... };

Parameters

eventName | string | event name, possible values: focus, blur, click, keydown, keypress, keyup, mouseup, mousedown
evObj | event | a native event object

Example

myEditor.attachEvent("onAccess", function(eventName, evObj){
    if (eventName == "blur") {
        console.log("the editor is left");
    }
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onContentSet DHTMLX Docs

Documentation
  • onAccess
  • onContentSet
  • onFocusChanged
  • onToolbarClick
Start Editor dhtmlXEditor API Events

onContentSet

fires when content has been loaded into Editor

void onContentSet(){ ... };

Example

myEditor.attachEvent("onContentSet", function(){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onFocusChanged DHTMLX Docs

Documentation
  • onAccess
  • onContentSet
  • onFocusChanged
  • onToolbarClick
Start Editor dhtmlXEditor API Events

onFocusChanged

fires on changing the focus location in the Editor

void onFocusChanged(object state){ ... };

Parameters

state object object with the parameters of the text under focus

Example

myEditor.attachEvent("onFocusChanged", function(state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onToolbarClick DHTMLX Docs

Documentation
  • onAccess
  • onContentSet
  • onFocusChanged
  • onToolbarClick
Start Editor dhtmlXEditor API Events

onToolbarClick

fires on clicking a toolbar item

void onToolbarClick(string name){ ... };

Parameters

name string the name of the clicked item

Example

myEditor.attachEvent("onToolbarClick", function(name){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


How to Start with dhtmlxEditor DHTMLX Docs

Documentation
  • dhtmlXEditor API
  • How to Start with dhtmlxEditor
    • Step 1. A new HTML file and related source files
    • Step 2. An HTML container
    • Step 3. Object constructor
    • Step 4. Set initial content
  • Object Constructor
  • Creating a Text Editor on the Page
  • Adding Editor to DHTMLX Components
  • Setting/Getting the Editor's Content
  • Skinning the Editor
  • Handling Events
Start Editor

How to Start with dhtmlxEditor

In this article you will know how to create a simple text editor on the page.

Step 1. A new HTML file and related source files

To start, create a new HTML file and include the required source files in it.

If you use dhtmlxEditor standalone you need to include 2 files:

  • dhtmlxeditor.css
  • dhtmlxeditor.js
<!DOCTYPE html>
<html>
<head>
    <title>Quick start with dhtmlxEditor</title>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxeditor.css">     <script src="codebase/dhtmlxeditor.js"></script></head>
<body>
    <script>
    //your code here
    </script>
</body>
</html>

If you use dhtmlxEditor as a part of "dhtmlxSuite" package you need to include 2 files:

  • dhtmlx.js
  • dhtmlx.css
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Step 2. An HTML container

Create a HTML container on the page (where later you will put in an editor):

<!DOCTYPE html>
<html>
<head>
    <title>Quick start with dhtmlxEditor</title>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxeditor.css">
    <script src="codebase/dhtmlxeditor.js"></script>
</head>
<body>
 <div id="editorObj" style="width:100%; height:300px; border:#909090 1px solid;"></div>  <script>
   //your code here
 </script>
</body>
</html>

Step 3. Object constructor

Create a new dhtmlXEditor's object in the HTML container:

<!DOCTYPE html>
<html>
<head>
    <title>Quick start with dhtmlxEditor</title>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxeditor.css">
    <script src="codebase/dhtmlxeditor.js"></script>
</head>
<body>
 <div id="editorObj" style="width:100%; height:300px; border:#909090 1px solid;"></div>
 <script>
   var myEditor = new dhtmlXEditor("editorObj");
 </script>
</body>
</html>

You can also initialize dhtmlxEditor using the object notation.

Step 4. Set initial content

Call the setContent method to set the initial text in the editor.

Note, you can use any HTML while setting the text.

var myEditor = new dhtmlXEditor("editorObj");
myEditor.setContent("Please, type your comments here");

Related sample: Simple init

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • dhtmlXEditor API
  • How to Start with dhtmlxEditor
  • Object Constructor
    • Basic constructor
    • Available parameters for object notation
    • Initialization with the toolbar
    • Destructor
  • Creating a Text Editor on the Page
  • Adding Editor to DHTMLX Components
  • Setting/Getting the Editor's Content
  • Skinning the Editor
  • Handling Events
Start Editor

Object Constructor

Basic constructor

<div id="editorObj" style="width:100%; height:300px; border:#909090 1px solid;"></div>
myEditor = new dhtmlXEditor("editorObj");
myEditor.setContent("Type some text here");

//or with object notation
myEditor = new dhtmlXEditor({
    parent: "editorObj",
    content: "Type some text here"
});

Related sample: Simple init

Related sample: Object API init

Available parameters for object notation

Just the 'parent' parameter is mandatory

Parameter | Type | Description
parent | string, object | The id or object of HTML element that the editor will be created in
content | string | The initial content of the editor (note, any HTML is allowed)
contentHTML | string | the URL to an external resource that will be initially presented in the editor. Loaded by Ajax. Ignored, if the 'content' parameter is specified
toolbar | boolean | adds a toolbar to the editor. By default, false. Note, to use the toolbar - the 'dhtmlxtoolbar.js' and 'dhtmlxeditor_ext.js' files must be included on the page
iconsPath | string | the path to toolbar's icons (default icons are located in 'editor/codebase/imgs/'; skin will be detected automatically)
skin | "dhx_skyblue", "dhx_web", "dhx_terrace" | skin to apply
onFocusChanged | function | sets a handler function for the onFocusChanged event
onAccess | function | sets a handler function for the onFocusChanged event

Related sample: Object API init

Initialization with the toolbar

<link rel="stylesheet" type="text/css" href="codebase/dhtmlxeditor.css">
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxtoolbar.css">
<script src="codebase/dhtmlxeditor.js"></script>
<script src="codebase/dhtmlxtoolbar.js"></script>

<div id="editorObj" style="width:100%; height:300px; border:#909090 1px solid;"></div>
myEditor = new dhtmlXEditor({
    parent: "editorObj",
    toolbar: true,                  //adds the toolbar
    iconsPath: "codebase/imgs/", //path to toolbar's icons
    content: "Type some text here"
});

Related sample: Init with toolbar

Destructor

To destruct a dhtmlxEditor's instance and clear the memory from it, use unload method:

if (myEditor != null) {
    myEditor.unload();
    myEditor = null;
}

Related sample: Unloading editor

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Creating a Text Editor on the Page DHTMLX Docs

Documentation
  • dhtmlXEditor API
  • How to Start with dhtmlxEditor
  • Object Constructor
  • Creating a Text Editor on the Page
    • A basic editor
    • An editor with toolbar
  • Adding Editor to DHTMLX Components
  • Setting/Getting the Editor's Content
  • Skinning the Editor
  • Handling Events
Start Editor

Creating a Text Editor on the Page

A basic editor

A basic editor contains just the editing area where the user can type a text.

Files to include

  • dhtmlxeditor.css
  • dhtmlxeditor.js

Initialization code

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxeditor.css">
    <script src="codebase/dhtmlxeditor.js"></script>
</head>
<body>
    <div id="editorObj" style="width:100%; height:300px; border:#909090 1px solid;"></div>
    <script>
        var myEditor = new dhtmlXEditor("editorObj");
        myEditor.setContent("Type some text here");

    //myEditor = new dhtmlXEditor({parent: "editorObj",content: "Type some text here"});
    </script>
</body>
</html>

Related sample: Simple init

Related sample: Object API init

An editor with toolbar

Such an editor consists of 2 parts:

  1. Toolbar - the top part of the editor that contains controls for text formatting.
  2. Editing area- the below area where the user types text in.

Files to include

To have a text editor with the toolbar, you need to include source files of both dhtmlxEditor and dhtmlxToolbar components at once.

dhtmlxEditor source files are:

  • dhtmlxeditor.css
  • dhtmlxeditor.js

dhtmlxToolbar source files are:

  • dhtmlxtoolbar.css
  • dhtmlxtoolbar.js

Initialization code

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxeditor.css">
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxtoolbar.css">
    <script src="codebase/dhtmlxeditor.js"></script>
    <script src="codebase/dhtmlxtoolbar.js"></script>
</head>
<body>
    <div id="editorObj" style="width:100%; height:300px; border:#909090 1px solid;"></div>
    <script>
        var myEditor = new dhtmlXEditor({
            parent: "editorObj",
            toolbar: true, //adds the toolbar
            iconsPath: "codebase/imgs/",   //path to toolbar's icons
            content: "Type some text here"
        });
    </script>
</body>
</html>

Related sample: Init with toolbar

The iconsPath parameter sets the path to the toolbar's icons.
By default, icons are stored in the imgs folder of the package and grouped by skins (you don't need to indicate the skin in the path, as the component automatically detects it).

To use custom icons, specify the path to the custom icons as the parameter.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Adding Editor to DHTMLX Components DHTMLX Docs

Documentation
  • dhtmlXEditor API
  • How to Start with dhtmlxEditor
  • Object Constructor
  • Creating a Text Editor on the Page
  • Adding Editor to DHTMLX Components
    • Attaching to an accordion's cell
    • Attaching to a layout's cell
    • Attaching to a tabbar's tab
    • Attaching to a window
    • Editor as a form's control
    • Attaching to a pop-up window
  • Setting/Getting the Editor's Content
  • Skinning the Editor
  • Handling Events
Start Editor

Adding Editor to DHTMLX Components

The table below presents DHTMLX components that you can attach a dhtmlxEditor object to and code samples of such attaching.

To attach an Editor to a DHTMLX component, use the attach[NameofComponent] method of the related component

Attaching to an accordion's cell

myAcc = new dhtmlXAccordion("accObj");
myEditor = myAcc.cells("a1").attachEditor({content:"Type some text"});

Related sample: Attach to accordion

Learn more about accordions here.

Attaching to a layout's cell

myLayout = new dhtmlXLayoutObject("layoutObj", "3L");
myEditor = myLayout.cells("a").attachEditor({content:"Type some text"});

Related sample: Attach to layout

Learn more about layouts here.

Attaching to a tabbar's tab

myTabbar = new dhtmlXTabBar("my_tabbar");
myEditor = myTabbar.tabs("a1").attachEditor({content:"Type some text"});

Related sample: Attach to tabbar

Learn more about tabbars here.

Attaching to a window

dhxWins = new dhtmlXWindows();
dhxWins.attachViewportTo("winVP");
w1 = dhxWins.createWindow("w1", 20, 30, 400, 280);
myEditor = w1.attachEditor({content:"Type some text"});

Related sample: Attach to window

Learn more about windows here.

Editor as a form's control

formData = [
    {type:"settings", labelWidth:90},
    {type:"editor", name:"band", label:"Band", value:"Motorhead"},
    {type:"editor", name:"title", label:"Title", value:"Smiling Like A Killer"}
];
myForm = new dhtmlXForm("myForm", formData);

Related sample: Attach to form

Learn more about forms here.

Attaching to a pop-up window

myPop = new dhtmlXPopup({ toolbar: myToolbar, id: "workbut" });
myPop.attachEvent("onShow", function(){
    if (!myEditor) {
        myEditor = myPop.attachEditor(400, 200, {content:"Type some text"});
    }
});

Related sample: Attach to popup

Learn more about pop-up windows here.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Setting/Getting the Editor's Content DHTMLX Docs

Documentation
  • dhtmlXEditor API
  • How to Start with dhtmlxEditor
  • Object Constructor
  • Creating a Text Editor on the Page
  • Adding Editor to DHTMLX Components
  • Setting/Getting the Editor's Content
    • Setting the content
    • Loading the content from external resource
    • Getting the content
  • Skinning the Editor
  • Handling Events
Start Editor

Setting/Getting the Editor's Content

Setting the content

To set the content of a dhtmlxEditor object, use the setContent method:

Setting the content for the editor

var myEditor = new dhtmlXEditor({
    parent: "editorObj"
});

myEditor.setContent("Type some text here");

Related sample: Set / get content

To set the initial content, you can also use the "content" parameter of the editor's constructor:

var myEditor = new dhtmlXEditor({
    parent: "editorObj",
    content:"Type some text here" });

Related sample: Object API init

Loading the content from external resource

To populate the editor with content from some external resource, use the setContentHTML method:

Setting the external content for the editor

var myEditor = new dhtmlXEditor({
    parent: "editorObj"
});

myEditor.setContentHTML("common/editor/content.html");

Related sample: Load content via ajax

To set the initial content, you can also use the "contentHTML" parameter of the editor's constructor:

var myEditor = new dhtmlXEditor({
    parent: "editorObj",
    contentHTML:"common/editor/content.html" });

Related sample: Object API init

Getting the content

To get the current content of the editor, use the getContent method:

var content = myEditor.getContent();
alert(content);

Related sample: Set / get content

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Skinning the Editor DHTMLX Docs

Documentation
  • dhtmlXEditor API
  • How to Start with dhtmlxEditor
  • Object Constructor
  • Creating a Text Editor on the Page
  • Adding Editor to DHTMLX Components
  • Setting/Getting the Editor's Content
  • Skinning the Editor
    • material
    • dhx_skyblue
    • dhx_web
    • dhx_terrace
    • Skin Detection
  • Handling Events
Start Editor

Skinning the Editor

The library provides 4 predefined skins:

  • "material"
  • "dhx_skyblue"
  • "dhx_web"
  • "dhx_terrace"

To set the skin for a dhtmlxEditor object, use the "skin" parameter of the editor's constructor (or the setSkin method):

Setting the skin for the editor

var myEditor = new dhtmlXEditor({
    parent: "editorObj",
    skin:"dhx_web"
});

//or
myEditor = new dhtmlXEditor("editorObj");
myEditor.setSkin("dhx_web");

Related sample: Skins

material

This is the default skin.

File to include: skins/dhtmlxeditor_material.css

<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxeditor_material.css"/>

dhx_skyblue

File to include: skins/dhtmlxeditor_dhx_skyblue.css

<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxeditor_dhx_skyblue.css"/>

dhx_web

File to include: skins/dhtmlxeditor_dhx_web.css

<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxeditor_dhx_web.css"/>

dhx_terrace

File to include: skins/dhtmlxeditor_dhx_terrace.css

<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxeditor_dhx_terrace.css"/>

Related sample: Skins

Skin Detection

The following priority (from higher to lower) is used to determine the skin to apply:

  1. The skin parameter of the dhtmxlEditor object constructor
  2. The dhtmlx.skin property
  3. The form's skin (if the editor is presented as a form's control)
  4. dhtmlxEditor tries to detect the skin automatically (each skin css file has a corresponding record to help to detect the skin)
  5. The default "material" skin is used

For example, if you include on the page the only css file "dhxeditor_dhx_terrace" and instantiate dhtmlxEditor without specifying the skin parameter, then the "dhx_terrace" skin will be detected automatically.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXEditor API
  • How to Start with dhtmlxEditor
  • Object Constructor
  • Creating a Text Editor on the Page
  • Adding Editor to DHTMLX Components
  • Setting/Getting the Editor's Content
  • Skinning the Editor
  • Handling Events
    • Attaching Event Handler
    • Detaching Event Handler
    • List of supported events
Start Editor

Handling Events

Attaching Event Handler

To attach a handler function to an event, use the attachEvent method:

var myEditor = new dhtmlXEditor(parent: "editorObj");

myEditor.attachEvent("onAccess", function(name, ev){
    alert("onAccess event fired, name: "+name);
});

Related sample: onAccess event

Several handlers can be attached to one and the same event, and all of them will be executed.

The names of the events are case-insensitive.

Detaching Event Handler

To detach a handler function from an event, use the detachEvent method:

var eventId = myEditor.attachEvent("onAccess", function(name, ev){
    alert("onAccess event fired, name: "+name);
});

myEditor.detachEvent(eventId); // the unique id of the event handler

List of supported events

You can find the full list of editor's events in the Editor API.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


FileSelector DHTMLX Docs

Documentation
  • FileSelector
    • Initialization
    • Integration with dhtmlxForm
    • Localization support
    • FileSelector Skins
    • dhtmlXFileSelector API
Start

FileSelector

dhtmlxFileSelector is a macro component that allows navigating a computer file system in a handy way. Due to rich select functionality, it provides the possibility to find and select the necessary file.

API reference
  • dhtmlXFileSelector API
Related resources
  • You may download dhtmlxFileSelector as a separate package if you are already using dhtmlxSuite
  • If you don't have dhtmlxSuite yet, you can download the package of dhtmlxSuite library with dhtmlxFileSelector.

Initialization

To create a FileSelector on a page, complete the following steps:

1) Include dhtmlx.js/css and dhtmlxfileselector.js/css on your page.

Note that dhtmlx.js and dhtmlx.css lines should go before dhtmlxfileselector js/css:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css"/>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxfileselector.css"/>
    <script src="codebase/dhtmlx.js"></script>
    <script src="codebase/dhtmlxfileselector.js"></script>
</head>

2) Create a FileSelector instance:

var myFileSelector = new dhtmlXFileSelector({
    url: "reader.php",             // url to get data
    image_path: "codebase/imgs/",  // path to grid images
    icons_path: "codebase/imgs/"   // path to toolbar icons
});

3) After FileSelector initialization attach the onSelect event to handle a selected file:

var myFileSelector.attachEvent("onSelect", function(id){
    // your code here
});

4) Show dialog window:

myFileSelector.show();

Integration with dhtmlxForm

It is possible to use FileSelector as a part of dhtmlxForm:

To integrate the two components, use the following configuration:

var formData = [
       {
        type: "fileselector",
        ...,
        url: "data_static.php",
        image_path: "codebase/imgs/",
        icons_path: "codebase/imgs/",
        full_path: true
       },
       ... other form items
];
var myForm = new dhtmlXForm("parentId", formData);

Localization support

FileSelector can be presented in different languages, which can be dynamically switched. FileSelector includes localization support for buttons, windows caption and grid columns.

Firstly, you should specify the settings of the necessary language as follows:

// specifying settings of some language, e.g. French
// make sure that dhtmlxfileselector.js is loaded
dhtmlXFileSelector.prototype.langData.fr = {
    ok: "Sélectionner",
    cancel: "Annuler",
    caption: "Sélectionnez le Fichier",
    col_name: "Nom",
    col_size: "Taille"
};

If you have settings of several languages defined, you can switch between them by means of the loadUserLanguage method which takes a two-letter string of language name as a parameter:

myFileSelector.loadUserLanguage("fr");

If you'd like to apply language settings once for all FileSelector instances, use the code as in:

// make sure dhtmlxfileselector.js is loaded
dhtmlXFileSelector.prototype.lang = "fr";

FileSelector Skins

There are three types of skins available for FileSelector:

  • dhx_web

  • dhx_skyblue

  • dhx_terrace

The skin "dhx_skyblue" is used by default. Depending on the attached CSS skin file, FileSelector will try to detect the skin automatically. If you have several attached css files, you need to force skin during initialization:

var myFileSelector = new dhtmlXFileSelector({
    skin: "dhx_web"
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXFileSelector API DHTMLX Docs

Documentation
  • dhtmlXFileSelector API
    • Methods
    • Events
    • Others
Start FileSelector

dhtmlXFileSelector API

Methods
attachEvent | adds any user-defined handler to available events
detachEvent | detaches a handler from an event
loadUserLanguage | sets a new language interface for FileSelector
setStrings | defines a collection of string resources
setURL | sets the path to the server-side script
show | shows dhtmlxFileSelector
unload | destructor, unloads dhtmlXFileSelector instance and clears memory
Events
onGridCreated | fires immediately after a grid has been created
onSelect | fires when selection in the FileSelector is changed
Other
lang | defines the default language for all FileSelector instances
langData | the storage of custom FileSelector languages
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • attachEvent
    • detachEvent
    • loadUserLanguage
    • setStrings
    • setURL
    • show
    • unload
  • Events
  • Others
Start FileSelector dhtmlXFileSelector API

Methods

attachEvent | adds any user-defined handler to available events
detachEvent | detaches a handler from an event
loadUserLanguage | sets a new language interface for FileSelector
setStrings | defines a collection of string resources
setURL | sets the path to the server-side script
show | shows dhtmlxFileSelector
unload | destructor, unloads dhtmlXFileSelector instance and clears memory
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start FileSelector dhtmlXFileSelector API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start FileSelector dhtmlXFileSelector API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadUserLanguage DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start FileSelector dhtmlXFileSelector API Methods

loadUserLanguage

sets a new language interface for FileSelector

void loadUserLanguage(string lang);

Parameters

lang string the name of a language

Example

// add once, make sure that dhtmlxfileselector.js is loaded
dhtmlXFileSelector.prototype.langData["fr"] = {
    // the "OK" button's name
    ok: "Sélectionner",
    // the "Cancel" button's name
    cancel: "Annuler",
    // the text of window's caption
    caption: "Sélectionnez le Fichier",
    // the title of the "Name" column
    col_name: "Nom",
    // the title of the "Size" column
    col_size: "Taille"
};

// initialize fileselector
var myFileSelector = new dhtmlXFileSelector();
myFileSelector.loadUserLanguage("fr");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setStrings DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start FileSelector dhtmlXFileSelector API Methods

setStrings

defines a collection of string resources

void setStrings(object data);

Parameters

data object string resources

Example

// for defined instance after init
var myFileSelector = new dhtmlXFileSelector(...);
myFileSelector.setStrings({
    ok: "Select",
    cancel: "Cancel",
    caption: "Please select"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setURL DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start FileSelector dhtmlXFileSelector API Methods

setURL

sets the path to the server-side script

void setURL(string url);

Parameters

url string path to the server-side script

Example

// on init state
var myFileSelector = new dhtmlXFileSelector({
    url: "server/data.php"
});

// using method
myFileSelector.setURL("server/data.php");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start FileSelector dhtmlXFileSelector API Methods

show

shows dhtmlxFileSelector

void show();

Example

myFileSelector.show();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • loadUserLanguage
  • setStrings
  • setURL
  • show
  • unload
Start FileSelector dhtmlXFileSelector API Methods

unload

destructor, unloads dhtmlXFileSelector instance and clears memory

void unload();

Example

var myFileSelector = new dhtmlXFileSelector(...);
 // unloading
myFileSelector.unload();
myFileSelector = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onGridCreated
    • onSelect
  • Others
Start FileSelector dhtmlXFileSelector API

Events

onGridCreated | fires immediately after a grid has been created
onSelect | fires when selection in the FileSelector is changed
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onGridCreated DHTMLX Docs

Documentation
  • onGridCreated
  • onSelect
Start FileSelector dhtmlXFileSelector API Events

onGridCreated

fires immediately after a grid has been created

void onGridCreated(object grid_obj){ ... };

Parameters

grid_obj object a grid object

Example

myFileSelector.attachEvent("onGridCreated", function(grid_obj){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelect DHTMLX Docs

Documentation
  • onGridCreated
  • onSelect
Start FileSelector dhtmlXFileSelector API Events

onSelect

fires when selection in the FileSelector is changed

void onSelect(string|number id){ ... };

Parameters

id string|number id of the selected item

Example

myFileSelector.attachEvent("onSelect", function(id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • lang
    • langData
Start FileSelector dhtmlXFileSelector API

Others

lang | defines the default language for all FileSelector instances
langData | the storage of custom FileSelector languages
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


lang DHTMLX Docs

Documentation
  • lang
  • langData
Start FileSelector dhtmlXFileSelector API Others

lang

defines the default language for all FileSelector instances

string lang;

Example

// way 1

// add settings for custom language
dhtmlXFileSelector.prototype.langData["fr"] = {
    ...
};

// initialize FileSelector
var myFileSelector = new dhtmlXFileSelector(...);

// apply language settings
myFileSelector.loadUserLanguage("fr");

// way 2 - simply change the lang property once, before init

// add settings for custom language
dhtmlXFileSelector.prototype.langData["fr"] = {
    ...
};

// make custom language default
dhtmlXFileSelector.prototype.lang = "fr";

// initialize FileSelector
// this instance will be initialized in French
var myFileSelector = new dhtmlXFileSelector(...);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


langData DHTMLX Docs

Documentation
  • lang
  • langData
Start FileSelector dhtmlXFileSelector API Others

langData

the storage of custom FileSelector languages

object langData;

Example

dhtmlXFileSelector.prototype.langData.fr = {
    ok: "Sélectionner",
    cancel: "Annuler",
    caption: "Sélectionnez le Fichier",
    col_name: "Nom",
    col_size: "Taille"
};

// initialize FileSelector
var myFileSelector = new dhtmlXFileSelector();

// apply language settings
myFileSelector.loadUserLanguage("fr");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Form DHTMLX Docs

Documentation
  • Form
    • dhtmlXForm API
    • How to Start with dhtmlxForm
    • Object Constructor
    • List of Controls
    • XML Format
    • JSON Format
    • HTML Format
    • Working with Userdata
    • Config and Operations
    • Positioning Controls
    • Validation
    • Creating a Custom Control
    • Server-side Integration
    • Integration with DHTMLX
    • Binding Data
    • Handling Events
Start

Form

dhtmlxForm presents a standard form with a number of useful additions, such as different styles (DHTMLX skins), usage of data from both the client side and the server side, integration with other DHTMLX components, validation, etc.

API reference
  • dhtmlXForm API
  • dhtmlXFileUploader API
Related resources
  • You may download dhtmlxForm from dhtmlx.com
  • Check online samples for dhtmlxForm
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Specifying Form Structure

  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
 Discusses Form initialization and the ways of specifying Form controls using different formats and techniques.

Configuring the Form Controls

  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
 Focuses on manipulations with Form items and data,arrangement of controls on Form,creation of your own control and the main points of specifying validation rules.

Integration

  • Server-side Integration
  • Integration with DHTMLX
 Covers how you can integrate Form with 3rd party components.

Auxiliary Resources

  • Binding Data
  • Handling Events
 Guides you through common information you may need while working with Form.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXForm API DHTMLX Docs

Documentation
  • dhtmlXForm API
    • Methods
    • Events
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
Start Form

dhtmlXForm API

Methods
addItem | adds an item to the form
adjustParentSize | adjusts the parent's size to the form content
attachEvent | adds any user-defined handler to available events
checkItem | checks a checkbox or a radio button
clear | clears the list of files
clearBackup | deletes the specified backup
clearNote | removes the note block from an input or a radio button
clearValidation | removes all validation rules from an input
detachEvent | detaches a handler from an event
disableItem | disables an item
enableItem | enables an item
enableLiveValidation | sets the mode when validation is invoked just after an input goes out of focus
forEachItem | iterator, calls a user-defined handler for each item
getCalendar | returns dhtmlxCalendar instance
getCheckedValue | returns the value of the checked radio button
getColorPicker | returns dhtmlxColorPicker instance
getColumnNode | returns the DOM node of the specified column
getCombo | returns dhtmlxCombo instance
getContainer | returns the HTMLElement object of the container control
getEditor | returns dhtmlxEditor instance
getFirstActive | returns the first element of the form
getForm | returns dhtmlxForm instance
getFormData | returns a hash of data values
getInput | returns item object (input, textarea, password, calendar, colorpicker, hidden only)
getItemLabel | returns the label of an item
getItemText | returns the text of an item
getItemType | returns the type of an item
getItemValue | returns the value of an item
getItemWidth | returns the width of an item set either by init or by the [setItemWidth()](setItemWidth) method
getItemsList | returns an array with the names of the form's items
getOptions | returns the options of an item (select, multiselect only)
getSelect | returns an item's object (select, multiselect only)
getUploader | returns the uploader instance
getUploaderStatus | returns the status of uploading
getUserData | returns any user data set into the given input by the setUserData() method
hideItem | hides an item
isItem | returns "true" if an item exists
isItemChecked | returns "true" if an item is checked (a checkbox and a radio button only)
isItemEnabled | returns "true" if an item is enabled
isItemHidden | returns "true" if an item is hidden
isLocked | returns "true" if the form is locked
isReadonly | returns "true" if an item is readonly
load | loads data to the component via XML or JSON, usually data-values pairs
loadStruct | loads data to the component via XML or JSON, usually component config
loadStructHTML | loads dhtmlxForm from HTML form structure
loadStructString | loads XML string into dhtmlxForm instance
lock | locks the form (disables all the items)
reloadOptions | reloads options of the item (combo, select, multiselect only)
removeColumn | removes the specified item
removeItem | removes an item
reset | resets the items of the form saved by means of the load or save methods to their initial states
resetDataProcessor | sets the mode of saving, if Form is used together with DataProcessor
resetValidateCss | resets CSS treatment of the form's validation
restoreBackup | restores the specified backup
save | saves the form's data in DB
saveBackup | creates a backup of the form
send | saves data to the server side script
setCalendarDateFormat | sets the format of date presentation in the calendar input
setFocusOnFirstActive | moves the focus on the first form's element
setFontSize | sets the font size for the whole form
setFormData | sets values for all items (form's controls) in the component
setItemFocus | sets the keyboard focus on the specified item
setItemHeight | sets the height of a textarea
setItemLabel | sets the label of an item
setItemText | sets the text of an item
setItemValue | sets the value of an item or clears the list in uploader (if the 2nd param is omitted)
setItemWidth | sets the width of an item
setNote | adds the note block under the specified input
setNumberFormat | allows setting the format of numeric data (for inputs only)
setReadonly | makes an item readonly
setRequired | makes/unmakes a certain field required
setSkin | sets skin for a form
setTooltip | sets a tooltip for an item
setUserData | allows attaching user data to a form without modifying the DOM
setValidateCss | sets CSS treatment of the form validation
setValidation | adds a validation rule to the input with the specified name
showItem | shows an item
uncheckItem | unchecks an item (a checkbox or a radio button only)
unload | destructor, removes the form instance and cleans the used memory
unlock | unlocks the form (enables all the items)
updateValues | updates the inputs' values
validate | starts the form's validation
validateItem | invokes the validation of the specified item
Events
onAfterReset | fires after resetting the form
onAfterSave | fires after data has been saved in DB
onAfterValidate | fires after the validation
onBeforeChange | fires before the data in some input changed ( by user actions )
onBeforeClear | fires before the user clears the list of files to upload (clicks the button [image] )
onBeforeDataLoad | fires after the data for the form received, but before it's assigned to actual fields
onBeforeFileAdd | fires when the user adds a file to the upload queue
onBeforeFileRemove | fires before the user removes a single file from the list of files to upload (clicks the button [image] )
onBeforeFileUpload | fires before file uploading has started
onBeforeReset | fires before resetting the form
onBeforeSave | fires before saving the form
onBeforeValidate | fires when validation has started but is not applied yet
onBlur | fires when the user moves the mouse pointer out of the input
onButtonClick | fires when the user clicks a button
onChange | fires when data in some input was changed
onClear | when the user clears the list of files to upload (clicks on button [image] )
onDisable | fires when the container is disabled after being enabled
onEditorAccess | fires when the user accesses the editor body
onEditorToolbarClick | fires when the user clicks the editor toolbar
onEnable | fires when the container control is enabled after being disabled
onEnter | fires on pressing the Enter button when the mouse pointer is set in an input control
onFileAdd | fires when the user adds a file to the upload queue
onFileRemove | fires when the user removes single file from the list of files to upload (clicks the button [image] )
onFocus | fires when an input gets focus
onImageUploadFail | fires when an image was uploaded incorrectly
onImageUploadSuccess | fires when an image was uploaded correctly
onInfo | fires when the user clicks the Info icon
onInputChange | fires when data in an input was changed and the cursor is still in this input
onKeydown | fires when the native "onkeydown" event is triggered
onKeyup | fires when the native "onkeyup" event is triggered
onOptionsLoaded | fires after the item options were completely loaded from the server to the client
onUploadCancel | fires when the user cancels uploading of a file (clicks the button [image] ).
onUploadComplete | fires when all files from the list have been uploaded to the server
onUploadFail | fires when the file upload has failed
onUploadFile | fires when a single file from the list has been uploaded to the server
onValidateError | fires for each error during validation
onValidateSuccess | fires for each success during validation
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • addItem
    • adjustParentSize
    • attachEvent
    • checkItem
    • clear
    • clearBackup
    • clearNote
    • clearValidation
    • detachEvent
    • disableItem
    • enableItem
    • enableLiveValidation
    • forEachItem
    • getCalendar
    • getCheckedValue
    • getColorPicker
    • getColumnNode
    • getCombo
    • getContainer
    • getEditor
    • getFirstActive
    • getForm
    • getFormData
    • getInput
    • getItemLabel
    • getItemText
    • getItemType
    • getItemValue
    • getItemWidth
    • getItemsList
    • getOptions
    • getSelect
    • getUploader
    • getUploaderStatus
    • getUserData
    • hideItem
    • isItem
    • isItemChecked
    • isItemEnabled
    • isItemHidden
    • isLocked
    • isReadonly
    • load
    • loadStruct
    • loadStructHTML
    • loadStructString
    • lock
    • reloadOptions
    • removeColumn
    • removeItem
    • reset
    • resetDataProcessor
    • resetValidateCss
    • restoreBackup
    • save
    • saveBackup
    • send
    • setCalendarDateFormat
    • setFocusOnFirstActive
    • setFontSize
    • setFormData
    • setItemFocus
    • setItemHeight
    • setItemLabel
    • setItemText
    • setItemValue
    • setItemWidth
    • setNote
    • setNumberFormat
    • setReadonly
    • setRequired
    • setSkin
    • setTooltip
    • setUserData
    • setValidateCss
    • setValidation
    • showItem
    • uncheckItem
    • unload
    • unlock
    • updateValues
    • validate
    • validateItem
  • Events
Start Form dhtmlXForm API

Methods

addItem | adds an item to the form
adjustParentSize | adjusts the parent's size to the form content
attachEvent | adds any user-defined handler to available events
checkItem | checks a checkbox or a radio button
clear | clears the list of files
clearBackup | deletes the specified backup
clearNote | removes the note block from an input or a radio button
clearValidation | removes all validation rules from an input
detachEvent | detaches a handler from an event
disableItem | disables an item
enableItem | enables an item
enableLiveValidation | sets the mode when validation is invoked just after an input goes out of focus
forEachItem | iterator, calls a user-defined handler for each item
getCalendar | returns dhtmlxCalendar instance
getCheckedValue | returns the value of the checked radio button
getColorPicker | returns dhtmlxColorPicker instance
getColumnNode | returns the DOM node of the specified column
getCombo | returns dhtmlxCombo instance
getContainer | returns the HTMLElement object of the container control
getEditor | returns dhtmlxEditor instance
getFirstActive | returns the first element of the form
getForm | returns dhtmlxForm instance
getFormData | returns a hash of data values
getInput | returns item object (input, textarea, password, calendar, colorpicker, hidden only)
getItemLabel | returns the label of an item
getItemText | returns the text of an item
getItemType | returns the type of an item
getItemValue | returns the value of an item
getItemWidth | returns the width of an item set either by init or by the [setItemWidth()](setItemWidth) method
getItemsList | returns an array with the names of the form's items
getOptions | returns the options of an item (select, multiselect only)
getSelect | returns an item's object (select, multiselect only)
getUploader | returns the uploader instance
getUploaderStatus | returns the status of uploading
getUserData | returns any user data set into the given input by the setUserData() method
hideItem | hides an item
isItem | returns "true" if an item exists
isItemChecked | returns "true" if an item is checked (a checkbox and a radio button only)
isItemEnabled | returns "true" if an item is enabled
isItemHidden | returns "true" if an item is hidden
isLocked | returns "true" if the form is locked
isReadonly | returns "true" if an item is readonly
load | loads data to the component via XML or JSON, usually data-values pairs
loadStruct | loads data to the component via XML or JSON, usually component config
loadStructHTML | loads dhtmlxForm from HTML form structure
loadStructString | loads XML string into dhtmlxForm instance
lock | locks the form (disables all the items)
reloadOptions | reloads options of the item (combo, select, multiselect only)
removeColumn | removes the specified item
removeItem | removes an item
reset | resets the items of the form saved by means of the load or save methods to their initial states
resetDataProcessor | sets the mode of saving, if Form is used together with DataProcessor
resetValidateCss | resets CSS treatment of the form's validation
restoreBackup | restores the specified backup
save | saves the form's data in DB
saveBackup | creates a backup of the form
send | saves data to the server side script
setCalendarDateFormat | sets the format of date presentation in the calendar input
setFocusOnFirstActive | moves the focus on the first form's element
setFontSize | sets the font size for the whole form
setFormData | sets values for all items (form's controls) in the component
setItemFocus | sets the keyboard focus on the specified item
setItemHeight | sets the height of a textarea
setItemLabel | sets the label of an item
setItemText | sets the text of an item
setItemValue | sets the value of an item or clears the list in uploader (if the 2nd param is omitted)
setItemWidth | sets the width of an item
setNote | adds the note block under the specified input
setNumberFormat | allows setting the format of numeric data (for inputs only)
setReadonly | makes an item readonly
setRequired | makes/unmakes a certain field required
setSkin | sets skin for a form
setTooltip | sets a tooltip for an item
setUserData | allows attaching user data to a form without modifying the DOM
setValidateCss | sets CSS treatment of the form validation
setValidation | adds a validation rule to the input with the specified name
showItem | shows an item
uncheckItem | unchecks an item (a checkbox or a radio button only)
unload | destructor, removes the form instance and cleans the used memory
unlock | unlocks the form (enables all the items)
updateValues | updates the inputs' values
validate | starts the form's validation
validateItem | invokes the validation of the specified item
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addItem DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

addItem

adds an item to the form

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

Parameters

pId | string|number | the parent item's id, i.e. the id of the existing item you want to nest a new item into
itemData | object | the object of a new item
pos | number | the position that the new item will be added to
insertAfter | number | the position of the item after which a new item will be inserted

Example

// to add as an individual item
myForm.addItem(null, itemData, pos, insertAfter);

// to nest into some existing item
myForm.addItem(pId, itemData, pos, insertAfter);

Details

if you don't want to specify the parent item, set the pId parameter to "null".

For radio buttons you must specify the pId parameter as an array with 2 elements:

  • id - the radio button's id
  • value - the radio button's value

If any columns are used, a new item will be inserted into the column where item[pos] positioned, before it. "insertAfter" specifies that a new item will be inserted after item[pos], to add the possibility to make a new item the last in the column. This param is ignored when inserting a new column.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


adjustParentSize DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

adjustParentSize

adjusts the parent's size to the form content

void adjustParentSize();

Example

myForm.adjustParentSize();

Details

the method is applied just to forms that reside in the dhtmlxLayout or dhtmlxWindows container components

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


checkItem DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

checkItem

checks a checkbox or a radio button

void checkItem(string name, [string value] );

Parameters

name | string | the name of an item
value | string | the value of an item (for a radio button)

Example

//for a radio button
myForm.checkItem(name,value);

//for other items
myForm.checkItem(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clear DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

clear

clears the form fields

void clear();

Example

myForm.clear();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearBackup DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

clearBackup

deletes the specified backup

void clearBackup(string|number id);

Parameters

id string|number the backup id

Example

var backup1 = myForm.saveBackup();
...
myForm.clearBackup(backup1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearNote DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

clearNote

removes the note block from an input or a radio button

void clearNote(string name, [string value] );

Parameters

name | string | the name of an item
value | string | the value of an item (for a radio button)

Example

//for a radio button
myForm.clearNote(name,value);

//for other items
myForm.clearNote(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearValidation DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

clearValidation

removes all validation rules from an input

void clearValidation(string name, [string value] );

Parameters

name | string | the name of an item
value | string | the value of an item (for a radio button)

Example

//for a radio button
myForm.clearValidation(name, value);

//for other items
myForm.clearValidation(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disableItem DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

disableItem

disables an item

void disableItem(string name, [string value] );

Parameters

name | string | the name of an item
value | string | the value of an item (for a radio button)

Example

myForm.disableItem(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableItem DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

enableItem

enables an item

void enableItem(string name, [string value] );

Parameters

name | string | the name of an item
value | string | the value of an item (for a radio button)

Example

myForm.enableItem(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableLiveValidation DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

enableLiveValidation

sets the mode when validation is invoked just after an input goes out of focus

void enableLiveValidation(boolean state);

Parameters

state boolean true/false

Example

myForm.enableLiveValidation(true);

Details

pass "true" if validation should be invoked just after an input goes out of focus and "false" - to invoke validation after the submit button has been clicked

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachItem DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

forEachItem

iterator, calls a user-defined handler for each item

void forEachItem(function handler);

Parameters

handler function a user-defined function, will take the item id as an argument

Example

myForm.forEachItem(function(name){
    // your code here
});

Details

the handler function takes the following arguments:

  • name - the item's name
  • value - the value of a radio button
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCalendar DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getCalendar

returns dhtmlxCalendar instance

object getCalendar(string name);

Parameters

name string the name of an item

Returns

object dhtmlxCalendar instance

Example

var dhxCalendar = myForm.getCalendar(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCheckedValue DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getCheckedValue

returns the value of the checked radio button

string getCheckedValue(string name);

Parameters

name string the name of an item

Returns

string the checked radio button's value

Example

myForm.getCheckedValue(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColorPicker DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getColorPicker

returns dhtmlxColorPicker instance

object getColorPicker(string name);

Parameters

name string the name of an item

Returns

object dhtmlxColorPicker instance

Example

var dhxColorPicker = myForm.getColorPicker(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColumnNode DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getColumnNode

returns the DOM node of the specified column

HTMLElement getColumnNode(string|number pId,number index);

Parameters

pId | string|number | the parent item's id, i.e. the id of the existing item which has a subform with columns ("null" for the top item)
index | number | index of newcolumn

Returns

HTMLElement the column's DOM node

Example

myForm.getColumnNode(pId,index);

Details

for radio buttons you must specify the pId parameter as an array with 2 elements:

  • id - the radio button's id
  • value - the radio button's value
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCombo DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getCombo

returns dhtmlxCombo instance

object getCombo(string name);

Parameters

name string the name of an item

Returns

object dhtmlxCombo instance

Example

var dhxCombo = myForm.getCombo(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getContainer DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getContainer

returns the HTMLElement object of the container control

HTMLElement getContainer(string name);

Parameters

name string the name of an item

Returns

HTMLElement HTMLElement object

Example

myForm = new dhtmlXForm("myForm", [
    {
        type:"container",
        name:"myGrid",
        label:"Select Product",
        inputWidth:330,
        inputHeight:200
    }
]);

var container = myForm.getContainer("myGrid");

Details

to use the control you must include one extra file: "dhtmlxform_item_container.js":

<script src="../../codebase/ext/dhtmlxform_item_container.js"></script>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getEditor DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getEditor

returns dhtmlxEditor instance

object getEditor(string name);

Parameters

name string the name of an item

Returns

object dhtmlxEditor instance

Example

var dhxEditor = myForm.getEditor(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFirstActive DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getFirstActive

returns the first element of the form

string getFirstActive();

Returns

string the name of the 1st form's element

Example

myForm.getFirstActive();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getForm DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getForm

returns dhtmlxForm instance

object getForm();

Returns

object dhtmlxForm instance

Example

var dhxForm = myForm.getForm();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFormData DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getFormData

returns a hash of data values

object getFormData( [boolean asString] );

Parameters

asString boolean optional, true to return data as string, otherwise false

Returns

object a hash of data values

Example

var values = myForm.getFormData();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getInput DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getInput

returns item object (input, textarea, password, calendar, colorpicker, hidden only)

object getInput(string name);

Parameters

name string the name of an item

Returns

object an item's object,"null" if no objects are found

Example

myForm.getInput(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemLabel DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getItemLabel

returns the label of an item

string getItemLabel(string name, [string value] );

Parameters

name | string | the name of an item
value | string | the value of a radio button

Returns

string an item's label

Example

// for a radio button
var text = myForm.getItemLabel(name, value);

// for other items
var text = myForm.getItemLabel(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemText DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getItemText

returns the text of an item

void getItemText();

Deprecated

new usage

myForm.getItemLabel(name,value);
Change log

deprecated from version 3.6.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemType DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getItemType

returns the type of an item

string getItemType(string name, [string value] );

Parameters

name | string | the name of an item
value | string | the value of a radio button

Returns

string item type

Example

//for radio buttons
var type = myForm.getItemType(name, value);

//for other items
var type = myForm.getItemType(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemValue DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getItemValue

returns the value of an item

mixed getItemValue(string name);

Parameters

name string the name of an item

Returns

mixed the item's value

Example

var value = myForm.getItemValue(name);

Details

In the case of a calendar item, the method returns the value as a Date object. If you need to get the value as a string with the specified date format, you should specify the 2nd parameter and set it to "true":

var value = myForm.getItemValue("myCalendar", true);

In the case of multiselect, the method returns an array.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemWidth DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getItemWidth

returns the width of an item set either by init or by the setItemWidth() method

number getItemWidth(string name);

Parameters

name string the name of an item

Returns

number the item's width

Example

var width = myForm.getItemWidth(name);

Details

the method works for the Block, Fieldset and Uploader controls

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemsList DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getItemsList

returns an array with the names of the form's items

void getItemsList();

Deprecated

from version 3.6.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getOptions DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getOptions

returns the options of an item (select, multiselect only)

object getOptions(string name);

Parameters

name string the name of an item

Returns

object the item's options

Example

var opts = myForm.getOptions(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelect DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getSelect

returns an item's object (select, multiselect only)

object getSelect(string name);

Parameters

name string the name of an item

Returns

object the item's object

Example

var someItem = myForm.getSelect(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getUploader DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getUploader

returns the uploader instance

object getUploader(string name);

Parameters

name string item's name

Returns

object uploader instance

Example

var myUploader = myForm.getUploader(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getUploaderStatus DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getUploaderStatus

returns the status of uploading

number getUploaderStatus(string name);

Parameters

name string item's name

Returns

number uploading status (please check details below)

Example

var status = myForm.getUploaderStatus(name);
// or
var myUploader = myForm.getUploader(name);
var status = myUploader.getStatus();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getUserData DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

getUserData

returns any user data set into the given input by the setUserData() method

mixed getUserData(string name,string value,string udKey);

Parameters

name | string | the name of an item
value | string | the value of an item (radiobutton only, omit for other types)
udKey | string | the key value that points to the user data

Returns

mixed the item's user data

Example

myForm.setUserData(name,udKey,udValue);

// getting userdata value of radiobutton
var auto = myForm.getUserData("mode", "a", "auto");
var size = myForm.getUserData("mode", "a", "size");
// getting userdata value of other types of items
var max_length = myForm.getUserData("login", "max_length");
var char_allowed = myForm.getUserData("login", "char_allowed");

See also
  • API
    • setUserData
  • Articles
    • Working with Userdata
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


hideItem DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

hideItem

hides an item

void hideItem(string name, [string value] );

Parameters

name | string | the name of an item
value | string | the value of an item (for a radio button)

Example

myForm.hideItem(id,value);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isItem DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

isItem

returns "true" if an item exists

boolean isItem(string name, [string value] );

Parameters

name | string | the name of an item
value | string | the value of an item (for a radio button)

Returns

boolean the item exists/doesn't exist

Example

//for radio buttons
var isExist = myForm.isItem(name, value);

//for other items
var isExist = myForm.isItem(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isItemChecked DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

isItemChecked

returns "true" if an item is checked (a checkbox and a radio button only)

boolean isItemChecked(string name, [string value] );

Parameters

name | string | the name of an item
value | string | the value of an item (for a radio button)

Returns

boolean true|false

Example

// for a radio button
var isChecked = myForm.isItemChecked(name, value);

// for other items
var isChecked = myForm.isItemChecked(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isItemEnabled DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

isItemEnabled

returns "true" if an item is enabled

boolean isItemEnabled(string name, [string value] );

Parameters

name | string | the name of an item
value | string | the value of an item (for a radio button)

Returns

boolean true|false

Example

// for a radio button
var isEnabled = myForm.isItemEnabled(name, value);

// for other items
var isEnabled = myForm.isItemEnabled(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isItemHidden DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

isItemHidden

returns "true" if an item is hidden

boolean isItemHidden(string name, [string value] );

Parameters

name | string | the id of an item
value | string | the value of an item (for a radio button)

Returns

boolean true|false

Example

// for a radio button
var isEnabled = myForm.isItemHidden(name, value);

// for other items
var isEnabled = myForm.isItemHidden(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isLocked DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

isLocked

returns "true" if the form is locked

boolean isLocked();

Returns

boolean true/false

Example

myForm.isLocked();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isReadonly DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

isReadonly

returns "true" if an item is readonly

boolean isReadonly(string name);

Parameters

name string the name of an item

Returns

boolean true/false

Example

myForm.isReadonly(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


load DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

load

loads data to the component via XML or JSON, usually data-values pairs

promise load(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.load({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.load('<data><node id="a1".../></data>');

// json/xml from server
myComponent.load("server/data.xml");

// local json/xml with callback
myComponent.load({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.load('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.load("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.load(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure the response has the header "Content-Type: text/xml" for the XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadStruct DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

loadStruct

loads data to the component via XML or JSON, usually component config

promise loadStruct(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.loadStruct('<data><node id="a1".../></data>');

// json/xml from server
myComponent.loadStruct("server/data.xml");

// local json/xml with callback
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.loadStruct('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.loadStruct("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.loadStruct(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure response has the header "Content-Type: text/xml" for XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadStructHTML DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

loadStructHTML

loads dhtmlxForm from HTML form structure

void loadStructHTML(string el);

Parameters

el string the id of an HTML form

Example

// HTML form
<form id="form1" style="display:none">
    <ul>
        <li ftype="input" value="Patricia D. Rossi">Full Name</li>
        <li ftype="password" value="123">Password</li>
        <li ftype="password" value="123">Confirm Password</li>
        <li ftype="checkbox">Subscribe on news</li>
    </ul>
</form>

// loading structure of the HTML form with the id "form1"
myForm.loadStructHTML("form1");

See also
  • Articles
    • HTML Format
    • Change log

    added in version 5.1

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


loadStructString DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

loadStructString

loads XML string into dhtmlxForm instance

void loadStructString();

Deprecated

new usage

loadStruct(data, doOnLoad);
Change log

from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


lock DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

lock

locks the form (disables all the items)

void lock();

Example

myForm.lock();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


reloadOptions DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

reloadOptions

reloads options of the item (combo, select, multiselect only)

void reloadOptions(string name,string|array data);

Parameters

name | string | the name of an item
data | string|array | an array of options or the URL of the script retrieving the options

Example

var formData = [
    {type: "multiselect", name: "crud_right", label: "Can create/edit/delete users:", options:[
        {text: "Administrators", value: "Option 1", selected: true},
        {text: "Power users", value: "Option 2", selected: true},
        {text: "All users", value: "Option 5"}
    ]}
];

myForm.reloadOptions("crud_right", [
    {text: "Registered users", value: "Option 1", selected: true},
    {text: "Guests", value: "Option 2", selected: true}
]);

// or with connector
var formData = [
    {type: "combo", name: "colors", label: "Select color:", connector: "php/colors.php?id=1"}
];
myForm.reloadOptions("colors", "php/colors.php?id=2"); // see XML formats below

Details

XML format

<!-- xml format for combo -->
<complete>
    <option value="value_a">text</option>
    <option value="value_b" selected="true">new text</option>
    ...
</complete>

<!-- xml format for select -->
<data>
    <item value="value_a" label="text"/>
    <item value="value_b" label="new text" selected="true"/>
    ...
</data>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


removeColumn DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

removeColumn

removes the specified item

void removeColumn(string|number pId,number index,boolean removeItems,boolean moveAfter);

Parameters

pId | string|number | the parent item's id, i.e. the id of the existing item which has a subform with columns ("null" for the top item)
index | number | index of newcolumn
removeItems | boolean | true/false, by default false
moveAfter | boolean | true/false, by default false

Example

myForm.removeColumn(pId, index, removeItems, moveAfter);

Details

If the parent item doesn't have any columns, deleting is impossible.

Set the removeItems param to "true" to delete items inside of the column, otherwise items will be moved to the column before (or to the next column if you're deleting the 1st one).

If removeItems is set to "false", the moveAfter param moves items to the next column (prev column if you're deleting last one).

For radio buttons you must specify the pId parameter as an array with 2 elements:

  • id - the radio button's id
  • value - the radio button's value
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


removeItem DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

removeItem

removes an item

void removeItem(string name, [string value] );

Parameters

name | string | the name of an item
value | string | the value of an item (for a radio button)

Example

// for radio buttons
myForm.removeItem(name, value);

// for other items
myForm.removeItem(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


reset DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

reset

resets the items of the form saved by means of the load or save methods to their initial states

void reset();

Example

myForm.reset();
//or
myForm.reset(function(id, response){
   alert("I'm reset");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


resetDataProcessor DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

resetDataProcessor

sets the mode of saving, if Form is used together with DataProcessor

void resetDataProcessor(string mode);

Parameters

mode string the mode of saving data in a form ("inserted" or "updated")

Example

myForm.resetDataprocessor(mode);

Details
  • if the "inserted" mode is set, the myForm.save() function will add a new record on the server
  • if the "updated" mode is set, the myForm.save() function will update the current data on the server
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


resetValidateCss DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

resetValidateCss

resets CSS treatment of the form's validation

void resetValidateCss( [string name] );

Parameters

name string the name of an item, optional

Example

myForm.resetValidateCss(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


restoreBackup DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

restoreBackup

restores the specified backup

void restoreBackup(string|number id);

Parameters

id string|number the backup id

Example

var backup1 = myForm.saveBackup();
...
myForm.restoreBackup(backup1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


save DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

save

saves the form's data in DB

void save();

Example

myForm.attachEvent("onButtonClick", function(id){
     myForm.save();
});

Details
  • The method is purposed to be used with connectors on server-side. Names of parameters on the server-side are equal to the values of “name” attributes on the client-side.
  • In the order the method saves data in DB, the related dataProcessor object should be defined.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveBackup DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

saveBackup

creates a backup of the form

void saveBackup();

Example

var backup1 = myForm.saveBackup();
...
myForm.restoreBackup(backup1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


send DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

send

saves data to the server side script

void send(string url, [string mode,function callback,boolean skipValidation] );

Parameters

url | string | the server-side script which will receive info
mode | string | optional, the sending mode, can be "get" or "post" (the default one)
callback | function | optional, the method which will be called after saving
skipValidation | boolean | optional, set true to skip validation before request (false by default)

Example

var callback = function() {
    // your code here
}
// post
myForm.send("1.php", callback);
// get
myForm.send("1.php", "get", callback);
// post
myForm.send("1.php", "post", callback);

Details

The method is purposed to be used with connectors on the server side. Names of parameters on the server side are equal to the values of the "name" attributes on the client side.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCalendarDateFormat DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setCalendarDateFormat

sets the format of date presentation in the calendar input

void setCalendarDateFormat(string name,string dateFormat,string serverDateFormat);

Parameters

name | string | the item's name
dateFormat | string | the format in which dates will be presented on the client
serverDateFormat | string | the format in which dates will be passed to/loaded from the server

Example

myForm.setCalendarDateFormat(name, "%d/%m/%y", "%d/%m/%y");

Details

Format string can contain any separator character and any element from the following list:

  • %d - day as a number ( with leading zero );
  • %j - day as a number;
  • %D - abbreviated name of the day;
  • %l - full name of the day;
  • %m - month as a number ( with leading zero );
  • %n - month as a number;
  • %M - abbreviated name of the month;
  • %F - full name of the month;
  • %y - year as a number (2 digits);
  • %Y - year as a number (4 digits);
  • %h - hours (12);
  • %H - hours (24);
  • %i - minutes;
  • %s - seconds;
  • %a - am or pm;
  • %A - AM or PM.

For example, if you want to set 1st June 2011 as 01.06.2011, the following format should be specified:

myForm.setCalendarDateFormat("cal1","%d.%m.%Y","%d.%m.%Y");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setFocusOnFirstActive DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setFocusOnFirstActive

moves the focus on the first form's element

void setFocusOnFirstActive();

Example

myForm.loadStruct("link here", function(){
myForm.setFocusOnFirstActive();
)};

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setFontSize DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setFontSize

sets the font size for the whole form

void setFontSize(string size);

Parameters

size string the font size you want to set to the form (see available values below)

Example

myForm.setFontSize("15px");

Details

Available values:

  • "xx-smal" - xx-small size
  • "x-small" - extra small size
  • "small" - small size
  • "medium" - medium size
  • "large" - large size
  • "x-large" - extra large size
  • "xx-large" - xx-large size
  • "smaller" - the size smaller than the parent element's
  • "larger" - the size larger than the parent element's
  • length - a fixed size in px, cm, etc.
  • % - percent of the parent element's font size
  • "inherit" - the font size inherited from the parent element
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setFormData DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setFormData

sets values for all items (form's controls) in the component

void setFormData(object data);

Parameters

data object the hash of properties

Example

form.setFormData({
  some1:mygrid.cells(id, 1).getValue(),
  some2:mygrid.cells(id, 2).getValue(),
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemFocus DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setItemFocus

sets the keyboard focus on the specified item

void setItemFocus(string name);

Parameters

name string the name of an item

Example

myForm.setItemFocus(name);

Details

the method is applied to input, textarea, password, calendar, colorpicker, editor

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemHeight DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setItemHeight

sets the height of a textarea

void setItemHeight(string name,number height);

Parameters

name | string | the name of a textarea
height | number | the height you want to set for a textarea

Example

myForm.setItemHeight(name, height);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemLabel DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setItemLabel

sets the label of an item

void setItemLabel(string name,string value,string label);

Parameters

name | string | the name of an item
value | string | the value of an item (for a radio button)
label | string | a new label (an empty string if you want to remove the label)

Example

myForm.setItemLabel(name, "New Text");
myForm.setItemLabel(name, value, "New Text"); // for radio button

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemText DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setItemText

sets the text of an item

void setItemText();

Deprecated

new usage

myForm.setItemLabel(name, label);
Change log

from version 3.6.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemValue DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setItemValue

sets the value of an item or clears the list in uploader (if the 2nd param is omitted)

void setItemValue(string name, [mixed value] );

Parameters

name | string | the name of an item
value | mixed | the value of an input, optional

Example

myForm.setItemValue(name, value);

// for multiselect
myForm.setItemValue(name, [value1, value2, ... valueN]);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemWidth DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setItemWidth

sets the width of an item

void setItemWidth(string name,number width);

Parameters

name | string | the name of an item
width | number | the width you want to set for an item

Example

myForm.setItemWidth(name, width);

Details

the method works for the Block, Fieldset and Uploader controls

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setNote DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setNote

adds the note block under the specified input

void setNote(string name,string value,object note);

Parameters

name | string | the name of an item
value | string | the value of an item (for a radio button)
note | object | the note object

Example

myForm.setNote(name, {
    text: "Enter your project name here. The field is required.", width:300
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setNumberFormat DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setNumberFormat

allows setting the format of numeric data (for inputs only)

void setNumberFormat(string name,string format,string groupSep,string decSep);

Parameters

name | string | the name of an item
format | string | the data format
groupSep | string | a mark used to divide numbers with many digits into groups. By default - ”.” (dot)
decSep | string | a mark used as a decimal delimiter. By default - ”,” (comma)

Example

myForm.setNumberFormat("input5","$ 0,000.00","'",",");

Details

for specifying the format parameter you should use the default group and decimal separators (”.” and ”,”).

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setReadonly DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setReadonly

makes an item readonly

void setReadonly(string name,boolean state);

Parameters

name | string | the name of an item
state | boolean | true/false, by default - false

Example

//makes an item with name="myInput" readonly
myForm.setReadonly("myInput", true);

//makes the item not readonly
myForm.setReadonly("myInput", false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRequired DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setRequired

makes/unmakes a certain field required

void setRequired(string name,string|number value,boolean state);

Parameters

name | string | the name of an item
value | string|number | item value (for radio buttons)
state | boolean | to make the field required, set the parameter to "true". Otherwise, false

Example

myForm.setRequired(name,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setSkin

sets skin for a form

void setSkin(string skin);

Parameters

skin string the skin you want to set

Example

myForm.setSkin("dhx_web");

Details

Available values:

  • "dhx_skyblue" (default value)
  • "dhx_web"
  • "dhx_terrace"

The priority of setting the skin

  1. Form gets the skin specified in the form object constructor (3rd parameter);
  2. Form gets the skin set by global "dhtmlx.skin";
  3. Form tries to automatically detect the skin by analyzing the included css files (if there are any, applies the last one);
  4. Form gets the "dhx_skyblue" skin.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setTooltip DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setTooltip

sets a tooltip for an item

void setTooltip(string|number itemId,string value,string tooltip);

Parameters

itemId | string|number | the item's id
value | string | the item's value (for radio items)
tooltip | string | a tooltip for the item

Example

myForm.setTooltip (id, value, tooltip);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setUserData DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setUserData

allows attaching user data to a form without modifying the DOM

void setUserData(string name,string value,string udKey,mixed udValue);

Parameters

name | string | the name of an item
value | string | the value of an item (radiobutton only, omit for other types)
udKey | string | the key that will point to the stored user data
udValue | mixed | the value of userdata associated with "udKey"

Example

// for radio button
myForm.setUserData("mode", "a", "auto", true);
myForm.setUserData("mode", "a", "size", 10);
// for other types
myForm.setUserData("login", "max_length", 15);
myForm.setUserData("login", "char_allowed", 15);

See also
  • API
    • getUserData
  • Articles
    • Working with Userdata
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setValidateCss DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setValidateCss

sets CSS treatment of the form validation

void setValidateCss(string name,boolean state,string custom);

Parameters

name | string | the item's name
state | boolean | true/false (see the details)
custom | string | the name of a CSS class to apply
Details

The state param defines whether the CSS class should be applied to the items validated successfully (true) or to the items which failed the validation (false).

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setValidation DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

setValidation

adds a validation rule to the input with the specified name

void setValidation(string name,string value,string rule);

Parameters

name | string | the name of an item
value | string | the value of a radio button
rule | string | a validation rule (possible validation rules are described in the related article)

Example

myForm.setValidation(name, "ValidInteger");

See also
  • Articles
    • Validation
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


showItem DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

showItem

shows an item

void showItem(string name, [string value] );

Parameters

name | string | the name of an item
value | string | item value (for radio buttons)

Example

myForm.showItem(name, value);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


uncheckItem DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

uncheckItem

unchecks an item (a checkbox or a radio button only)

void uncheckItem(string name, [string value] );

Parameters

name | string | the name of an item
value | string | the value of a radio button

Example

// for radio buttons
dhxForm.uncheckItem(name, value);

// for other items
dhxForm.uncheckItem(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

unload

destructor, removes the form instance and cleans the used memory

void unload();

Example

myForm.unload();
myForm = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unlock DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

unlock

unlocks the form (enables all the items)

void unlock();

Example

myForm.unlock();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


updateValues DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

updateValues

updates the inputs' values

void updateValues();

Example

myForm.updateValues();

Details

The onChange event is invoked from input's onblur. When the user enters a text into an input and presses a button on the toolbar ("save", for example) onblur is called later than button's event. As a result, the myForm.getFormData() or myForm.getItemValue() methods will return the old value. In such a case, you can call updateValues() before getFormData/getItemValue.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


validate DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

validate

starts the form's validation

void validate();

Example

function doFormValidate() {
     myForm.validate();
}

Details

the method is called automatically as a part of the “save” routine

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


validateItem DHTMLX Docs

Documentation
  • addItem
  • adjustParentSize
  • attachEvent
  • checkItem
  • clear
  • clearBackup
  • clearNote
  • clearValidation
  • detachEvent
  • disableItem
  • enableItem
  • enableLiveValidation
  • forEachItem
  • getCalendar
  • getCheckedValue
  • getColorPicker
  • getColumnNode
  • getCombo
  • getContainer
  • getEditor
  • getFirstActive
  • getForm
  • getFormData
  • getInput
  • getItemLabel
  • getItemText
  • getItemType
  • getItemValue
  • getItemWidth
  • getItemsList
  • getOptions
  • getSelect
  • getUploader
  • getUploaderStatus
  • getUserData
  • hideItem
  • isItem
  • isItemChecked
  • isItemEnabled
  • isItemHidden
  • isLocked
  • isReadonly
  • load
  • loadStruct
  • loadStructHTML
  • loadStructString
  • lock
  • reloadOptions
  • removeColumn
  • removeItem
  • reset
  • resetDataProcessor
  • resetValidateCss
  • restoreBackup
  • save
  • saveBackup
  • send
  • setCalendarDateFormat
  • setFocusOnFirstActive
  • setFontSize
  • setFormData
  • setItemFocus
  • setItemHeight
  • setItemLabel
  • setItemText
  • setItemValue
  • setItemWidth
  • setNote
  • setNumberFormat
  • setReadonly
  • setRequired
  • setSkin
  • setTooltip
  • setUserData
  • setValidateCss
  • setValidation
  • showItem
  • uncheckItem
  • unload
  • unlock
  • updateValues
  • validate
  • validateItem
Start Form dhtmlXForm API Methods

validateItem

invokes the validation of the specified item

void validateItem(string name);

Parameters

name string the name of an item

Example

var res = myForm.validateItem(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onAfterReset
    • onAfterSave
    • onAfterValidate
    • onBeforeChange
    • onBeforeClear
    • onBeforeDataLoad
    • onBeforeFileAdd
    • onBeforeFileRemove
    • onBeforeFileUpload
    • onBeforeReset
    • onBeforeSave
    • onBeforeValidate
    • onBlur
    • onButtonClick
    • onChange
    • onClear
    • onDisable
    • onEditorAccess
    • onEditorToolbarClick
    • onEnable
    • onEnter
    • onFileAdd
    • onFileRemove
    • onFocus
    • onImageUploadFail
    • onImageUploadSuccess
    • onInfo
    • onInputChange
    • onKeydown
    • onKeyup
    • onOptionsLoaded
    • onUploadCancel
    • onUploadComplete
    • onUploadFail
    • onUploadFile
    • onValidateError
    • onValidateSuccess
    • onXLE
    • onXLS
Start Form dhtmlXForm API

Events

onAfterReset | fires after resetting the form
onAfterSave | fires after data has been saved in DB
onAfterValidate | fires after the validation
onBeforeChange | fires before the data in some input changed ( by user actions )
onBeforeClear | fires before the user clears the list of files to upload (clicks the button [image] )
onBeforeDataLoad | fires after the data for the form received, but before it's assigned to actual fields
onBeforeFileAdd | fires when the user adds a file to the upload queue
onBeforeFileRemove | fires before the user removes a single file from the list of files to upload (clicks the button [image] )
onBeforeFileUpload | fires before file uploading has started
onBeforeReset | fires before resetting the form
onBeforeSave | fires before saving the form
onBeforeValidate | fires when validation has started but is not applied yet
onBlur | fires when the user moves the mouse pointer out of the input
onButtonClick | fires when the user clicks a button
onChange | fires when data in some input was changed
onClear | when the user clears the list of files to upload (clicks on button [image] )
onDisable | fires when the container is disabled after being enabled
onEditorAccess | fires when the user accesses the editor body
onEditorToolbarClick | fires when the user clicks the editor toolbar
onEnable | fires when the container control is enabled after being disabled
onEnter | fires on pressing the Enter button when the mouse pointer is set in an input control
onFileAdd | fires when the user adds a file to the upload queue
onFileRemove | fires when the user removes single file from the list of files to upload (clicks the button [image] )
onFocus | fires when an input gets focus
onImageUploadFail | fires when an image was uploaded incorrectly
onImageUploadSuccess | fires when an image was uploaded correctly
onInfo | fires when the user clicks the Info icon
onInputChange | fires when data in an input was changed and the cursor is still in this input
onKeydown | fires when the native "onkeydown" event is triggered
onKeyup | fires when the native "onkeyup" event is triggered
onOptionsLoaded | fires after the item options were completely loaded from the server to the client
onUploadCancel | fires when the user cancels uploading of a file (clicks the button [image] ).
onUploadComplete | fires when all files from the list have been uploaded to the server
onUploadFail | fires when the file upload has failed
onUploadFile | fires when a single file from the list has been uploaded to the server
onValidateError | fires for each error during validation
onValidateSuccess | fires for each success during validation
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterReset DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onAfterReset

fires after resetting the form

void onAfterReset(string|number id){ ... };

Parameters

id string|number form id

Example

myForm.attachEvent("onAfterReset", function (id){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterSave DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onAfterSave

fires after data has been saved in DB

void onAfterSave(string|number id,object xml){ ... };

Parameters

id | string|number | form id
xml | object | the loader object from the server side response

Example

myForm.attachEvent("onAfterSave", function (id, xml){
   //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterValidate DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onAfterValidate

fires after the validation

void onAfterValidate(boolean status){ ... };

Parameters

status boolean true/false

Example

myForm.attachEvent("onAfterValidate", function (status){
     //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeChange DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onBeforeChange

fires before the data in some input changed ( by user actions )

void onBeforeChange(string name,mixed old_val,mixed new_val){ ... };

Parameters

name | string | item name
old_val | mixed | an existing value
new_val | mixed | a new value

Example

myForm.attachEvent("onBeforeChange", function (name, old_value, new_value){
    //your code here
return true;
});

Details

returning "false" from the event handler will cancel the value changing (the onChange event won't be called after this)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeClear DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onBeforeClear

fires before the user clears the list of files to upload (clicks the button [image])

void onBeforeClear(){ ... };

Example

myForm.attachEvent("onBeforeClear", function(){
    // your code here
    return true;
});

Details

returning false will cancel the 'clear' operation

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDataLoad DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onBeforeDataLoad

fires after the data for the form received, but before it's assigned to actual fields

void onBeforeDataLoad(string|number id,object values){ ... };

Parameters

id | string|number | the form id
values | object | a hash of values

Example

myForm.attachEvent("onBeforeDataLoad", function (id, values){
   //your code here
    return true;
});

Details

The event is blockable. Returning "false" will prevent loading data into the form

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeFileAdd DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onBeforeFileAdd

fires when the user adds a file to the upload queue

void onBeforeFileAdd(string realName){ ... };

Parameters

realName string the real name of the file (as it's displayed in the control)

Example

myForm.attachEvent("onBeforeFileAdd",function(realName){
    // your code here
    return true;
});

Details

returning false will cancel the 'add' operation

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeFileRemove DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onBeforeFileRemove

fires before the user removes a single file from the list of files to upload (clicks the button [image])

void onBeforeFileRemove(string realName,string serverName){ ... };

Parameters

realName | string | the real name of the file (as it's displayed in the control)
serverName | string | the file name that the server returns after uploading or null if the file hasn't been uploaded to the server

Example

myForm.attachEvent("onBeforeFileRemove", function(realName, serverName){
    if (!confirm("Are you sure you want to delete "+realName+"?")) return false;
    return true;
})

Details

returning false will cancel the 'remove' operation

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeFileUpload DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onBeforeFileUpload

fires before file uploading has started

void onBeforeFileUpload(string mode,XMLHttpRequest loader, [object formData] ){ ... };

Parameters

mode | string | the mode in which uploader is used (read more about uploader modes here)
loader | XMLHttpRequest | XMLHttpRequest object related to the data loading
formData | object | optional, form config

Example

myForm.attachEvent("onBeforeFileUpload",function("html5",loader,formData){
    // your code here
    return true;
});

Details

returning false will cancel the 'upload' operation

See also
  • API
    • onUploadCancel
    • onUploadComplete
    • onUploadFail
    • onUploadFile
    • Change log

    added in version 5.1

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


onBeforeReset DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onBeforeReset

fires before resetting the form

void onBeforeReset(string|number id,object values){ ... };

Parameters

id | string|number | the form id
values | object | a hash of values

Example

myForm.attachEvent("onBeforeReset", function (id, values){
    // your code here
return true;
});

Details

The event is blockable. Returning "false" will prevent form resetting.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeSave DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onBeforeSave

fires before saving the form

void onBeforeSave(string|number id,object values){ ... };

Parameters

id | string|number | the form id
values | object | a hash of values

Example

myForm.attachEvent("onBeforeSave", function (id, values){
    //your code here
return true;
});

Details

The event is blockable. Returning "false" will prevent form saving

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeValidate DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onBeforeValidate

fires when validation has started but is not applied yet

void onBeforeValidate(string|number id){ ... };

Parameters

id string|number the form id

Example

myForm.attachEvent("onBeforeValidate", function (id){
    // your code here
return true;
});

Details

Returning "false" from the event handler will prevent validation

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBlur DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onBlur

fires when the user moves the mouse pointer out of the input

void onBlur(string name,string value){ ... };

Parameters

name | string | item name
value | string | item value (for checkboxes and radios only)

Example

//for radios and checkboxes
myForm.attachEvent("onBlur", function(name, value){
    //your code here
});

//for other controls
myForm.attachEvent("onBlur", function(name){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onButtonClick DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onButtonClick

fires when the user clicks a button

void onButtonClick(string name){ ... };

Parameters

name string control name

Example

myForm.attachEvent("onButtonClick", function(name){
     // your code here
});

Details

example of init:

...
{type: "button", name: "btn2", value: "Submit"}
...
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onChange DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onChange

fires when data in some input was changed

void onChange(string name,string|number value, [boolean state] ){ ... };

Parameters

name | string | item name
value | string|number | item value
state | boolean | checked/unchecked (for checkboxes, radio and btn2state controls only)

Example

myForm.attachEvent("onChange", function (name, value, state){
     // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClear DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onClear

when the user clears the list of files to upload (clicks on button [image])

void onClear(){ ... };

Example

myForm.attachEvent("onClear", function (){
    //your code here
});

Details

Note, before the onClear event is invoked the (onFileRemove) event fires for all files in the list to upload.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDisable DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onDisable

fires when the container is disabled after being enabled

void onDisable(string name){ ... };

Parameters

name string the item's name

Example

myForm.attachEvent("onDisable", function (name){
     //your code here
});

Details

the event works for nested structures only (when container is nested in a checkbox or a radio)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEditorAccess DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onEditorAccess

fires when the user accesses the editor body

void onEditorAccess(string name,string type,object ev,object editor,object form){ ... };

Parameters

name | string | the item's name
type | string | the type of the accessing action (e.g. "mousedown","focus","mouseup","click", "blur")
ev | object | the event object
editor | object | the editor instance
form | object | the form instance

Example

myForm.attachEvent("onEditorAccess", function(name, type, ev, editor, form){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEditorToolbarClick DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onEditorToolbarClick

fires when the user clicks the editor toolbar

void onEditorToolbarClick(string name,string|number toolbar_id,object editor,object form){ ... };

Parameters

name | string | the item name
toolbar_id | string|number | the toolbar id
editor | object | the editor instance
form | object | the form instance

Example

myForm.attachEvent("onEditorToolbarClick", function(name, toolbar_id, editor, form){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEnable DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onEnable

fires when the container control is enabled after being disabled

void onEnable(string name){ ... };

Parameters

name string the item id

Example

myForm.attachEvent("onEnable", function (name){
     //your code here
});

Details

the event works for nested structures only (when container is nested in a checkbox or a radio).

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEnter DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onEnter

fires on pressing the Enter button when the mouse pointer is set in an input control

void onEnter(){ ... };

Example

myForm.attachEvent("onEnter", function(){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onFileAdd DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onFileAdd

fires when the user adds a file to the upload queue

void onFileAdd(string realName){ ... };

Parameters

realName string the real name of the file (as it's displayed in the control)

Example

myForm.attachEvent("onFileAdd",function(realName){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onFileRemove DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onFileRemove

fires when the user removes single file from the list of files to upload (clicks the button [image])

void onFileRemove(string realName,string serverName){ ... };

Parameters

realName | string | the real name of the file (as it's displayed in the control)
serverName | string | the file name that the server returns after uploading or null if the file hasn't been uploaded to the server

Example

myForm.attachEvent("onFileRemove",function(realName,serverName){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onFocus DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onFocus

fires when an input gets focus

void onFocus(string name,string value){ ... };

Parameters

name | string | item name
value | string | item value (for radios only)

Example

//for radios and checkboxes
myForm.attachEvent("onFocus", function(name, value){
    //your code here
});

//for other controls
myForm.attachEvent("onFocus", function(name){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onImageUploadFail DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onImageUploadFail

fires when an image was uploaded incorrectly

void onImageUploadFail(string name,mixed extra){ ... };

Parameters

name | string | the identification name. Used for referring to item
extra | mixed | user-defined extra data

Example

myForm.attachEvent("onImageUploadFail", function(name, extra){
    // your code here
});

See also
  • API
    • onImageUploadSuccess
    • Change log

    added in version 5.1

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


onImageUploadSuccess DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onImageUploadSuccess

fires when an image was uploaded correctly

void onImageUploadSuccess(string name,string value,mixed extra){ ... };

Parameters

name | string | the identification name. Used for referring to item
value | string | the name of the image to upload
extra | mixed | user-defined extra data

Example

myForm.attachEvent("onImageUploadSuccess", function(name, value, extra){
    // your code here
});

See also
  • API
    • onImageUploadFail
    • Change log

    added in version 5.1

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


onInfo DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onInfo

fires when the user clicks the Info icon

void onInfo(string name,Event e){ ... };

Parameters

name | string | item name
e | Event | event object

Example

myForm.attachEvent("onInfo", function(name, e){

    // get clicked DOM element (i.e. <span>?</span>)
    var t = e.target||e.srcElement;

    // detect coords
    var x = window.dhx.absLeft(t);
    var y = window.dhx.absTop(t);
    var w = t.offsetWidth;
    var h = t.offsetHeight;

    // show popup next to ? icon
    myPopup.show(x,y,w,h);

});

Details

to add the icon, set the info attribute (if available) to true.

Change log

2nd param 'e' added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onInputChange DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onInputChange

fires when data in an input was changed and the cursor is still in this input

void onInputChange(string name,string value,object form){ ... };

Parameters

name | string | item name
value | string | item value
form | object | form object

Example

myForm.attachEvent("onInputChange", function(name, value, form){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onKeydown DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onKeydown

fires when the native "onkeydown" event is triggered

void onKeydown(object inp,object ev,string name,string value){ ... };

Parameters

inp | object | the input element that fires the event
ev | object | the event object
name | string | item name
value | string | item value (for radios only)

Example

myForm.attachEvent("onKeyDown",function(inp, ev, name, value){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onKeyup DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onKeyup

fires when the native "onkeyup" event is triggered

void onKeyup(object inp,object ev,string name,string value){ ... };

Parameters

inp | object | the input element that fires the event
ev | object | the event object
name | string | item name
value | string | item value (for radios only)

Example

myForm.attachEvent("onKeyUp",function(inp, ev, name, value){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onOptionsLoaded DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onOptionsLoaded

fires after the item options were completely loaded from the server to the client

void onOptionsLoaded(string name){ ... };

Parameters

name string item name

Example

myForm.attachEvent("onOptionsLoaded", function(name){
    //your code here
});

Details

the event is used for select and combo items

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onUploadCancel DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onUploadCancel

fires when the user cancels uploading of a file (clicks the button [image]).

void onUploadCancel(string realName){ ... };

Parameters

realName string the real name of the file (as it's displayed in the control)

Example

myForm.attachEvent("onUploadCancel", function (realName){
    // your code here
});

See also
  • API
    • onBeforeFileUpload
    • onUploadComplete
    • onUploadFail
    • onUploadFile
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


onUploadComplete DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onUploadComplete

fires when all files from the list have been uploaded to the server

void onUploadComplete(number count){ ... };

Parameters

count number the number of uploaded files

Example

myForm.attachEvent("onUploadComplete",function(count){
    // your code here
});

See also
  • API
    • onBeforeFileUpload
    • onUploadCancel
    • onUploadFail
    • onUploadFile
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


onUploadFail DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onUploadFail

fires when the file upload has failed

void onUploadFail(string realName){ ... };

Parameters

realName string the real name of the file (as it's displayed in the control)

Example

myForm.attachEvent("onUploadFail",function(realName){
    // your code here
});

See also
  • API
    • onBeforeFileUpload
    • onUploadCancel
    • onUploadComplete
    • onUploadFile
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


onUploadFile DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onUploadFile

fires when a single file from the list has been uploaded to the server

void onUploadFile(string realName,string serverName){ ... };

Parameters

realName | string | the real name of the file (as it's displayed in the control)
serverName | string | the file name that the server returns

Example

myForm.attachEvent("onUploadFile",function(realName,serverName){
    // your code here
});

Details

If the file is the only one in the list or in case all files in the list are uploaded - the onUploadComplete event fires.

See also
  • API
    • onBeforeFileUpload
    • onUploadCancel
    • onUploadComplete
    • onUploadFail
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


onValidateError DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onValidateError

fires for each error during validation

void onValidateError(string name,string|number value,boolean result){ ... };

Parameters

name | string | an input name
value | string|number | the current value
result | boolean | the result of validation,true/false

Example

myForm.attachEvent("onValidateError", function (name, value, result){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onValidateSuccess DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onValidateSuccess

fires for each success during validation

void onValidateSuccess(string name,string|number value,boolean result){ ... };

Parameters

name | string | an input name
value | string|number | the current value
result | boolean | the result of validation,true/false

Example

myForm.attachEvent("onValidateSuccess", function (name, value, result){
   //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onAfterReset
  • onAfterSave
  • onAfterValidate
  • onBeforeChange
  • onBeforeClear
  • onBeforeDataLoad
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onBeforeReset
  • onBeforeSave
  • onBeforeValidate
  • onBlur
  • onButtonClick
  • onChange
  • onClear
  • onDisable
  • onEditorAccess
  • onEditorToolbarClick
  • onEnable
  • onEnter
  • onFileAdd
  • onFileRemove
  • onFocus
  • onImageUploadFail
  • onImageUploadSuccess
  • onInfo
  • onInputChange
  • onKeydown
  • onKeyup
  • onOptionsLoaded
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
  • onValidateError
  • onValidateSuccess
  • onXLE
  • onXLS
Start Form dhtmlXForm API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


How to Start with dhtmlxForm DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
    • Step 1. Include related files
    • Step 2. Define a form container
    • Step 3. Define form structure
    • Step 4. Call the object constructor
    • Addition. Using events and methods
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
Start Form

How to Start with dhtmlxForm

To create a full-fledged dhxForm object you must make 4 steps.

Shortly, they look as:

  1. Include related files;
  2. Define a form container;
  3. Define form structure;
  4. Call the object constructor.

For detailed explanation we'll create a simple app (based on form) and show initialization details by an example.

Step 1. Include related files

Each DHTMLX component can be used standalone or as a part of the general library. If you use dhtmlxForm standalone you need to include 2 files:

  • dhtmlxform.js
  • dhtmlxform.css
<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" href="../codebase/dhtmlxform.css">
        <script src="../codebase/dhtmlxform.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

If you use dhtmlxForm as a part of "dhtmlxSuite" package you need to include 2 files:

  • dhtmlx.js
  • dhtmlx.css
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Step 2. Define a form container

The next step: an HTML container for your future form. To implement this step we can choose one of the ways:

  • Create a new HTML container.
    <div id="form_container" style="width:280px;height:250px;"></div>
  • Put a form into some DHTMLX container component: layout, window, accordion, tabbar.
    For details see Integration with container components.

Step 3. Define form structure

Here we'll define form items and their positions.

For our form we need:

  • 3 text fields (two for numbers and one for the result)
    a text field in form is specified by the item input
  • 4 buttons (for main operations: +,-,*,/)
    a button in form is specified by the item button
  • also an item which will unite all our elements in a block. It's fieldset.
  • we will use newcolumn item for spliting elements into columns.

For all the items (except fieldset and newcolumn) we'll specify the name attribute. We will use it later, for getting(setting) item's value.

Full list of available items(form's controls) and their attributes

formStructure = [
    {type:"settings",position:"label-top"},
    {type: "fieldset",name:"calculator", label: "Calculator", list:[
        {type: "input", name: 'firstNum', label: 'First number:'},
        {type:"input", name:"secNum", label:"Second number:"},
        {type:"input", name:"resNum", label:"Result:"},
        {type:"newcolumn"},
        {type:"button", name:"plus", width:20,offsetTop:2, value:"+"},
        {type:"button", name:"minus",width:20,offsetTop:10, value:"-"},
        {type:"button", name:"multiply",width:20,offsetTop:10, value:"*"},
        {type:"button", name:"divide",width:20,offsetTop:10, value:"/"}
    ]}
];

Step 4. Call the object constructor

All the preparations are finished. Now you need to create a form instance.

In case of HTML container, initialization code will be as follows:

var myForm = new dhtmlXForm("form_container",formStructure);
  • form_container - the id of the container specified before (instead of id, you can directly specify a container object there).
  • formStructure - the variable that contains definitions of form structure. If you put the form into DHTMLX container component the initialization code will be different (see details in Integration with DHTMLX):
myForm = layout.cells("a").attachForm(formStructure);

Addition. Using events and methods

We've created all the needed elements but to work as calculator, our form must implement a number of actions: addition, subtraction, multiplication, division.

We'll add this functionality by means of onButtonClick event. The method attachEvent will help to attach event handler. For more details about events see Events API.

myForm.attachEvent("onButtonClick", function(id){
        var res, num1, num2;
    num1 = parseInt(myForm.getItemValue("firstNum"));// returns the value of item
    num2 = parseInt(myForm.getItemValue("secNum")); // returns the value of item
    if (id=="plus") //defines addition
        { res=num1+num2;}
    else if (id=="minus") //defines subtraction
        {res=num1-num2;}
    else if (id=="multiply")//defines multiplication
        {res=num1*num2;}
    else if (id =="divide")//defines division
        {  if (num2==0) //if division by zero - generates a message
               {alert("Error.Division by zero!");res="";}
           else {res=num1/num2;}
        }
    myForm.setItemValue("resNum",res);// sets the value of item
})

Used methods:

  • getItemValue(name) - returns the value of the specified item (name). As the method returns value as string, we'll use parseInt function to convert a string value into a 32-bit signed integer.
  • setItemValue(name, value) - sets the value (value) to the specified item (name)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
Start Form

Object Constructor

<div id="form_container" style="width:280px;height:250px;"></div>

var formStructure = [
    {type:"radio", name:"color", value:"r", checked:true, label:"Red"},
    {type:"radio", name:"color", value:"g", label:"Green"},
    {type:"radio", name:"color", value:"b", label:"Blue"}
];
var dhxForm = new dhtmlXForm("form_container", formStructure);

Parameters:

  • form_container - the id of the container specified before (instead of id, you can directly specify a container object there);
  • formStructure - the variable that contains definitions of form structure (form's controls, their attributes and position).

In order to learn available form's controls refer to the article "List of Controls".

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


List of Controls DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
    • Block
    • Btn2state
    • Button
    • Calendar
    • Checkbox
    • Colorpicker
    • Combo
    • Container
    • Editor
    • Fieldset
    • File
    • Hidden
    • Image
    • Input/Textarea
    • Label
    • Multiselect
    • Newcolumn
    • Password
    • Radio
    • Select
    • Settings
    • Template
    • Upload
    • dhtmlXFileUploader API
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
Start Form

List of Controls

Block

allows combining several sense-connected items. It's identical to fieldset but doesn't have label and frame.

Attributes

blockOffset | number | left-side offset of the item content (default 20)
className | string | the user-defined css class for block's items
disabled | boolean | disables/enables the block's items
hidden | boolean | hides/shows the item. The default value - false (the item is shown)
inputLeft | number | sets the left absolute offset of input.The attribute is applied only if the position is set as "absolute"
inputTop | number | sets the top absolute offset of input. The attribute is applied only if the position is set as "absolute"
name | string | the identification name. Used for referring to item
list | array | defines the array of nested elements
offsetLeft | number | sets the left relative offset of item
offsetTop | number | sets the top relative offset of item
position | string | label-left, label-right, label-top or absolute - defines the position of label relative to block. As just labels are defined for block, just value absolute makes sense and is used for setting absolute label position
width | number | the width of block

var formData = [
    {type: "settings", position: "label-right"},
    {type: "block", width: 900, list:[
        {type: "label", label: "Internal Color"},
        {type: "radio", name: "n1", value: 1, label: "Red"},
        {type: "radio", name: "n1", value: 2, label: "Orange"},
        {type: "radio", name: "n1", value: 3, label: "Yellow"},
        {type: "radio", name: "n1", value: 4, label: "Green"},
        {type: "radio", name: "n1", value: 5, label: "Blue"},
        {type: "button", value: "Yes"},
        {type: "newcolumn"},
        {type: "label", label: "External Color"},
        {type: "radio", name: "n2", value: 1, label: "Red"},
        {type: "radio", name: "n2", value: 2, label: "Orange"},
        {type: "radio", name: "n2", value: 3, label: "Yellow"},
        {type: "radio", name: "n2", value: 4, label: "Green"},
        {type: "radio", name: "n2", value: 5, label: "Blue"},
        {type: "button", value: "No"}
    ]}
];

Btn2state

presents a customizable checkbox

Attributes

checked | boolean | defines whether or not checkbox will be checked initially. The default value is "false"
className | string | the user-defined css class for item
cssName | string | allows setting individual look for a specific item's instance (see details below)
disabled | boolean | disables/enables the item
hidden | boolean | hides/shows the item. The default value - "false" (the item is shown)
info | boolean | adds the [image] icon after the input label (related event - onInfo)
inputLeft | number | sets the left absolute offset of input. The attribute is applied only if the position is set as "absolute"
inputTop | number | sets the top absolute offset of input. The attribute is applied only if the position is set as "absolute"
inputWidth | string|number | the width of input. The default value is "auto"
label | string | the text label of the item
labelAlign | string | left, right or center - the alignment of label within the defined width
labelHeight | string|number | the height of DIV where the label is placed (not the font size). The default value is "auto"
labelLeft | number | sets the left absolute offset of label. The attribute is applied only if the position is set as "absolute"
labelTop | number | sets the top absolute offset of label. The attribute is applied only if the position is set as "absolute"
labelWidth | string|number | the width of label. The default value is "auto"
list | array | defines the array of nested elements
name | string | the identification name. Used for referring to item
note | object | creates the details block which is placed under the input, parameters: text- (string) the note's text, width - (number) the note area's width (get from input by default)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to check box
required | boolean | adds the [image] icon after the label marking the input as mandatory. Also, setting the attribute to true automatically assigns the "NotEmpty" validation rule to the input
readonly | boolean | true/false or 0/1 - specifies whether item's value can be changed by button click in browser (meanwhile, item's value can be changed programmatically anytime)
tooltip | string | creates the tooltip for the input label
value | string | the initial value of item
userdata | object | sets some user data for the input ("key:value" pairs)
var formData = [
    {type:"label", label: "Settings"},
    {type: "btn2state", label:"Auto-update the app",checked:true,
       info:true,required:true},
    {type: "btn2state", label: "Configure privacy settings", list:[
        {type: "btn2state", label: "Start when I start Windows"},
        {type: "btn2state", label: "Allow to be shown on the web"},
        {type: "btn2state", label: "Accept browser cookies", checked:true}
    ]}
];

Details

The control behaves itself as a checkbox but doesn't have any visual representation ( i.e. if you simply add it to the page the page will display nothing (it just adds an empty DIV).

To form the look of the control you should specify 4 css classes with the following names (the css classes will be applied to all controls of type bt2state):

  • .dhxform_obj_dhx_skyblue div.dhxform_img.btn2state_0 - applied when the item is enabled and not checked
  • .dhxform_obj_dhx_skyblue div.dhxform_img.btn2state_1 - applied when the item is enabled and checked
  • .dhxform_obj_dhx_skyblue div.disabled div.dhxform_img.btn2state_0 - applied when the item is disabled and not checked
  • .dhxform_obj_dhx_skyblue div.disabled div.dhxform_img.btn2state_1 - applied when the item is disabled and checked
.dhxform_obj_dhx_skyblue div.dhxform_img.btn2state_0 {
    background-image: url("imgs/toggle_off.png");
    width: 42px;
    height: 20px;
};
.dhxform_obj_dhx_skyblue div.dhxform_img.btn2state_1 {
    background-image: url("imgs/toggle_on.png");
    width: 42px;
    height: 20px;
};
.dhxform_obj_dhx_skyblue div.disabled div.dhxform_img.btn2state_0 {
    background-image: url("imgs/toggle_off_dis.png");
    width: 42px;
    height: 20px;
}
.dhxform_obj_dhx_skyblue div.disabled div.dhxform_img.btn2state_1 {
    background-image: url("imgs/toggle_on_dis.png");
    width: 42px;
    height: 20px;
}

formData = [
    {type: "btn2state", label: "Update the app automatically", checked: true},
        ...
]

To set the look of just a specific bt2state instance you should use the cssName attribute.

In this case, CSS classes must have the following names:

  • .dhxform_obj_dhx_skyblue div.dhxform_img.[cssName]_0
  • .dhxform_obj_dhx_skyblue div.dhxform_img.[cssName]_1
  • .dhxform_obj_dhx_skyblue div.disabled div.dhxform_img.[cssName]_0
  • .dhxform_obj_dhx_skyblue div.disabled div.dhxform_img.[cssName]_1

Related sample: Button 2-State

Button

presents a standard button

Attributes

className | string | a user-defined css class for an item
disabled | boolean | disables/enables the item
hidden | boolean | hides/shows the item. The default value - "false" (the item is shown)
inputLeft | number | sets the left absolute offset of control. The attribute is applied only if the *position* is set as "absolute"
inputTop | number | sets the top absolute offset of control. The attribute is applied only if the *position* is set as "absolute"
name | string | the identification name. Used for referring to item
offsetLeft | number | sets the left relative offset of item
offsetTop | number | sets the top relative offset of item
tooltip | string | creates the tooltip for the control label
value | string | the text label of button
width | number | the button's width
userdata | object | sets some user data for the control "key:value" pairs)
var formData = [
    {type: "label", label: "Protocols"},
    {type: "checkbox", name: "ssl", label: "Use SSL 3.0", checked:true},
    {type: "checkbox", name: "tls", label: "Use TLS 1.0", checked:true},
    {type: "button", name: "btn", value: "Save Changes"}
];

Related sample: Button

Calendar

dhtmlxCalendar integration. Presents date field with a pop-up calendar.

Please note, in order to use the calendar item you must include 2 files:

<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Using dhtmlxCalendar API

To use the dhtmlxCalendar API for the item, get the calendar object as in:

var dhxCalendar = myForm.getCalendar("myCalendar");
...
dhxCalendar.showTime();

Attributes

calendarPosition | string | bottom/right - sets the position pop-up calendar will appear from. The default value is bottom
className | string | the user-defined css class for item
dateFormat | string | sets format of date presentation in input (see available format characters in setCalendarDateFormat)
disabled | boolean | disables/enables the item
enableTime | boolean | defines whether time manage elements will be presented at the bottom of the calendar
enableTodayButton | boolean | defines whether the Today and Clear buttons will be displayed at the bottom of the calendar
hidden | boolean | hides/shows the item. The default value - "false" (the item is shown)
info | boolean | adds the [image] icon after the input label (related event onInfo)
inputHeight | string|number | the height of input. The default value is "auto"
inputLeft | number | sets the left absolute offset of input.The attribute is applied only if the *position* is set as "absolute"
inputTop | number | sets the top absolute offset of input. The attribute is applied only if the *position* is set as "absolute"
inputWidth | string|number | the width of input. The default value is "auto"
label | string | the text label of item
labelAlign | left | right or center, the alignment of a label within the defined width
labelHeight | string|number | the height of a label. The default value is "auto"
labelLeft | number | sets the left absolute offset of a label. The attribute is applied only if the *position* is set as "absolute"
labelTop | number | sets the top absolute offset of a label. The attribute is applied only if the *position* is set as "absolute"
labelWidth | string|number | the width of a label. The default value is "auto"
minutesInterval | number | 1/5/10/15 - the time interval (in minutes) for the predefined values in the time selector. The default value is 5
name | string | the identification name. Used for referring to item
note | object | creates the details block which is placed under the input, parameters: text- (string) the note's text, width - (number) the note area's width (get from input by default)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to input
readonly | boolean | true/false or 0/1 - specifies whether item's value can be changed by typing in the input (you are still able to set the value by clicking on the calendar icon). Can be used to exclude the possibility of entering incorrect values
required | boolean | adds the [image] icon after the label marking the input as mandatory. Also, setting the attribute to "true" automatically assigns the 'NotEmpty' validation rule to the input
serverDateFormat | string | the format in which the date is stored on server (see available format characters setCalendarDateFormat)
showWeekNumbers | boolean | enables/disables an additional left column with weeks' numbers. By default, *false*
tooltip | string | creates the tooltip for the input label
validate | function | predefined rule or custom function - sets the validation rule. See details in the chapter Validation
value | string | the initial value of item
weekStart | number | from 1 to 7 - sets the start day of a week. '1' relates to Monday and '7' to Sunday.
userdata | object | sets some user data for the input "key:value" pairs)
var formData = [
    {
        type: "calendar",
        name: "start_date",
        label: "Start Date",
        enableTime: true,
        enableTodayButton: true,
        calendarPosition: "right"
    },
    {type: "calendar", name: "end_date", label: "End Date", dateFormat: "%Y-%m-%d"}
];

Related sample: dhtmlxCalendar

Checkbox

presents a standard check box

Attributes

checked | boolean | defines whether or not checkbox will be checked initially. The default value is "false"
className | string | the user-defined css class for item
disabled | boolean | disables/enables the item
hidden | boolean | hides/shows the item. The default value - "false" (the item is shown)
info | boolean | adds the [image] icon after the input label (related event - onInfo)
inputLeft | number | sets the left absolute offset of input. The attribute is applied only if the *position* is set as "absolute"
inputTop | number | sets the top absolute offset of input. The attribute is applied only if the *position* is set as "absolute"
label | string | the text label of item
labelAlign | string | left/right/center - the alignment of label within the defined width
labelHeight | string|number | the height of DIV where the label is placed (not the font size). The default value is "auto"
labelLeft | number | sets the left absolute offset of label. The attribute is applied only if the *position* is set as "absolute"
labelTop | number | sets the top absolute offset of label. The attribute is applied only if the *position* is set as "absolute"
labelWidth | string|number | the width of label. The default value is "auto"
list | array | defines the array of nested elements
name | string | the identification name. Used for referring to item
note | object | creates the details block which is placed under the input, parameters: text- (string) the note's text, width - (number) the note area's width (get from input by default)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left, label-right, label-top or absolute, defines the position of label relative to check box
required | boolean | adds the [image] icon after the label marking the input as mandatory. Also, setting the attribute to "true" automatically assigns the 'NotEmpty' validation rule to the input
readonly | boolean | true/false or 0/1 - specifies whether item's value can be changed by button click in browser (meanwhile, item's value can be changed programmatically anytime)
tooltip | string | creates the tooltip for the input label
value | string | the initial value of item
userdata | object | sets some user data for the input "key:value" pairs)
var formData = [
    {type: "checkbox", label: "Show gutter", checked: true, list:[
        {type:"checkbox", name:"ch1", value:"r1", label:"Line numbers", checked:true},
        {type:"checkbox", name:"ch2", value:"r2", label:"Line selection area",
            checked:true}
    ]},
    //
    {type "label", label:"Mouse"},
    {type:"checkbox", label:"Drag-n-drop in text area", checked: true},
    {type:"checkbox", label:"Double-click drag joins non-alphanumeric characters",
        checked: true},
    {type:"checkbox", label:"Quick copy using middle mouse button"},
];

Related sample: Checkbox/Radio button

Colorpicker

dhtmlxColorPicker integration. A data field with a pop-up colorPicker.

Please note, in order to use the colorpicker item you must include 2 files:

<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Using dhtmlxColorpicker API

To use the dhtmlxColorpicker API for the item, get the colorpicker object as in:

var dhxColorPicker = myForm.getColorPicker("myPicker");
...
dhxColorPicker.hide();

Attributes

className | string | the user-defined css class for item
cpPosition | string | the colorpicker's position (right/bottom)
disabled | boolean | disables/enables the item
enableCustomColors | boolean | sets custom colors (specified in the customColors parameter) for the item. The default value - "false"
customColors | string | a comma-separated list of custom colors that will be used in the colorpicker if the enableCustomColors parameter is set to "true"
hidden | boolean | hides/shows the item. The default value - "false" (the item is shown)
info | boolean | adds the [image] icon after the input label (related event - onInfo)
inputHeight | string|number | sets input height. The default value is "auto"
inputLeft | number | the left absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputTop | number | the top absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputWidth | string|number | sets input width. The default value is "auto"
label | string | the text label of item
labelAlign | string | left/right/center - the alignment of label within the defined width
labelHeight | string|number | the height of label. The default value is "auto"
labelLeft | number | the left absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelTop | number | the top absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelWidth | string|number | the width of label. The default value is "auto"
name | string | the identification name. Used for referring to item
note | object | creates the details block which is placed under the input, parameters: text- (string) the note's text, width - (number) the note area's width (get from input by default)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to input
readonly | boolean | true/false or 0/1 - specifies whether item's value can be changed by typing in the input (you are still able to set the value by clicking on the colorpicker icon). Can be used to exclude the possibility of entering incorrect values
required | boolean | adds the [image] icon after the label marking the input as mandatory. Also, setting the attribute to "true" automatically assigns the 'NotEmpty' validation rule to the input
tooltip | string | creates the tooltip for the input label
validate | function | predefined rule or custom function, sets the validation rule. See details in the chapter Validation
value | string | the initial value of item
userdata | object | sets some user data for the input "key:value" pairs)
var formData = [
    {type: "colorpicker", name: "Color", label: "Color:", value: "#2a87eb",
        enableCustomColors:"1", customColors:"#ff9f29,#a3ff2b,#57cdff,#fb26ff,#9f96ff"},
    {type: "colorpicker", name: "Background", label: "Background:", value: "#6eea11"}
];

Related sample: dhtmlxColorPicker

Combo

dhtmlxCombo integration. Presents a normal combo box.

Please note, in order to use the combo item you must include 2 files:

<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Form supports combo nesting, i.e. you can set different items for different options. Subject to the selected option - the appropriate set of items will be shown.

Using dhtmlxCombo API

To use the dhtmlxCombo API for the item, get the combo object as in:

var dhxCombo = myForm.getCombo("myCombo");
...
dhxCombo.attachEvent("onChange", function(){});

Attributes

className | string | the user-defined css class for item
connector | url | allows loading select options of the item from database. See details in Combo Specific HowTos.
comboType | string | "checkbox" or "image" - allows adding check boxes or images to combo's items
disabled | boolean | disables/enables the item
hidden | boolean | hides/shows the item. The default value - "false" (the item is shown)
info | boolean | adds the [image] icon after the item label (related event - onInfo)
inputLeft | number | sets the left absolute offset of input.The attribute is applied only if the "position" is set as "absolute"
inputTop | number | sets the top absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputWidth | string|number | the width of input. The default value is "auto"
filtering | boolean | switches on the filtering mode (when a user starts to type, combo suggests matching search results). The default value is "false"
label | string | the text label of item
labelAlign | string | left/right/center - the alignment of label within the defined width
labelHeight | string|number | the height of label. The default value is "auto"
labelLeft | number | sets the left absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelTop | number | sets the top absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelWidth | string|number | the width of label. The default value is "auto"
name | string | the identification name. Used for referring to item
note | object | creates the details block which is placed under the input, parameters: text- (string) the note's text, width - (number) the note area's width (get from input by default)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
options | object | specifies select options of item, parameters: list - (array) defines the array of nested elements, selected - (boolean) defines whether the option will be selected initially, text- (string) the option's text, value - (string) the option's id
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to input
readonly | boolean | true/false or 0/1 - specifies whether the value of the item can be changed by button click in browser (meanwhile, the value can be changed programmatically anytime)
required | boolean | adds the [image] icon after the label marking the field as mandatory. Also, setting the attribute to "true" automatically assigns the 'NotEmpty' validation rule to the field
tooltip | string | creates the tooltip for the item label
validate | function | predefined rule or custom function - sets the validation rule. See details in the chapter Validation
value | string | the initial value of item
userdata | object | sets some user data for the item "key:value" pairs)
var formData = [
    {type: "combo", label: "Format", name: "format", options:[
        {text: "AAC", value: "AAC"},
        {text: "AC3", value: "AC3", selected: true},
        {text: "MP3", value: "MP3"},
        {text: "FLAC", value: "FLAC"}
    ]},
    {type: "combo", label: "Bitrate", name: "a_bitrate", options:[
        {text: "128 kbps", value: "128"},
        {text: "160 kbps", value: "160"},
        {text: "256 kbps", value: "256"},
        {text: "320 kbps", value: "320", selected: true},
        {text: "448 kbps", value: "448"}
    ]},
];

XML format for connector attribute and reloadOptions() method

<complete>
    <option value="value_a">text</option>
    <option value="value_b" selected="true">new text</option>
    ...
</complete>

Related sample: dhtmlxCombo

Container

presents a simple HTML container where you can place any content

Attributes

className | string | the user-defined css class for item
hidden | boolean | hides/shows the item. The default value - "false" (the item is shown)
info | boolean | adds the [image] icon after the input label (related event - onInfo)
inputHeight | string|number | the height of input. The default value is "auto"
inputWidth | string|number | the width of input. The default value is "auto"
inputLeft | number | sets the left absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputTop | number | sets the top absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
label | string | the text label of item
labelLeft | number | sets the left absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelTop | number | sets the top absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
name | string | the identification name. Used for referring to item
note | object | creates the details block which is placed under the input, parameters: text- (string) the note's text, width - (number) the note area's width (get from input by default)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to input
required | boolean | adds the [image] icon after the label marking the input as mandatory. Also, setting the attribute to _true_ automatically assigns the 'NotEmpty' validation rule to the input
style | string | specifies css style that will be applied to the input
tooltip | string | creates the tooltip for the input label
userdata | object | sets some user data for the input "key:value" pairs)
var formData = [
    {
        type:"container",
        name:"myGrid",
        label:"Select Product",
        inputWidth:330,
        inputHeight:200
    }
];

Details

The main use case of the control is integration with the DHTMLX components.

  • components are initialized as usual with the only difference is that they use the container control as a DIV container.
  • the getContainer() method returns an HTMLDivElement object of the control.

For example, to integrate dhtmlxGrid with the form:

var formData = [
    {
        type:"container",
        name: "myGrid",
        label: "Select Product",
        inputWidth: 330,
        inputHeight: 200
    }
];
var myForm = new dhtmlXForm("myForm", formData);

grid = new dhtmlXGridObject(myForm.getContainer("myGrid"));

Related events:

  • onEnable - fires when the control is enabled after being disabled
  • onDisable - fires when the control is disabled after being enabled

Related sample: Attach Grid to Form / Container

Editor

dhtmlxEditor integration. Presents text editor.

Please note, in order to use the editor item you must include 2 files:

<link type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Using dhtmlxEditor API

To use the dhtmlxEditor API for the item, get the editor object as in:

var dhxEditor = myForm.getEditor("myEditor");
...
dhxEditor.alignCenter();

Attributes

className | string | the user-defined css class for item
disabled | boolean | disables/enables the item
hidden | boolean | hides/shows the item. The default value - false (the item is shown)
info | boolean | adds the [image] icon after the item label (related event - onInfo)
inputHeight | string|number | sets the height of input. The default value is auto
inputLeft | number | the left absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputTop | number | the top absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputWidth | string|number | sets the width of input. The default value is auto
label | string | the text label of item
labelAlign | string | left/right/center - the alignment of label within the defined width
labelHeight | string|number | the height of label. The default value is auto
labelLeft | number | the left absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelTop | number | the top absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelWidth | string|number | the width of label. The default value is auto
name | string | the identification name. Used for referring to item
note | object | creates the details block which is placed under the input, parameters: text- (string) the note's text, width - (number) the note area's width (get from input by default)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to input
required | boolean | adds the [image] icon after the label marking the field as mandatory. Also, setting the attribute to true automatically assigns the 'NotEmpty' validation rule to the field
tooltip | string | creates the tooltip for the item label
validate | function | predefined rule or custom function - sets the validation rule. See details in the chapter Validation
value | string | the initial value of item
userdata | object | sets some user data for the item ("key:value" pairs)
var formData = [
    {type:'editor', name:'Description', label:'Description:', labelWidth:90,
      labelLeft:-4, labelTop:112, inputWidth:300, inputLeft:97, inputTop:110,
        position:'absolute', labelAlign:'right', inputHeight:124, value:"Hello,Editor!"}
];

Creating long editor toolbar

If you want to create a long toolbar for Editor, you need to use 2 more properties:

  • toolbar - (boolean) true/false to enable/disable toolbar
  • iconsPath - (string) path to toolbar icons, they should be placed in the folder with Editor images ("../dhtmlxEditor/codebase/imgs/")

Related sample: dhtmlxEditor

Fieldset

presents a standard fieldset that allows combining several sense-connected items.

Attributes

className | string | the user-defined css class for fieldset's items
disabled | boolean | disables/enables the fieldset's items
hidden | boolean | hides/shows the item. The default value - false (the item is shown)
inputLeft | number | sets the left absolute offset of input.The attribute is applied only if the "position" is set as "absolute"
inputTop | number | sets the top absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
label | string | the text label of item (legend)
list | array | defines the array of nested elements
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to fieldset. As just labels are defined for fieldset,
width | number | the width of fieldset
userdata | object | sets some user data for the item ("key:value" pairs)
var formData = [
    {type: "fieldset",  name: "mydata", label: "Advanced Settings", width:180, list:[
        {type:"settings", position:"label-right"},
        {type: "checkbox", name: "vsync", label: "VSync", checked: "1"},
        {type: "checkbox", name: "mouse_invert", label: "Swap Mouse Buttons"},
        {type:"checkbox", name:"custom_cursor", label:"Custom Mouse Cursor",
          checked:"0", list:[
            {type:"radio", name:"cursor_value", value:"dot", label:"Dot", checked:"1"},
            {type:"radio", name:"cursor_value", value:"cross",  label:"Cross"},
            {type:"radio", name:"cursor_value", value:"circle", label:"Circle"},
            {type:"radio", name:"cursor_value", value:"triangle", label:"Triangle"}
        ]}
    ]}
];

Related sample: Fieldset

File

(Deprecated) presents a file upload item.

Attributes

className | string | the user-defined css class for item
disabled | boolean | disables/enables the item
hidden | boolean | hides/shows the item. The default value - false (the item is shown)
info | boolean | adds the [image] icon after the input label (related event - onInfo)
inputLeft | number | sets the left absolute offset of input.The attribute is applied only if the "position" is set as "absolute"
inputTop | number | sets the top absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
label | string | the text label of item
labelAlign | string | left/right/center - the alignment of label within the defined width
labelHeight | string|number | the height of label. The default value is "auto"
labelLeft | number | sets the left absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelTop | number | sets the top absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelWidth | string|number | the width of label. The default value is "auto"
name | string | the identification name. Used for referring to item
note | object | creates the details block which is placed under the input, parameters: text- (string) the note's text, width - (number) the note area's width (get from input by default)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to input
required | boolean | adds the [image] icon after the label marking the input as mandatory. Also, setting the attribute to true automatically assigns the 'NotEmpty' validation rule to the input
tooltip | string | creates the tooltip for the input label
userdata | object | sets some user data for the input ("key:value" pairs)
var formData = [
    {type: "file", name: "caret", label: "Preview", position:"label-top"},
    {type: "file", name: "caret", label: "Full-size image", position:"label-top"}
];

How to use

  • Create a real html form (this form should be "around" dhtmlxForm):
<form id="realForm" method="POST" enctype="multipart/form-data">
    <div id="dhxForm">

    </div>
</form>
  • Put the dhtmlxForm instance inside the real form, attach a callback to a dhtmlxForm button (or the 'submit' button of the real form) and submit the real form manually:
var formData = [
    {type: "file", name: "my_file", ...},
    {type: "button", name: "upload", value: "Upload"}
];

var myForm = new dhtmlXForm("dhxForm", formData);
myForm.attachEvent("onButtonClick", function(id){
    if (id == "upload") {
        document.getElementById("realForm").submit();
    }
});

function myCallBack(state, fileName, fileSize) {
    // see below what is this needed for
};

  • Upload files without page reloading:

    • Create a hidden iframe on your page like the one shown below:
<iframe name="upload_area" frameBorder="0" height="0"></iframe>
  • Set the "target" attribute of your real form to the name of the iframe, i.e. "upload_area". In this case, the form will be submitted into the iframe and the page won't be reloaded. The myCallBack() function can be called as in:
<?php
// move_uploaded_file() and other code here
// print result
print_r("<SCRIPT>parent.myCallBack(true, 'filename.rar', '234123')</SCRIPT>");
?>

Hidden

A hidden text field (invisible for users). Presents original input type=hidden.

Attributes

name | string | the identification name. Used for referring to item
value | string | the initial value of item
userdata | object | sets some user data for the input ("key:value" pairs)

Usage of value is optional, but without this attribute hidden doesn't make any sense.

var formData = [
    {type: "hidden", name:"topField", value:"1"}
];

Image

presents an image with the ability to upload a new one

Attributes

className | string | the user-defined css class for item
disabled | boolean | disables/enables the item
hidden | boolean | hides/shows the item. The default value - false (the item is shown)
info | boolean | adds the [image] icon after the input label (related event - onInfo)
inputHeight | string|number | the height of input. The default value is "auto"
inputLeft | number | sets the left absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputTop | number | sets the top absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputWidth | string|number | the width of input. The default value is "auto"
label | string | the text label of item
labelAlign | string | left/right/center - the alignment of label within the defined width
labelHeight | string|number | the height of DIV where the label is placed (not the font size). The default value is "auto"
labelLeft | number | sets the left absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelTop | number | sets the top absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelWidth | string|number | the width of label. The default value is "auto"
name | string | the identification name. Used for referring to item
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to input
style | string | specifies css style that will be applied to the input
tooltip | string | creates the tooltip for the input label
value | string | the initial value of an item
userdata | object | sets some user data for the input "key:value" pairs)
url | string | server side script (see the details below)
imageWidth | number | the width of the image (image will be centered within inputWidth)
imageHeight | number | the height of the image (image will be centered within inputHeight)

To initialize an item as a part of Form, you need to specify at least the type, name and url params (if you omit the name property Form will generate it automatically).

{
    type: "image",
    name: "user_photo",
    url:  "some.php",
    imageWidth: 126,
    imageHeight: 126,
    inputWidth: 130,
    inputHeight: 130
}

Rendering an item

If you set an item value or the whole form data in the following way:

myForm.setItemValue("user_photo", "avatar.jpg");
// or
myForm.setFormData({user_photo: "avatar.jpg"});

The GET request will be performed by Form to get image source from the server:

some.php?action=loadImage&itemId=user_photo&itemValue=avatar.jpg&dhxr1441638923235=1

You can turn off the dhxr param by setting window.dhx.ajax.cache=true (see cache for details).

An example of server response:

if (@$_REQUEST["action"] == "loadImage") {

    // load any default image
    $i = "empty_user.jpg";

    // check if requested image exists
    $k = "uploaded/".md5($_REQUEST["itemValue"]);
    if (file_exists($k)) $i = $k;

    // output image
    header("Content-Type: image/jpg");
    print_r(file_get_contents($i));

}

The above code will load a custom image (if it was previously uploaded to server) or just load the default 'empty_user.jpg' image which will notify the user about missing image.

Uploading an image

When the user clicks to upload an image, selects the needed image and presses "open" in the browser dialog box, uploading will start automatically.

The POST request will be performed by the form with the following parameters:

action=uploadImage
itemId=user_photo
file=file data here

The form waits for the following response:

{
    state: true,                // true if the file uploaded successfully
    itemId: 'user_photo',       // item name
    itemValue: 'item_value',    // value to set via setItemValue() after upload
    extra: {any data here}      // optional data for uploading ok/fail events
}

A server side script example:

if (@$_REQUEST["action"] == "uploadImage") {

    $k = md5($_FILES["file"]["filename"]);

    // make sure you added security checks for $k variable here
    @unlink("uploaded/".$k);

    // and here...
    move_uploaded_file($_FILES["file"]["tmp_name"], "uploaded/".$k);

    header("Content-Type: text/html; charset=utf-8");
    print_r("{state: true, itemId: '".@$_REQUEST["itemId"]."', itemValue: '".$k."'}");

}

After the form got the response, it will call the onImageUploadSuccess or onImageUploadFail events. If the file was uploaded successfully, the form will also update the image by calling the URL with the returned itemValue parameter.

// correctly
myForm.attachEvent("onImageUploadSuccess", function(name, value, extra){
    // your code here
});

// fires when an image was uploaded incorrectly
myForm.attachEvent("onImageUploadFail", function(name, extra){
    // your code here
});

Input/Textarea

presents a standard text input field or a textarea. To define textarea, use the attribute rows (see details below).

Attributes

className | string | the user-defined css class for item
disabled | boolean | disables/enables the item
hidden | boolean | hides/shows the item. The default value - "false" (the item is shown)
info | boolean | adds the [image] icon after the input label (related event - onInfo)
inputHeight | string|number | the height of input. The default value is "auto"
inputLeft | number | sets the left absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputTop | number | sets the top absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputWidth | string|number | the width of input. The default value is "auto"
label | string | the text label of item
labelAlign | string | left/right/center, the alignment of label within the defined width
labelHeight | string|number | the height of DIV where the label is placed (not the font size). The default value is "auto"
labelLeft | number | sets the left absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelTop | number | sets the top absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelWidth | string|number | the width of label. The default value is "auto"
maxLength | number | the max number of characters that can be entered in input
name | string | the identification name. Used for referring to item
numberFormat | string|array | sets the format of numeric data (see details below)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to input
readonly | boolean | true/false or 0/1, specifies whether item's value can be changed by button click in browser (meanwhile, item's value can be changed programmatically anytime).
required | boolean | adds the [image] icon after the label marking the input as mandatory. Also, setting the attribute to _true_ automatically assigns the 'NotEmpty' validation rule to the input
rows | number | used to present textarea (instead of a single input) of the specified height see details below)
style | string | specifies css style that will be applied to the input
tooltip | string | creates the tooltip for the input label
validate | function | predefined rule or custom function - sets the validation rule. See details in the chapter (Validation)
value | string | the initial value of an item
userdata | object | sets some user data for the input "key:value" pairs)
var formData = [
    {type:"input",name:"prj_name",label:"Project Name",value:"Project1",
       tooltip:"Enter Name",required:true, info:true,
       note:{text:"Enter project name.The fields are required."}},
    {type:"input",name:"prj_descr",label:"Project Description",
       value:"Project is great!", rows:3,
       note:{text:"Describe your project's basic purposes.The fields are optional."}}
];

"textarea" details

Generally, to turn a standard input to textarea you should set attribute rows.

Note, the attribute doesn't specify the number of rows, it specifies the initial height of the control, calculated by the formula: 35px + (rows-1)16px . For example, rows:3 means that the height of your textarea will be 35+216 = 67px.

To set any random value for the height, use rows in pair with attribute style. In this case, rows can be set to any value (but it must be specified anyway!) while the style attribute must specify the desired height.

{type: "input", label: "Details", rows:3, style:"width:200px;height:200px;"}

Number formats

To set format of numeric data you should use the attribute numberFormat.

For JSON data you should use the following syntax:

  • numberFormat: "format";
  • numberFormat: ["format", "groupSep", "decSep"].
    • groupSep - a mark that will be used to divide numbers with many digits into groups. By default - '.' (dot);
    • decSep - a mark that will be used as the decimal delimiter. By default - ',' (comma).
formData = [
   {type:"input", name:"inp1", label:"Format: 0,000.00",  numberFormat:"0,000.00"},
   {type:"input", name:"inp2", label:"Format: @ 0,00",    numberFormat:["@ 0,00",":"]},
   {type:"input", name:"inp3", label:"Format: $ 0.00",
      numberFormat:["$ 0,000.00",",","."]},
   {type:"input", name:"inp4", label:"Format: 0,000 Rub",
      numberFormat:["0,000 Rub","'"]}
];

In XML format_ you can use the following attributes:

  • numberFormat="format";
  • groupSep="group_sep";
  • decSep="dec_sep".
<?xml version="1.0" encoding="UTF-8"?>
<items>
   <item type="input" label="Sales" numberFormat="$ 0,000.00" groupSep="'" decSep='.'/>
</items>

Out of the constructor, you can set the format by calling the setNumberFormat() method.

Related sample: Text/Select/Password

Label

presents a text label.

Attributes

className | string | the user-defined css class for item
disabled | boolean | disables/enables the item
hidden | boolean | hides/shows the item. The default value - false (the item is shown)
label | string | the text label of item
labelHeight | string|number | the height of label. The default value is "auto"
labelLeft | number | sets the left absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelTop | number | sets the top absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelWidth | string|number | the width of label. The default value is "auto"
name | string | the identification name. Used for referring to item
offsetLeft | number | sets the left relative offset of item
offsetTop | number | sets the top relative offset of item
userdata | object | sets some user data for the input ("key:value" pairs)
var formData = [
    {type: "label", label: "Caret"},
    {type: "radio", name: "caret", label: "Blinking", checked: true,
       position:"label-right"},
    {type: "radio", name: "caret", label: "Block", position:"label-right"},
    {type: "radio", name: "caret", label: "Thick", position:"label-right"}
];

Related sample: Text/Select/Password

Multiselect

presents a multi-select list box.

Attributes

className | string | the user-defined css class for item
connector | url | allows to load select options of the item from database. See details (SelectOptionsConnector)
disabled | boolean | disables/enables the item
hidden | boolean | hides/shows the item. The default value - false (the item is shown)
info | boolean | adds the [image] icon after the input label (related event - onInfo)
inputHeight | string|number | the height of input. The default value is "auto"
inputLeft | number | sets the left absolute offset of input. The attribute is applied only if the *position* is set as "absolute"
inputTop | number | sets the top absolute offset of input. The attribute is applied only if the *position* is set as "absolute"
inputWidth | string|number | the width of input. The default value is "auto"
label | string | the text label of item
labelAlign | string | left/right/center - the alignment of label within the defined width
labelHeight | string|number | the height of label. The default value is "auto"
labelLeft | number | sets the left absolute offset of label. The attribute is applied only if the *position* is set as "absolute"
labelTop | number | sets the top absolute offset of label. The attribute is applied only if the *position* is set as "absolute"
labelWidth | string|number | the width of label. The default value is "auto"
name | string | the identification name. Used for referring to item
note | object | creates the details block which is placed under the input, parameters: text- (string) the note's text, width - (number) the note area's width (get from input by default)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
options | object | specifies select options of item, parameters: selected - (boolean) defines whether the option will be selected initially, text- (string) the option's text, value - (string) the option's id
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to input
required | boolean | adds the [image] icon after the label marking the input as mandatory. Also, setting the attribute to true automatically assigns the 'NotEmpty' validation rule to the input
size | number | sets the number of lines in the item (the height of the list box)
style | string | specifies css style of item
tooltip | string | creates the tooltip for the input label
userdata | object | sets some user data for the input ("key:value" pairs)
var formData = [
    {
      type:"multiselect",
      label:"Can create/edit/delete users:",
      inputHeight:90,
      inputWidth:130,
      options:[
        {text: "Administrators", value: "Option 1", selected: true},
        {text: "Power users", value: "Option 2", selected: true},
        {text: "Registered users", value: "Option 3"},
        {text: "Guests", value: "Option 4"},
        {text: "All users", value: "Option 5"},
    ]}
];

XML format for attribute and reloadOptions() method

<data>
    <item value="value_a" label="text"/>
    <item value="value_b" label="new text" selected="true"/>
    ...
</data>

//in case of loading data using 'myForm.load()':
<data>
    <name>value1,value2,valueN</name>
</data>

Details

To validate a multiselect field you should define a custom validation logic. You can't use a standard validation as it works ONLY with string values and the item operates with arrays.

Newcolumn

allows creating a new column of items.

Attributes

offset number sets the distance between columns

Just write

{type:"newcolumn"}

and all further items will be placed into next column. In such way you can create any number of columns.

var formData = [
        {type:"settings", position:"label-right"},
        {type: "label", label: "Content"},
        {type: "checkbox", label: "Block pop-up windows", checked: true},
        {type: "checkbox", label: "Load images automatically", checked: true},
        {type: "checkbox", label: "Enable JavaScript", checked: true},
        {type: "newcolumn", offset:20},
        {type: "label", label: "History"},
        {type: "checkbox", label: "Remember by browsing history", checked: true},
        {type: "checkbox", label: "Remember download history", checked: true},
        {type: "checkbox", label: "Remember search and form history", checked: true}
];

If you had defined "newcolumn" but the items didn't split, please, check the width of your form's container. Most probably, the container doesn't have enough width to place items into 2 columns.

Related sample: New column

Password

presents a field where all the entered characters are shown as asterisks.

Attributes

className | string | the user-defined css class for item
disabled | boolean | disables/enables the item
hidden | boolean | hides/shows the item. The default value - false (the item is shown)
info | boolean | adds the [image] icon after the input label (related event - onInfo)
inputHeight | string|number | the height of input. The default value is "auto"
inputLeft | number | sets the left absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputTop | number | sets the top absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputWidth | string|number | the width of input. The default value is "auto"
label | string | the text label of item
labelAlign | string | left/right/center - the alignment of label within the defined width
labelHeight | string|number | the height of label. The default value is "auto"
labelLeft | number | sets the left absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelTop | number | sets the top absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelWidth | string|number | the width of label. The default value is "auto"
maxLength | number | the max number of characters that can be entered in input
name | string | the identification name. Used for referring to item
note | object | creates the details block which is placed under the input, parameters: text- (string) the note's text, width - (number) the note area's width (get from input by default)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to input
readonly | boolean | true/false or 0/1 - specifies whether item's value can be changed by button click in browser (meanwhile, item's value can be changed programmatically anytime)
required | boolean | adds the [image] icon after the label marking the input as mandatory. Also, setting the attribute to true automatically assigns the 'NotEmpty' validation rule to the input
style | string | specifies css style of item
tooltip | string | creates the tooltip for the input label
validate | function | predefined rule or custom function - sets the validation rule. See details in the chapter Validation
value | string | the initial value of item
userdata | object | sets some user data for the input ("key:value" pairs)
var formData = [
    {type: "settings", position: "label-left", labelWidth: 120, inputWidth: 120},
    //
    {type: "input", label: "Name", value: "John Smith"},
    {type: "password", label: "Password", value: "123"},
    {type: "select", label: "Session", options:[
        {value: "1", text: "Administration"},
        {value: "2", text: "Design"},
        {value: "3", text: "Manage Articles"}
    ]}
];

Related sample: Text/Select/Password

Radio

presents a standard radio button.

Attributes

checked | boolean | defines whether or not radio button will be checked initially. The default value is false
className | string | the user-defined css class for item
disabled | boolean | disables/enables the item
hidden | boolean | hides/shows the item. The default value - false (the item is shown)
info | boolean | adds the [image] icon after the input label (related event - onInfo)
inputLeft | number | sets the left absolute offset of radio button. The attribute is applied only if the "position" is set as "absolute"
inputTop | number | sets the top absolute offset of radio button. The attribute is applied only if the "position" is set as "absolute"
label | string | the text label of item
labelAlign | string | left/right/center - the alignment of label within the defined width
labelHeight | string|number | the height of label. The default value is "auto"
labelLeft | number | sets the left absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelTop | number | sets the top absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelWidth | string|number | the width of label. The default value is "auto"
list | array | defines the array of nested elements
name | string | the identification name. Used for referring to item. Specify the same "name" attribute to identify group of buttons in which just one radio button can be selected at the same time
note | object | creates the details block which is placed under the input, parameters: text- (string) the note's text, width - (number) the note area's width (get from input by default)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to radio button
readonly | boolean | true/false or 0/1 - specifies whether item's value can be changed by button click in browser (meanwhile, item's value can be changed programmatically anytime)
required | boolean | adds the [image] icon after the label marking the input as mandatory. Also, setting the attribute to true automatically assigns the 'NotEmpty' validation rule to the input
tooltip | string | creates the tooltip for the input label
value | string | the value of a radio button ( the identification name of a certain radio button in a group of buttons with the same "name" parameter)
userdata | object | sets some user data for the input ("key:value" pairs)
var formData = [
    {type:"radio", name:"font", value:"by_pages", label:"Use fonts defined by pages",
      checked:true, readonly:true},
    {type: "radio", name: "font", value: "custom", label: "Use custom font", list:[
        {type:"select", label:"Default Font", position:"label-left",
           labelWidth:"auto", inputWidth:"auto", options:[
            {value: "1", text: "Georgia"},
            {value: "2", text: "Sans"},
            {value: "3", text: "Tahoma", selected: true},
            {value: "4", text: "Trebuchet MS"},
            {value: "5", text: "Verdana"}
        ]},
        {type: "newcolumn"},
        {type: "select", label: "Size", position: "label-left", labelWidth: "auto",
          inputWidth: "auto", options:[
            {value: "8", text: "8"},
            {value: "9", text: "9"},
            {value: "10", text: "10"},
            {value: "11", text: "11"},
            {value: "12", text: "12"},
            {value: "13", text: "13"},
            {value: "14", text: "14", selected: true},
            {value: "15", text: "15"},
            {value: "16", text: "16"}
        ]}
    ]},
];

Related sample: Checkbox/Radio button

Select

presents a dropdown list.

Form supports select nesting, i.e. you can set different items for different options. Subject to the selected option - the appropriate set of items will be shown.

Attributes

className | string | the user-defined css class for item
connector | url | allows to load select options of the item from database. See details (SelectOptionsConnector)
disabled | boolean | disables/enables the item
hidden | boolean | hides/shows the item. The default value - false (the item is shown)
info | boolean | adds the [image] icon after the input label (related event - onInfo)
inputHeight | string|number | the height of input. The default value is "auto"
inputLeft | number | sets the left absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputTop | number | sets the top absolute offset of input. The attribute is applied only if the "position" is set as "absolute"
inputWidth | string|number | the width of input. The default value is "auto"
label | string | the text label of item
labelAlign | string | left, right or center - the alignment of label within the defined width
labelHeight | string|number | the height of label. The default value is "auto"
labelLeft | number | sets the left absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelTop | number | sets the top absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelWidth | string|number | the width of label. The default value is "auto"
name | string | the identification name. Used for referring to item
note | object | creates the details block which is placed under the input, parameters: text- (string) the note's text, width - (number) the note area's width (get from input by default)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
options | object | specifies select options of item, parameters: list - (array) defines the array of nested elements, selected - (boolean) defines whether the option will be selected initially, text- (string) the option's text, value - (string) the option's id
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to input
required | boolean | adds the [image] icon after the label marking the input as mandatory. Also, setting the attribute to true automatically assigns the 'NotEmpty' validation rule to the input
style | string | specifies css style of item
tooltip | string | creates the tooltip for the input label
userdata | object | sets some user data for the input ("key:value" pairs)
var formData = [
    {type:"radio", name:"type", label:"Guest login", labelWidth:"auto",
      position:"label-right",
      list:[
        {type: "select", label: "Account type", options:[
            {text: "Admin", value: "admin"},
            {text: "Organizer", value: "org"},
            {text: "Power User", value: "poweruser"},
            {text: "User", value: "user"}
        ]},
        {type: "checkbox", label: "Show logs window"}
    ]},
    {type: "button", value: "Proceed"}
];

XML format for attribute and reloadOptions() method

<data>
    <item value="value_a" label="text"/>
    <item value="value_b" label="new text" selected="true"/>
    ...
</data>

Related sample: Text/Select/Password

Settings

allows overriding some default form settings for items (placed at the beginning of data block).

For example, attribute position. You'd like to place labels of several items to left. You can specify position:"label-left" for each item or just put this stuff into settings item once.

In case you specify the same attribute in settings and item: setting's value will be ignored.

Attributes

blockOffset | number | the offset of the item content. For the Block only
inputHeight | string|number | sets the height of input. The default value is "auto"
inputWidth | string|number | sets the width of input. The default value is "auto"
labelAlign | string | left/right/center - the alignment of label within the defined width
labelHeight | string|number | sets the height of label. The default value is "auto"
labelWidth | string|number | sets the width of label. The default value is "auto"
noteWidth | string|number | sets the width of the details block (which is placed under the input)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to input
var formData = [
    {type:"settings",position:"label-left",labelWidth:120,inputWidth:120,
       labelAlign:"right"},
    {type: "input", label: "Name", value: "John Smith", labelAlign: "left"},
    {type: "password", label: "Password", value: "123", labelAlign: "center"},
    {type: "select", label: "Session", options:[
        {value: "1", text: "Administration"},
        {value: "2", text: "Design"},
        {value: "3", text: "Manage Articles"}
    ]}
];

Related sample: Settings

Template

allows setting any template to item. It can be some link, some text, another item, etc. Template is specified by the parameter format where you define the appropriate template handler.

Attributes

className | string | the user-defined css class for item
info | boolean | adds the [image] icon after the input label (related event - onInfo)
format | function | defines template handler. This function should return value (formatted by user) which will be inserted instead of input. Gets parameters - "name", "value"
hidden | boolean | hides/shows the item. The default value - false (the item is shown)
inputHeight | string|number | the height of input. The default value is "auto"
inputLeft | number | sets the left absolute offset of input.The attribute is applied only if the "position" is set as "absolute"
inputTop | number | sets the top absolute offset of input.The attribute is applied only if the "position" is set as "absolute"
inputWidth | string|number | the width of input. The default value is "auto"
label | string | the text label of item
labelAlign | string | left/right/center - the alignment of label within the defined width
labelHeight | string|number | the height of label. The default value is "auto"
labelLeft | number | sets the left absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelTop | number | sets the top absolute offset of label. The attribute is applied only if the "position" is set as "absolute"
labelWidth | string|number | the width of label. The default value is "auto"
name | string | the identification name. Used for referring to item
note | object | creates the details block which is placed under the input, parameters: text- (string) the note's text, width - (number) the note area's width (get from input by default)
offsetLeft | number | sets the left relative offset of item (both input and label)
offsetTop | number | sets the top relative offset of item (both input and label)
position | string | label-left/label-right/label-top/absolute - defines the position of label relative to input
required | boolean | adds the [image] icon after the label marking the input as mandatory. Also, setting the attribute to true automatically assigns the 'NotEmpty' validation rule to the input
style | string | specifies css style of item
tooltip | string | creates the tooltip for the input label
value | string | the initial value of item
userdata | object | sets some user data for the input ("key:value" pairs)
function doLink(name, value) {
    var f = this.getForm();
    return '<a href="script/do_edit.php?id='+value+'&t=abc">hello</a>';
}
var formData = [
    {type: "checkbox", label: "Accept cookies from sites", checked: true, list:[
        {type:"checkbox", label:"Accept third-party cookies", checked: true},
        {type:"select", label:"Keep until", inputWidth:"auto", position:"label-left",
          options:[
            {value: "1", text: "they expire", selected: true},
            {value: "2", text: "I close Firefox"},
            {value: "3", text: "ask me every time"}
        ]},
        {type:"template",name:"a",label:"Today:",value:"Hello",position:"label-left",
          format:doLink}
    ]}
]

Related sample: Template

Upload

An item that allows uploading multiple files and tracking the progress of individual file upload.

You can find specific methods and events of the Uploader control in the dhtmlXFileUploader API.

Attributes

Common attributes:

className | string | the user-defined css class for the item
hidden | boolean | hides/shows the item. The default value - false (the item is shown)
name | string | the identification name. Used for referring to the item
inputHeight | string|number | the height of the item. The default value is "auto"
inputWidth | string|number | the width of the item. The default value is "auto"
offsetLeft | number | sets the left relative offset of the item
offsetTop | number | sets the top relative offset of the item
disabled | boolean | disables/enables the item. The default value - false
userdata | object | sets some user data for the item ("key:value" pairs)

Uploader-related attributes:

mode | string | html5, html4, flash, sl - allows you to manually set the mode in use. Beware, once you set the mode manually, the control will work in this mode permanently independent of the browser you use
titleScreen | boolean | defines whether the initial screen (when no files are selected) must be displayed. The default value - true
titleText | string | the text of the initial screen. The default value - "Drag-n-Drop files here or click to select files for upload"
autoStart | boolean | defines whether files must be immediately loaded after selecting. The default value - false
autoRemove | boolean | defines whether files must be removed from the item after complete downloading. The default value - false

URL attributes:

url | string | the path to the server-side script (relative to the index file) which will parse the requests received from the uploader. Used in the html5/html4 modes
swfPath | string | the path to the uploader.swf file
swfUrl | string | the path to the server script file (relative to the client flash script file) which will parse the requests. Used in the flash mode

Silverlight-related attributes:

slXap | string | the path to the dhxupload.xap file (full path is required, i.e. including http://host..)
slUrl | string | the full path to the server script file

Controls

Details

The control can work in 4 modes:

  1. html5 (multiple files selecting, tracking the progress, loading by Ajax, d-n-d for selecting files, IE10, IE11, FF, Opera, Chrome)
  2. flash (multiple files selecting, tracking the progress, loading by Flash, any browser with flash installed)
  3. html4 (works as a standard HTML input upload control, IE6-IE9)
  4. sl (based on the Silverlight engine, experimental mode, IE)

By default, the item uses the html5 mode, then flash if html5 isn't supported. If both html5 and flash aren't supported - html4.
The sl mode can be invoked just manually.

How does the control work?

To provide the loading, the control uses a script that gets files to load. The same script is used in all modes but with slight differences.

Let's assume you have the folders tree as in:

where

  • samples/07_uploader/01_basic_init.html - the index file (currently selected).
  • samples/07_uploader/php/dhtmlxform_item_upload.php - the server script we use.

To understand how the control saves files on the server side, please check the 'dhtmlxform_item_upload.php' file in the dhtmlxForm package (resided in the directory: dhtmlxForm\samples\07_uploader\php\ )

html5/html4 modes

For html5/html4 modes it's quite enough to set the url parameter:

  • url - the path to the server script file "dhtmlxform_item_upload.php" relative to the index file "01_basic_init.html", in our case the path will be "php/dhtmlxform_item_upload.php"

flash mode

For the flash mode you must specify 2 parameters: swfPath, swfUrl

  • swfPath - the path to the client flash script file "uploader.swf" relative to the index file "01_basic_init.html", in our case the path will be "../../codebase/ext/uploader.swf"
  • swfUrl - the path to the server script file "dhtmlxform_item_upload.php" relative to the client flash script file "uploader.swf", in our case the path will be "../../samples/07_uploader/php/dhtmlxform_item_upload.php"

To provide correct running in all browsers you need to specify 3 parameters at a time.

formdata = [{
    type: "upload",
    name: "myFiles",
    url: "php/dhtmlxform_item_upload.php",
    swfPath: "../../codebase/ext/uploader.swf",
    swfUrl: "../../samples/07_uploader/php/dhtmlxform_item_upload.php"
}]

"sl" mode (loading with Silverlight)

Note, it's an experimental mode.

For the sl mode you can specify the next parameters:

  • slXap - the path to the client script file "dhxupload.xap" relative to the index file "01_basic_init.html", in our case the path will be "../../codebase/ext/dhxupload.xap";
  • slUrl - the full path to the server script file "dhtmlxform_item_upload.php".
formData = [{
   type: "upload",
   name: "myFiles",
   mode: "sl", // enables the sl mode
   url: "dhtmlxform_item_upload.php",
   slXap: "../../codebase/ext/dhxupload.xap",
   // FULL path is required
   slUrl:"http://localhost/dhtmlx/dhtmlxForm/samples/07_uploader/php/dhtmlxform_item_upload.php",
}];

Related samples: folder "samples/07_uploader"

Please, make sure that for the 'html4' mode you set the response content type to "text/html", while for the other modes - to "text/json" .

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXFileUploader API DHTMLX Docs

Documentation
  • dhtmlXFileUploader API
    • Methods
    • Events
Start Form List of Controls

dhtmlXFileUploader API

Methods
clear | clears the list of files
enableTitleScreen | enables/disables displaying the initial screen (when no files are selected)
getData | returns the list of already uploaded files
getStatus | returns the status of uploading
setAutoRemove | enables the mode in which files are immediately removed from the item after downloading has been completed
setAutoStart | enables the mode in which files are immediately loaded after selecting
setSLURL | sets the path to the server script file for silverlight mode
setSWFURL | sets the path to the server script file for flash mode
setTitleText | sets the text of the initial screen
setURL | sets the path to the server-side script
upload | starts uploading
Events
onBeforeClear | fires before the user clears the list of files to upload (clicks the button [image] )
onBeforeFileAdd | fires when the user adds a file to the upload queue
onBeforeFileRemove | fires before the user removes a single file from the list of files to upload (clicks the button [image] )
onBeforeFileUpload | fires before file uploading has started
onClear | when the user clears the list of files to upload (clicks on button [image] )
onFileAdd | fires when the user adds a file to the upload queue
onFileRemove | fires when the user removes single file from the list of files to upload (clicks the button [image] )
onUploadCancel | fires when the user cancels uploading of a file (clicks the button [image] ).
onUploadComplete | fires when all files from the list have been uploaded to the server
onUploadFail | fires when the file upload has failed
onUploadFile | fires when a single file from the list has been uploaded to the server
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • clear
    • enableTitleScreen
    • getData
    • getStatus
    • setAutoRemove
    • setAutoStart
    • setSLURL
    • setSWFURL
    • setTitleText
    • setURL
    • upload
  • Events
Start Form List of Controls dhtmlXFileUploader API

Methods

clear | clears the list of files
enableTitleScreen | enables/disables displaying the initial screen (when no files are selected)
getData | returns the list of already uploaded files
getStatus | returns the status of uploading
setAutoRemove | enables the mode in which files are immediately removed from the item after downloading has been completed
setAutoStart | enables the mode in which files are immediately loaded after selecting
setSLURL | sets the path to the server script file for silverlight mode
setSWFURL | sets the path to the server script file for flash mode
setTitleText | sets the text of the initial screen
setURL | sets the path to the server-side script
upload | starts uploading
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clear DHTMLX Docs

Documentation
  • clear
  • enableTitleScreen
  • getData
  • getStatus
  • setAutoRemove
  • setAutoStart
  • setSLURL
  • setSWFURL
  • setTitleText
  • setURL
  • upload
Start Form List of Controls dhtmlXFileUploader API Methods

clear

clears the list of files

void clear();

Example

var myUploader = myForm.getUploader(name);
myUploader.clear();
// the same will do setItemValue w/o params
myForm.setItemValue(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableTitleScreen DHTMLX Docs

Documentation
  • clear
  • enableTitleScreen
  • getData
  • getStatus
  • setAutoRemove
  • setAutoStart
  • setSLURL
  • setSWFURL
  • setTitleText
  • setURL
  • upload
Start Form List of Controls dhtmlXFileUploader API Methods

enableTitleScreen

enables/disables displaying the initial screen (when no files are selected)

void enableTitleScreen(boolean mode);

Parameters

mode boolean true/false to enable/disable the initial screen

Example

var myUploader = myForm.getUploader(name);
myUploader.enableTitleScreen(true);

Details

similar to the titleScreen parameter

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getData DHTMLX Docs

Documentation
  • clear
  • enableTitleScreen
  • getData
  • getStatus
  • setAutoRemove
  • setAutoStart
  • setSLURL
  • setSWFURL
  • setTitleText
  • setURL
  • upload
Start Form List of Controls dhtmlXFileUploader API Methods

getData

returns the list of already uploaded files

object getData();

Returns

object the list of already uploaded files

Example

var myUploader = myForm.getUploader(name);
var data1 = myUploader.getData();
// or
var data2 = myForm.getItemValue(name); // recommended, used in dp and set/get form data

Details

the returned list format is the following:

data1 = {
  id0:{
     realName: "..",
     serverName: "..."
  },
  id1: {...},
  ...
}

data2 = {
  myFiles_count: 2,
  myFiles_r_0: "electric_guitar-m101.jpg",
  myFiles_r_1: "electric-guitar.jpg",
  myFiles_s_0: "electric_guitar-m101.jpg",
  myFiles_s_1: "electric-guitar.jpg"
}

for data1:

  • id0,id1,.. - the inner id generated by the form (used just inside the form)
  • realName - the real name of the file (as it's displayed in the control)
  • serverName - the file name that the server returns after uploading (the server can return any value you will specify in it)

for data2:

  • (item's name)+“_count” - the count of uploaded files (item name “myFiles” is used for the code above)
  • (item's name)+“r”+(0..count-1) - the real name of the file
  • (item's name)+“s”+(0..count-1) - the file name that the server returns after uploading
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getStatus DHTMLX Docs

Documentation
  • clear
  • enableTitleScreen
  • getData
  • getStatus
  • setAutoRemove
  • setAutoStart
  • setSLURL
  • setSWFURL
  • setTitleText
  • setURL
  • upload
Start Form List of Controls dhtmlXFileUploader API Methods

getStatus

returns the status of uploading

number getStatus(string name);

Parameters

name string the item's name

Returns

number the status of uploading

Example

var status = myForm.getUploaderStatus(name);
// or
var myUploader = myForm.getUploader(name);
var status = myUploader.getStatus();

Details

the values of the uploading status are:

  • 0 - no files to upload
  • 1 - all files in the list were uploaded
  • -1 - not all files in the list were uploaded
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setAutoRemove DHTMLX Docs

Documentation
  • clear
  • enableTitleScreen
  • getData
  • getStatus
  • setAutoRemove
  • setAutoStart
  • setSLURL
  • setSWFURL
  • setTitleText
  • setURL
  • upload
Start Form List of Controls dhtmlXFileUploader API Methods

setAutoRemove

enables the mode in which files are immediately removed from the item after downloading has been completed

void setAutoRemove(boolean mode);

Parameters

mode boolean true/false to enable/disable auto removing

Example

var myUploader = myForm.getUploader(name);
myUploader.setAutoRemove(true);

Details

similar to the autoRemove parameter

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setAutoStart DHTMLX Docs

Documentation
  • clear
  • enableTitleScreen
  • getData
  • getStatus
  • setAutoRemove
  • setAutoStart
  • setSLURL
  • setSWFURL
  • setTitleText
  • setURL
  • upload
Start Form List of Controls dhtmlXFileUploader API Methods

setAutoStart

enables the mode in which files are immediately loaded after selecting

void setAutoStart(boolean mode);

Parameters

mode boolean true/false to enable/disable auto start of loading

Example

var myUploader = myForm.getUploader(name);
myUploader.setAutoStart(true);

Details

similar to the autoStart parameter

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSLURL DHTMLX Docs

Documentation
  • clear
  • enableTitleScreen
  • getData
  • getStatus
  • setAutoRemove
  • setAutoStart
  • setSLURL
  • setSWFURL
  • setTitleText
  • setURL
  • upload
Start Form List of Controls dhtmlXFileUploader API Methods

setSLURL

sets the path to the server script file for silverlight mode

void setSLURL(string slUrl);

Parameters

slUrl string full path to the server script

Example

// on init state
var myForm = new dhtmlXForm("parentId", [
    {
        type:   "upload",
        name:   "my_uploader",
        ...,
        slUrl:  "http://my_web_site/server/handler.php" // full path required
    }
]);

// using method
var myUploader = myForm.getUploader("my_uploader");
myUploader.setSLURL("http://my_web_site/server/handler.php");

Details

full path required

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSWFURL DHTMLX Docs

Documentation
  • clear
  • enableTitleScreen
  • getData
  • getStatus
  • setAutoRemove
  • setAutoStart
  • setSLURL
  • setSWFURL
  • setTitleText
  • setURL
  • upload
Start Form List of Controls dhtmlXFileUploader API Methods

setSWFURL

sets the path to the server script file for flash mode

void setSWFURL(string swfUrl);

Parameters

swfUrl string the path to the server script

Example

// on init state
var myForm = new dhtmlXForm("parentId", [
    {
        type:   "upload",
        name:   "my_uploader",
        ...,
        swfUrl: "../../samples/07_uploader/php/dhtmlxform_item_upload.php"
    }
]);

// using method
var myUploader = myForm.getUploader("my_uploader");
myUploader.setSWFURL("../../samples/07_uploader/php/dhtmlxform_item_upload.php");

Details

read the details on the swfURL param

path should be related to the client swf file, since some last versions of flash in Internet Explorer this path is relative to index page, so we recommend you keep index html page and swf file in the same folder, in this case swfUrl will be relative both to swf file and to index page

i.e.

// tree struct
/*
/script/my_page.html
/script/uploader.swf
/script/server/dhtmlxform_item_upload.php
/script/server/uploaded_files/
*/

var myForm = new dhtmlXForm("parentId", [
    {
        type:   "upload",
        name:   "my_uploader",
        url:    "php/dhtmlxform_item_upload.php",
        swfPath: "../../codebase/ext/uploader.swf",
        swfUrl:  "../../samples/07_uploader/php/dhtmlxform_item_upload.php"
    }
]);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setTitleText DHTMLX Docs

Documentation
  • clear
  • enableTitleScreen
  • getData
  • getStatus
  • setAutoRemove
  • setAutoStart
  • setSLURL
  • setSWFURL
  • setTitleText
  • setURL
  • upload
Start Form List of Controls dhtmlXFileUploader API Methods

setTitleText

sets the text of the initial screen

void setTitleText(string text);

Parameters

text string the text which should be set

Example

var myUploader = myForm.getUploader(name);
myUploader.setTitleText("Select files for upload");

Details

the default text of the screen - ”Drag-n-Drop files here or click to select files for upload”.

The method is similar to the titleText parameter.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setURL DHTMLX Docs

Documentation
  • clear
  • enableTitleScreen
  • getData
  • getStatus
  • setAutoRemove
  • setAutoStart
  • setSLURL
  • setSWFURL
  • setTitleText
  • setURL
  • upload
Start Form List of Controls dhtmlXFileUploader API Methods

setURL

sets the path to the server-side script

void setURL(string url);

Parameters

url string path to the server-side script

Example

// on init state
var myForm = new dhtmlXForm("parentId", [
    {
        type:   "upload",
        name:   "my_uploader",
        ...,
        url: "php/dhtmlxform_item_upload.php"
    }
]);

// using method
var myUploader = myForm.getUploader("my_uploader");
myUploader.setURL("php/dhtmlxform_item_upload.php");

Details

read the details on the url param

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


upload DHTMLX Docs

Documentation
  • clear
  • enableTitleScreen
  • getData
  • getStatus
  • setAutoRemove
  • setAutoStart
  • setSLURL
  • setSWFURL
  • setTitleText
  • setURL
  • upload
Start Form List of Controls dhtmlXFileUploader API Methods

upload

starts uploading

void upload();

Example

var myUploader = myForm.getUploader(name);
myUploader.upload();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onBeforeClear
    • onBeforeFileAdd
    • onBeforeFileRemove
    • onBeforeFileUpload
    • onClear
    • onFileAdd
    • onFileRemove
    • onUploadCancel
    • onUploadComplete
    • onUploadFail
    • onUploadFile
Start Form List of Controls dhtmlXFileUploader API

Events

onBeforeClear | fires before the user clears the list of files to upload (clicks the button [image] )
onBeforeFileAdd | fires when the user adds a file to the upload queue
onBeforeFileRemove | fires before the user removes a single file from the list of files to upload (clicks the button [image] )
onBeforeFileUpload | fires before file uploading has started
onClear | when the user clears the list of files to upload (clicks on button [image] )
onFileAdd | fires when the user adds a file to the upload queue
onFileRemove | fires when the user removes single file from the list of files to upload (clicks the button [image] )
onUploadCancel | fires when the user cancels uploading of a file (clicks the button [image] ).
onUploadComplete | fires when all files from the list have been uploaded to the server
onUploadFail | fires when the file upload has failed
onUploadFile | fires when a single file from the list has been uploaded to the server
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeClear DHTMLX Docs

Documentation
  • onBeforeClear
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onClear
  • onFileAdd
  • onFileRemove
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
Start Form List of Controls dhtmlXFileUploader API Events

onBeforeClear

fires before the user clears the list of files to upload (clicks the button [image])

void onBeforeClear(){ ... };

Example

myForm.attachEvent("onBeforeClear", function(){
    // your code here
    return true;
});

Details

returning false will cancel the 'clear' operation

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeFileAdd DHTMLX Docs

Documentation
  • onBeforeClear
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onClear
  • onFileAdd
  • onFileRemove
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
Start Form List of Controls dhtmlXFileUploader API Events

onBeforeFileAdd

fires when the user adds a file to the upload queue

void onBeforeFileAdd(string realName){ ... };

Parameters

realName string the real name of the file (as it's displayed in the control)

Example

myForm.attachEvent("onBeforeFileAdd",function(realName){
    // your code here
    return true;
});

Details

returning false will cancel the 'add' operation

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeFileRemove DHTMLX Docs

Documentation
  • onBeforeClear
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onClear
  • onFileAdd
  • onFileRemove
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
Start Form List of Controls dhtmlXFileUploader API Events

onBeforeFileRemove

fires before the user removes a single file from the list of files to upload (clicks the button [image])

void onBeforeFileRemove(string realName,string serverName){ ... };

Parameters

realName | string | the real name of the file (as it's displayed in the control)
serverName | string | the file name that the server returns after uploading or null if the file hasn't been uploaded to the server

Example

myForm.attachEvent("onBeforeFileRemove", function(realName, serverName){
    if (!confirm("Are you sure you want to delete "+realName+"?")) return false;
    return true;
})

Details

returning false will cancel the 'remove' operation

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeFileUpload DHTMLX Docs

Documentation
  • onBeforeClear
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onClear
  • onFileAdd
  • onFileRemove
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
Start Form List of Controls dhtmlXFileUploader API Events

onBeforeFileUpload

fires before file uploading has started

void onBeforeFileUpload(string mode,XMLHttpRequest loader, [object formData] ){ ... };

Parameters

mode | string | the mode in which uploader is used (read more about uploader modes here)
loader | XMLHttpRequest | XMLHttpRequest object related to the data loading
formData | object | optional, form config

Example

myForm.attachEvent("onBeforeFileUpload",function("html5",loader,formData){
    // your code here
    return true;
});

Details

returning false will cancel the 'upload' operation

Change log

added in version 5.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClear DHTMLX Docs

Documentation
  • onBeforeClear
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onClear
  • onFileAdd
  • onFileRemove
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
Start Form List of Controls dhtmlXFileUploader API Events

onClear

when the user clears the list of files to upload (clicks on button [image])

void onClear(){ ... };

Example

myForm.attachEvent("onClear", function (){
    //your code here
});

Details

Note, before the onClear event is invoked the (onFileRemove) event fires for all files in the list to upload.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onFileAdd DHTMLX Docs

Documentation
  • onBeforeClear
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onClear
  • onFileAdd
  • onFileRemove
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
Start Form List of Controls dhtmlXFileUploader API Events

onFileAdd

fires when the user adds a file to the upload queue

void onFileAdd(string realName){ ... };

Parameters

realName string the real name of the file (as it's displayed in the control)

Example

myForm.attachEvent("onFileAdd",function(realName){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onFileRemove DHTMLX Docs

Documentation
  • onBeforeClear
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onClear
  • onFileAdd
  • onFileRemove
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
Start Form List of Controls dhtmlXFileUploader API Events

onFileRemove

fires when the user removes single file from the list of files to upload (clicks the button [image])

void onFileRemove(string realName,string serverName){ ... };

Parameters

realName | string | the real name of the file (as it's displayed in the control)
serverName | string | the file name that the server returns after uploading or null if the file hasn't been uploaded to the server

Example

myForm.attachEvent("onFileRemove",function(realName,serverName){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onUploadCancel DHTMLX Docs

Documentation
  • onBeforeClear
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onClear
  • onFileAdd
  • onFileRemove
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
Start Form List of Controls dhtmlXFileUploader API Events

onUploadCancel

fires when the user cancels uploading of a file (clicks the button [image]).

void onUploadCancel(string realName){ ... };

Parameters

realName string the real name of the file (as it's displayed in the control)

Example

myForm.attachEvent("onUploadCancel", function (realName){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onUploadComplete DHTMLX Docs

Documentation
  • onBeforeClear
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onClear
  • onFileAdd
  • onFileRemove
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
Start Form List of Controls dhtmlXFileUploader API Events

onUploadComplete

fires when all files from the list have been uploaded to the server

void onUploadComplete(number count){ ... };

Parameters

count number the number of uploaded files

Example

myForm.attachEvent("onUploadComplete",function(count){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onUploadFail DHTMLX Docs

Documentation
  • onBeforeClear
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onClear
  • onFileAdd
  • onFileRemove
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
Start Form List of Controls dhtmlXFileUploader API Events

onUploadFail

fires when the file upload has failed

void onUploadFail(string realName){ ... };

Parameters

realName string the real name of the file (as it's displayed in the control)

Example

myForm.attachEvent("onUploadFail",function(realName){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onUploadFile DHTMLX Docs

Documentation
  • onBeforeClear
  • onBeforeFileAdd
  • onBeforeFileRemove
  • onBeforeFileUpload
  • onClear
  • onFileAdd
  • onFileRemove
  • onUploadCancel
  • onUploadComplete
  • onUploadFail
  • onUploadFile
Start Form List of Controls dhtmlXFileUploader API Events

onUploadFile

fires when a single file from the list has been uploaded to the server

void onUploadFile(string realName,string serverName){ ... };

Parameters

realName | string | the real name of the file (as it's displayed in the control)
serverName | string | the file name that the server returns

Example

myForm.attachEvent("onUploadFile",function(realName,serverName){
    // your code here
});

Details

If the file is the only one in the list or in case all files in the list are uploaded - the onUploadComplete event fires.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


XML Format DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
    • Initial Data
    • XML Format Example
    • Form Initialization
    • Code samples for specific items
  • JSON Format
  • HTML Format
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
Start Form

XML Format

Before considering XML details we'd like to mention that among possible ways of initialization we recommend to use JSON as the handiest way.

Initial Data

As initial data we'll take the following form:

XML Format Example

In XML data will look as:

welcome.xml

<?xml version="1.0" encoding="UTF-8"?>
<items>
   <item type="fieldset" name="data" label="Welcome" inputWidth="auto">
       <item type="input" name="name" label="Login" position="label-top"/>
       <item type="password" name="pass" label="Password" position="label-top"/>
       <item type="button" name="save" value="Proceed"/>
   </item>
</items>

Form Initialization

from XML file

welcome.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxform_dhx_skyblue.css">
 <script src="codebase/dhtmlx.js" type="text/javascript"></script>
 <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
</head>

<body onload="doOnLoad()">
    <div id="form_container" style="width:250px;height:300px;"></div>
    <script>
        var myForm;
        function doOnLoad() {
            myForm = new dhtmlXForm("form_container");
            myForm.loadStruct("welcome.xml");
        }
    </script>

</body>
</html>

from XML string

<!DOCTYPE html>
<html>
<head>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
</head>

<body onload="doOnLoad()">
    <div id="form_container" style="width:250px;height:300px;"></div>
    <script>
      var myForm, formData;
        function doOnLoad() {
            formData = [
              '<items>
                <item type="fieldset" name="data" label="Welcome" inputWidth="auto">
                    <item type="input" name="name" label="Login"/>
                    <item type="password" name="pass" label="Password"/>
                    <item type="button" name="save" value="Proceed"/>
                 </item>
              </items>'
            ]
            myForm = new dhtmlXForm("form_container");
            myForm.loadStruct(formData);
        }
    </script>
</body>
</html>

Related sample: Init from xml string

Code samples for specific items

combo:

<?xml version="1.0" encoding="UTF-8"?>
<items>
   <item type="combo" label="Select Location" inputWidth="120">
       <option text="Open Air" value="1"/>
       <option text="Private Party" value="2" />
   </item>
</items>

multiselect:

<?xml version="1.0" encoding="UTF-8"?>
<items>
   <item type="multiselect" label="Can create/edit/delete users=" inputWidth="120">
       <option text="Administrators" value="Option 1" selected="true"/>
       <option text="Power users" value="Option 2" selected="true"/>
       <option text="Registered users" value="Option 3"/>
       <option text="Guests" value="Option 4"/>
       <option text="All users" value="Option 5"/>
   </item>
</items>

radio:

<?xml version="1.0" encoding="UTF-8"?>
<items>
    <item type="radio" name="effect" label="No effects" value="by_pages"
          position="label-right" readonly="true"/>
    <item type="radio" name="effect" label="Effects" value="custom" checked="true"
          position="label-right">
    <item type="radio" name="opt2" label="Shadow"
          position="label-right" checked="true"/>
    <item type="radio" name="opt2" label="Perspective" position="label-right"/>
    <item type="radio" name="opt2" label="Shear" position="label-right"/>
    <item type="button" value="Proceed"/>
   </item>
</items>

select:

<?xml version="1.0" encoding="UTF-8"?>
<items>
   <item type="select" label="Welcome" inputWidth="100">
       <option text="Admin" value="admin">
            <item type="checkbox" label="Show logs window"/>
            <item type="checkbox" label="Show advanced options"/>
       </option>
       <option text="Organiser" value="org" />
       <option text= "Power User" value="poweruser"/>
       <option text= "User" value="user" selected="true"/>
   </item>
</items>

settings:

<?xml version="1.0" encoding="UTF-8"?>
<items>
   <item type="settings" position="label-left" labelAlign="right"
         labelWidth="120" inputWidth="120"/>
   <item type="input" label="Name" value="John Smith"/>
   <item type="password" label="Password" value="123"/>
</items>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


JSON Format DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
    • Initial Data
    • JSON Format Example
    • Form Initialization
    • Code samples for specific items
  • HTML Format
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
Start Form

JSON Format

We recommend you to use JSON format as it's the handiest way of initialization.

Initial Data

As initial data we'll take the following form:

JSON Format Example

In JSON the data will look as:

welcome.json

[
    {type:"fieldset", name:"data", label:"Welcome", inputWidth:"auto", list:[
        {type:"input",    name: "name", label:"Login"},
        {type:"password", name:"pass",  label:"Password"},
        {type:"button",   name:"save",  value:"Proceed"}]
    }
]

Form Initialization

from JSON object

<!DOCTYPE html>
<html>
<head>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
</head>

<body onload="doOnLoad()">
    <div id="form_container" style="width:250px;height:300px;"></div>
    <script>
        var myForm, formData;
        function doOnLoad() {
            formData = [
                {type:"fieldset", name:"data", label:"Welcome", inputWidth:"auto",
                 list:[
                    {type:"input",    name:'name', label:'Login'},
                    {type:"password", name:"pass", label:"Password"},
                    {type:"button",   name:"save", value:"Proceed"}]
                }
            ]
            myForm = new dhtmlXForm("form_container", formData);
        }
    </script>
</body>
</html>

from JSON file

welcome.html

<!DOCTYPE html>
<html>
<head>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
</head>

<body onload="doOnLoad()">
    <div id="form_container" style="width:250px;height:300px;"></div>
    <script>
        var myForm;
        function doOnLoad() {
            myForm = new dhtmlXForm("form_container");
            myForm.loadStruct("welcome.json");
        }
    </script>
</body>
</html>

Code samples for specific items

combo:

var formData = [
    {type: "combo", label: "Select Location", inputWidth:120, options:[
        {text: "Open Air",      value: "1"},
        {text: "Private Party", value: "2"}
    ]}
];

multiselect:

var formData = [
    {type: "multiselect", label: "Can create/edit/delete users=", inputHeight:90,
      inputWidth:130, options:[
        {text: "Administrators",    value: "Option 1", selected: true},
        {text: "Power users",       value: "Option 2", selected: true},
        {text: "Registered users",  value: "Option 3"},
        {text: "Guests",            value: "Option 4"},
        {text: "All users",         value: "Option 5"}
    ]}
];

radio:

var formData = [
    {type: "radio", name: "effect", label: "No effects", value: "by_pages",
       position:"label-right", readonly:"true"},
    {type: "radio", name: "effect", label: "Effects", value: "custom",
       checked:"true", position:"label-right"},
    {type: "radio", name: "opt2", label: "Shadow", position:"label-right",
       checked:"true"},
    {type: "radio", name: "opt2", label: "Perspective", position:"label-right"},
    {type: "radio", name: "opt2", label: "Shear", position:"label-right"},
    {type:"button", value:"Proceed"}
];

select:

var formData = [
    {type: "select", label: "Welcome", inputWidth:"100",options:[
        {text: "Admin", value: "admin",list:[
            {type:"checkbox",label:"Show logs window"},
            {type:"checkbox",label:"Show advanced options"}
        ]},
        {text: "Organiser", value: "org"},
        {text: "Power User", value: "poweruser"},
        {text: "User", value: "user", selected:true}
    ]}
];

settings:

var formData = [
    {type:"settings",position:"label-left",labelWidth:120,inputWidth:120,
       labelAlign:"right"},
    {type: "input",     label: "Name",      value: "John Smith"},
    {type: "password",  label: "Password",  value: "123"}
];
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


HTML Format DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
    • Initial Data
    • HTML Format Example
    • Form Initialization
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
Start Form

HTML Format

We can single out HTML initialization from other available ways. The reason - it's some kind of automatic initialization. After the page has been completely parsed - the form instance 'looks for' HTML data for initialization. If it finds the appropriate data - it's used for initialization.

Initial Data

As initial data we'll take the following form:

HTML Format Example

In HTML the data will look as:

<ul class="dhtmlxForm" name="myForm">
    <li ftype="fieldset" name="data" inputWidth="auto">Welcome
        <ul>
            <li ftype="input" name="name">Login</li>
            <li ftype="password" name="pass">Password</li>
            <li ftype="button" name="save" value="Proceed"/>
        </ul>
    </li>
</ul>

Form Initialization

from HTML object

<!DOCTYPE HTML>
<html>
<head>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">

    <script>
        function doOnFormInit() {
            // will be called immediately after form initialization
        }
    </script>

</head>

<body>
   <ul class="dhtmlxForm" name="myForm" oninit="doOnFormInit">
     <li ftype="fieldset" name="data" inputWidth="auto">Welcome
        <ul>
            <li ftype="input" name="name">Login</li>
            <li ftype="password" name="pass">Password</li>
            <li ftype="button" name="save" value="Proceed"/>
        </ul>
     </li>
   </ul>
</body>
</html>
  • name - the identification name of element (both items and form itself). You can refer to the appropriate element through the value stated there.
  • oninit - defines the function that will be called immediately after form initialization.

Related sample: Init from ul

from HTML form structure

<!DOCTYPE html>
<html>
<head>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
</head>

    <div id="form_container" style="width:250px;height:300px;"></div>
    <script>
        var myForm;
        function doOnLoad() {
            myForm = new dhtmlXForm("form_container");
            myForm.loadStructHTML("f1");
        }
    </script>

<body onload="doOnLoad();">
    <form id="form1" style="display:none">
    <ul>
        <li ftype="input" value="Patricia D. Rossi">Full Name</li>
        <li ftype="password" value="123">Password</li>
        <li ftype="password" value="123">Confirm Password</li>
        <li ftype="checkbox">Subscribe on news</li>
    </ul>
</form>
</body>
</html>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Working with Userdata DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
    • Script
    • JSON format
    • XML format
  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
Start Form

Working with Userdata

There's an opportunity to add some extra information to Form controls. You can do this by using the userdata property.

Userdata is an object that sets user data for inputs by means of name:value pairs and allows getting userdata value.

Setting userdata

There are two ways of assigning userdata to a Form control:

1) while specifying the Form configuration, before Form init

See the examples of XML and JSON formats below.

2) by using the setUserData method, after Form init

The setUserData method takes the following parameters:

  • name - the name of an item
  • value - the value of an item (radiobutton only, omit for other types)
  • udKey - the key that points to the stored user data
  • udValue - the value of userdata associated with the udKey

Getting userdata

It's easy to get userdata using the getUserData method. It takes the item's name (the value of item for radiobutton as well) and userdata name as parameters and returns userdata value.

Script

// for radio button
myForm.setUserData("mode", "a", "auto", true);
myForm.setUserData("mode", "a", "size", 10);
// for other types
myForm.setUserData("login", "max_length", 15);
myForm.setUserData("login", "char_allowed", 15);

// getting userdata value of radiobutton
var auto = myForm.getUserData("mode", "a", "auto");
var size = myForm.getUserData("mode", "a", "size");
// getting userdata value of other types of items
var max_length = myForm.getUserData("login", "max_length");
var char_allowed = myForm.getUserData("login", "char_allowed");

JSON format

var formData = [
    {type: "radio", name: "mode",  value: "a", userdata: {
        auto: true,
        size: 10
    }},
    {type: "input", name: "login", value: "username",  userdata: {
        max_length: 15,
        char_allowed: "a-zA-Z0-9_-"
    }}
];

// getting userdata value of radiobutton
var auto = myForm.getUserData("mode", "a", "auto");
var size = myForm.getUserData("mode", "a", "size");

// getting userdata value of other types of items
var max_length = myForm.getUserData("login", "max_length");
var char_allowed = myForm.getUserData("login", "char_allowed");

XML format

<items>
    <item type="radio" name="mode" value="a" ... >
        <userdata name="auto">true</userdata>
        <userdata name="size">10</userdata>
    </item>
    <item type="input" name="login" value="username" ... >
        <userdata name="max_length">15</userdata>
        <userdata name="char_allowed">a-zA-Z0-9_-</userdata>
    </item>
</items>

// getting userdata value of radiobutton
var auto = myForm.getUserData("mode", "a", "auto");
var size = myForm.getUserData("mode", "a", "size");

// getting userdata value of other types of items
var max_length = myForm.getUserData("login", "max_length");
var char_allowed = myForm.getUserData("login", "char_allowed");

Pay attention! In XML format userdata will be returned as string!

Related sample: UserData

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Config and Operations DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
  • Config and Operations
    • Adding/removing items
    • Saving data
    • Restoring form's state
    • Setting checked state
    • Setting inputs' labels
    • Managing options collection
    • Setting input's values
    • Getting type of an item
    • Checking if an item exists
    • Adding details under input
    • Setting a tooltip
    • Destructing Form instance
  • Positioning Controls
  • Validation
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
Start Form

Config and Operations

You can perform various operations on items (control of visibility, checking of state, item existence etc.). For their executing you have a number of methods and attributes.

For saving memory, we recommend to destruct dhtmlxForm instance at the end of the form usage by the unload() method. See the details below.

Adding/removing items

To add/remove some dhtmlxForm's item dynamically, you should use one of the following methods:

  • addItem() - adds a new item to the form;
  • removeItem() - removes the specified item from the form.
var itemData = {type: "label", label: "Video settings", list:[
    {type: "select", name: "video_codec", label: "Codec", options:[
        {text: "DivX", value: "DivX"},
        {text: "XviD", value: "XviD", selected: true}
    ]},
    {type: "select", name: "video_bitrate", label: "Bitrate", options:[
        {text: "1226 kbps", value: "1226", selected: true},
        {text: "2412 kbps", value: "2412"}
    ]}
]};
myForm.addItem(null, itemData, 3);
...
myForm.removeItem("video_bitrate");

Saving data

There are three variants to deal with form data using dhtmlxForm:

  1. submit form in the common way
  2. send data via AJAX request (get or post)
  3. integrate dhtmlxForm with dhtmlxConnector to insert/update/delete in the automatic mode

All these ways can be initialized through the event handlers of dhtmlxForm associated with various elements and the onButtonClick event, associated with the "button" element, in particular.

// send data on proc.php when user clicks button with the name "my_submit_button"
myForm.attachEvent("onButtonClick", function(name, command){
    if(name=="my_submit_button"){
        this.send("proc.php");
    }
});

Send data using AJAX request

dhtmlxForm provides the ability to send its data to the server using an AJAX request (GET or POST) and then process the reply with the send() method.

dhxForm.send("some.php");
//or
dhxForm.send("some.php","post");
//or
dhxForm.send("some.php","post",function(xml){
    alert("Saved");
});

Restoring form's state

There are several techniques that allow you to restore the initial state of a form.

The reset method restores the latest saved values of form's items.

myForm.reset();
//or
myForm.reset(function(id, response){
   alert("I'm reset");
});

To save the current state of the form use the saveBackup method:

var backup1 = myForm.saveBackup();

To restore the saved state of the form you need to apply the restoreBackup method

var backup1 = myForm.saveBackup();
...
myForm.restoreBackup(backup1);

To clear the values of form's items, use the method clear():

myForm.clear();

Notice that in the case of using Combo and Select items, the first option will be selected instead of clearing the input.

Setting checked state

The common way to set(get) the state of an item is setItemValue(). The method sets value for an item and checks it (if appropriate).
Applied to all items.

dhxForm.setItemValue(name, value);

For checkbox and radio items you can also use 3 more methods:

  • checkItem()
  • uncheckItem()
  • isItemChecked()
// checking items
dhxForm.checkItem(name, value); // for radio buttons 2nd argument value should be passed
// unchecking items
dhxForm.uncheckItem(name, value);
// getting current state
var isChecked = dhxForm.isItemChecked(name, value); // returns true/false

Setting inputs' labels

To set (get) the text of an item as a string, use the setItemLabel()/getItemLabel() methods.
Applied to all items.

// setting text
dhxForm.setItemLabel(name, "New Text");
dhxForm.setItemLabel(name, value, "New Text"); // for radio button
// getting text
var text = dhxForm.getItemLabel(name);
var text = dhxForm.getItemLabel(name, value); // for radio button

Managing options collection

To set (get) the value of a list item, use the getOptions() method.
Applicable to the select, multiselect items only

var opts = dhxForm.getOptions(name); // returns options collection

To add a new option:

opts.add(new Option(text, value));

In case you use the combo item, you can get the instance of dhtmlXCombo and manipulate it using its methods. Refer to the appropriate dhtmlxCombo documentation.

var combo = myForm.getCombo("combo_name")
combo.load(url);//to fill combo with options from XML file

Since 3.6 update 1 there is a new reloadOptions() method, which allows reloading options using a local array or from server (like connector attr).

Setting input's values

To set(get) the value of an item use the getItemValue()/setItemValue() methods.
Applied to all items (form's controls).

// setting value
dhxForm.setItemValue(name, value);
// getting value
var value = dhxForm.getItemValue(name);

Getting type of an item

To get the type of an item, use the getItemType() method.
Applied to all items.

// for radio buttons 2nd argument value should be passed
var type = dhxForm.getItemType(name, value);

Returns the type of an item (for example, "input") or null.

Checking if an item exists

To check whether an item exists, use the isItem() method.
Applied to all items.

formdata = [{type: "password", name: 'pass', label: 'Password:'},
   ...];

var myForm = new dhtmlXForm("form_container",formData);
var exists = myForm.isItem("pass"); // for radio buttons you must also set the 2nd argument

if (exists)
      {myForm.getItemValue("pass");}

Returns "true" if the specified item exists.

Adding details under input

To add the details block under an input, use the note attribute.

  • note - (object) creates the details block which is placed under the input
    • text - (string) the text of the block
    • width - (number) the width of the block
formData = [{
    type: "input",
    name: "prj_name",
    label: "Project Name",
    note: {
        text: "Enter your project name here. This field is required.",
        width:300
    }
}];

Related methods

There are 2 methods you can use to set add/remove the note block dynamically:

  • setNote() - adds the note block under the specified input;
  • clearNote() - removes the note block from the input.
myForm.setNote('prj_name', {text:"I'm the note block"});
...
myForm.clearNote('prj_name');

Setting a tooltip

To set a tooltip for an input label, use the tooltip attribute.

formData = [{
    type: "input",
    name: "prj_name",
    label: "Project Name",
    tooltip:"Enter your Project Name here"
}];

Destructing Form instance

In order to destruct dhtmlxForm instance use the following configuration:

<body onload="doOnLoad()" onunload="doOnUnload()">
    <div id="myForm"></div>
    <script>
        var form;
        function doOnLoad() {
            form = new dhtmlXForm("myForm");
        }
        function doOnUnload() {
            form.unload();
            form = null;
        }
    </script>
</body>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Positioning Controls DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
    • Common positioning
    • Splitting items into columns
    • Nesting
    • Uniting items and attributes
  • Validation
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
Start Form

Positioning Controls

In this chapter we'd like to show how you can position items inside of the form.

Common positioning

Items' attribute position is the central character in positioning (can be defined for any item). It offers 3 relative positions and absolute positioning.

  • label-left (relative)
  • label-right (relative)
  • label-top (relative)
  • absolute (absolute)

Relative positioning

position:"label-left" | position:"label-right" | position:"label-top"

Absolute positioning

To specify absolute item position you must set the attribute to absolute value.
In that case you'll have the possibility to operate on item with 4 more attributes (please note, the attributes're available just if position:"absolute"). They are:

  • labelLeft - (number) the left offset of label
  • labelTop - (number) the top offset of label
  • inputLeft - (number) the left offset of input
  • inputTop - (number) the top offset of input

This way allows placing input and label of item whereever you like within the limits of the container. For example, it will be to the point when you need to change the default spacing between items.

By default

formData = [
    {type: "button", value: 'Add'},
    {type: "button", value: 'Edit'}
]

With position:"absolute"

formData = [
  {type:"button",value:'Add',
   position:"absolute"},
  {type:"button",value:'Edit',
   position:"absolute", inputTop:25}
]

Splitting items into columns

To split items into columns you will need the item newcolumn. Just put it between the items you want to split, and they will be splitted.

formData = [
    {type: "label", ...},
    {type: "checkbox", ...},
    {type: "checkbox", ...},
    {type:"newcolumn"},
    {type: "label", ...},
    {type: "checkbox", ...},
    {type: "checkbox", ...}
];
Before | After

See all the item's details in the appropriate chapter.

You can also split columns through the absolute positioning.

Nesting

You can put items inside 'checkbox' and 'radio' elements. In this case, dhtmlxForm will define the active state of nested elements depending on the checked state of the parent item. In other words, if an item is not checked, its nested elements will be not active and vice versa.

Nesting is implemented through the attribute 'list' where you should define nested items.

formData = [
    {type:"settings", position:"label-right"},
    {type: "label", label: "Settings"},
    {type: "radio", label: "Update automatically", list:[
        {type: "checkbox", label: "Application"},
        {type: "checkbox", label: "Search engines", list:[
            {type: "radio", label: "Google"},
            {type: "radio", label: "Yahoo"}
        ]}
]};

You can associate some elements with 'select' item options. In this case dhtmlxForm shows elements associated with selected option and hides others.

formData = [
    {type: "select", label: "Select Media Type", position:"label-top", options:[
        {text: "CD 700Mb", value:"CD", list:[
            {type:"checkbox", label:"Overburn", checked:true, position:"label-right"}]},
        {text: "DVD9 8.6Gb", value:"DVD", list:[
            {type:"radio", label:"Double Layer", position:"label-right"},
            {type:"radio", label:"Two-sided", position:"label-right"}]},
        {text: "Blue-Ray 24Gb", value:"Blue-Ray"}
    ]}
];

Uniting items and attributes

The 'fieldset' item

The item fieldset will allow you to unite some items on a page.

var formData = [
    {type: "fieldset",  name: "mydata", label: "Appearance", width:210, list:[
        {type:"settings", position:"label-right"},
        {type: "checkbox", label: "Default"},
        {type: "checkbox", label: "Custom", checked: "0", list:[
            {type: "radio", name: "cursor_value", label: "Dot", checked: "1"},
            {type: "radio", name: "cursor_value", label: "Cross"},
            {type:"newcolumn"},
            {type: "radio", name: "cursor_value", label: "Circle"},
            {type: "radio", name: "cursor_value", label: "Triangle"}
        ]}
    ]}
];

The 'block' item

The item block also allows to unite some items on a page. It's identical to fieldset but doesn't have label and frame. Most appropriate in situations when you deal with multiple columns and rows.

When you put one block element inside another, absolute position is gotten relative to the top left corner of the parent block container (not the initial form's container)

The 'settings' item

The item settings will save your time and efforts thanks to the possibility of setting the same attributes to several items at once. See the detailed information in the appropriate chapter.

By default

var formData = [
    {type:"label", label:"Browsers"},
    {type: "radio", label: "Internet Explorer"},
    {type: "radio", label: "Opera"},
    {type: "radio", label: "Mozilla Firefox"},
    {type: "radio", label: "Google Chrome"}
]

Common way

var formData = [
    {type:"label", label:"Browsers"},
    {type:"radio",label:"Internet Explorer",position:"label-right"},
    {type:"radio",label:"Opera",position:"label-right"},
    {type:"radio",label:"Mozilla Firefox",position:"label-right"},
    {type:"radio",label:"Google Chrome",position:"label-right"}
]

Alternative way ('settings')

var formData = [
    {type:"settings", position:"label-right"},
    {type:"label", label:"Browsers"},
    {type: "radio", label: "Internet Explorer"},
    {type: "radio", label: "Opera"},
    {type: "radio", label: "Mozilla Firefox"},
    {type: "radio", label: "Google Chrome"}
]

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Validation DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
  • Validation
    • Enabling validation
    • Live validation
    • Required fields
    • Marking validation errors
    • Validation events
    • Assigning validation rules dynamically
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
Start Form

Validation

Enabling validation

To enable validation you need to specify the validate property and set it to the desired rule.

var formData = [
    {type: "input", name: "email", label: "E-mail", value:"", validate: "ValidEmail"}
];
var dhxForm = new dhtmlXForm("dhxFormObj", formData);

With such markup, each time when you call methods save() and send(), validation will fire.

You can also force form validation using the validate method:

var formData = [
    {type: "input", name: "email", label: "E-mail", value:"", validate: "ValidEmail"},
    {type: "button", name: "btn", value: "validate"}
];
var myForm = new dhtmlXForm("form_container", formData);

myForm.attachEvent("onButtonClick", function(id){myForm.validate();});

Live validation

dhtmlxForm provides support for the Live Validation mode. It's the mode when validation is invoked just after an input goes out of focus (in the standard mode validation is invoked when the user clicks the submit button).

To enable the Live Validation mode, you should call the enableLiveValidation method with the true parameter.

myForm.enableLiveValidation(true);

Required fields

The library provides an easy way to treat the required fields - the required attribute. Setting the attribute for an input will add the [image] icon after its label:

BTW, you can add any additional validation rule to the required fields. For example, for the 'E-mail'/'Confirm e-mail' fields (in the image above) you can set the ValidEmail rule to check whether the input value is correct, i.e. the form will check whether the field contains any value and if it does, check whether this value has the correct format.

formData = [
    {type:"input", name:"prj_name", label:"Project Name", value:"My Project",
     required:true},
    {type:"input", name:"prj_descr", label:"Project Description",
     value:"My project is great!", rows:3},
    {type:"input", name:"email", label:"E-mail", value:"", validate:"ValidEmail",
     required:true},
    {type:"input", name:"email2", label:"Confirm e-mail", validate:"ValidEmail",
     value:"", required:true}
];

In the image above validation failed for the Email field.

Note that there is a special method that will allow you to make/unmake a certain field required - setRequired.

myForm.setRequired("prj_name",true); // makes input with the name 'prj_name' required
...
myForm.setRequired("name",false); // makes input with the name 'prj_name' unrequired

Marking validation errors

When an input fails validation it's marked with "dhtmlx_validation_error" CSS class. So if you want to define custom styling, you need to set its rules:

.dhtmlx_validation_error{
    ... any custom marking rules here ...
}

Custom messages can be added by using validation events.

Validation events

There are 4 validation events:

  • onBeforeValidate - starts before validation and allows preparing input data to it (blockable)
  • onValidateSuccess - fires if validation check of some field is positive
  • onValidateError - fires if validation check of some field is negative
  • onAfterValidate - fires after validation, provides the result of total validation

You can also handle HTML input-related events, such as onblur (fires when the element which is in focus, loses that focus). For mode details, read the chapter Triggering HTML Events from the article Handling Events.

Validation rules

There are 3 types of rules:

  1. Standard rules;
  2. Custom rules;
  3. Regular expressions.

Standard rules

Standard rules are the following:

  • Empty;
  • ValidBoolean;
  • ValidEmail;
  • ValidInteger;
  • ValidNumeric;
  • ValidAplhaNumeric;
  • ValidDatetime;
  • ValidDate;
  • ValidTime;
  • ValidIPv4;
  • ValidCurrency;
  • ValidSSN;
  • ValidSIN.
var formData = [{type: "input", label: "Number", validate:"ValidNumeric"}];

Custom rules

Custom rules can be created by defining a custom function and using its name as the validation rule. Such function takes the only parameter - the field's value and if validation is successful returns true, otherwise false.

var formData = [{type: "input", label: "Number", validate:"Greater100"}];
...
function Greater100(data){
        return (data>100);
}

In case, you want to validate a field just if it contains something (i.e. don't validate the field if it's empty), you should use the following technique:

var formData = [{type: "input", label: "Number", validate:"Greater100"}];
...
function Greater100(data){
        if (data=="") return true;// returns 'true' if the field is empty

        return (data>100);
}

Regular expressions

You can use a regular expression as value of the validate attribute:

var formData = [{type: "input", label: "Number", validate:"[0-9]+"}];

Assigning validation rules dynamically

There are 2 methods that let you to set/remove validation rules dynamically. They are:

  • setValidation - adds a validation rule to the input with the specified name;
  • clearValidation - removes all validation rules from the input.
myForm.setValidation('age', 'ValidInteger');
...
myForm.clearValidation('age');
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Creating a Custom Control DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
    • Specifying properties
    • Specifying functions
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
Start Form

Creating a Custom Control

In this article you'll learn the common technique of creating a custom item.

While creating a new item you will need to use 2 prototypes:

  • dhtmlXForm.prototype.items.someItem
    the prototype defines properties, inner functions and private members of the item
  • dhtmlXForm.prototype.someFunction
    the prototype defines public methods of the item

Specifying properties

To specify properties, inner functions and private members of the item use the dhtmlXForm.prototype.items.someItem prototype.
The prototype can contain any functionality, but 6 methods must be defined necessarily.

dhtmlXForm.prototype.items.myItem = {
//mandatory functions
    render: function(item, data){}, //constructor
    destruct: function(item){}, //destructor
    setValue: function(item, value){}, //sets the value of the item
    getValue: function(item){}, //specifies the return value of the item
    enable: function(item){}, // enables the item
    disable: function(item){} //disables the item
//any custom functions
    custom_inner_func_1: function(){},
    custom_inner_func_2: function(){},
    ...

where

  • "item" - the parent DIV container. The parameter is mandatory for any function, i.e. the first parameter for any function is 'item'.
  • "data" - the data passed to object constructor. Through data.someText you define properties, e.g. 'data.text' defines the property 'text'.

Important!

Custom functions specified in the prototype are inner, but to define any public function through dhtmlXForm.prototype.items.someFunc you need to define the appropriate inner function implementing all the needed functionality. See details in the chapter Specifying functions.

render

Item constructor. All the properties of an item are specified in the render function.

render: function(item, data) {
    item._type = "myItem";//the name of the item, by which it will be referred
    item._enabled = true;
    /* your custom code is started here */
    item.appendChild(document.createElement("DIV"));
    item.lastChild.innerHTML = data.item_text;// defines the property 'item-text'
    /* your custom code is ended here */
    return this;
}

destruct

Destructor. Used by the form's method unload().

destruct: function(item) {
    /* your custom code is started here */
    item.lastChild.onclick = null;
    item.innerHTML = "";
    /* your custom code is ended here */
}

enable/disable

The methods define enabling/disabling of the item. Called while nesting items.
Let's assume you nest the new-created item into a checkbox. So, each time you check/uncheck the checkbox, the methods enable/disable will be called.

enable: function(item) {
    /* your custom code started here */
    item.lastChild.style.color = "black";
    item._enabled = true;
    /* your custom code ended here */
},
disable: function(item) {
    /* your custom code started here */
    item.lastChild.style.color = "gray";
    item._enabled = false;
    /* your custom code ended here */
}

setValue/getValue

The methods define setting and getting value of the item. Used by the setFormData(), getFormData() methods and called while validation:

setValue: function(item, value) {
    item._value = value;// it's basic code. You can add there any custom code as well.
},
getValue: function(item) {
    return item._value;//it's basic code. You can add there any custom code as well.
}

custom events

To define a custom event you should specify when and how this event should be invoked, i.e. you should call the event in some inner methods with the needed number of parameters.
Then, you should attach it as an ordinary event and specify the desired event-handling code.

Consider, for example, an event that must be invoked on changing value of item. Name it 'onValueChanged'. As it should be invoked each time the value is changed we will call it in the method setValue.

setValue: function(item, val) {
    item._value = val;
    item.callEvent("onValueChanged",[item._idd,value]);
}

We call event with some parameters. These parameters should correspond with the parameters specified in the handler function of attached event:

myForm.attachEvent("onValueChanged",function(name,value){
    alert("Value has beed changed");
});

Specifying functions

With help of this prototype you can define public methods of the item:

  • Any public method of the item is called in the following way:
    //calls method 'myFunc' of the item 'myItem'
myForm.myFunc("myItem", ...here can be other parameters...);
  • Methods already defined in form are added automatically. In case of redefinition you need to specify just inner function. dhtmlXForm.prototype.items.someFunc doesn't need to be used.
  • Any public method must call the doWithItem() method, with the appropriate inner function implementing all the needed functionality, within itself:
    dhtmlXForm.prototype.someFunction = function () {
// customFunc defined in dhtmlXForm.prototype.items.myItem
return this.doWithItem(name, "customFunc", value);
}
  • In order to validation can be applied to the item and its value could be set(gotten) by the methods setFormData(), getFormData() you should specify the following related methods:
    dhtmlXForm.prototype.getFormData_myItem = function(name){
return this.doWithItem(name, "getValue")
};
dhtmlXForm.prototype.setFormData_myItem = function(name,value){
return this.doWithItem(name, "setValue", value)
};

Related sample: Custom item

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Server-side Integration DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
  • Server-side Integration
    • Automatic integration using dhtmlxConnector
    • Filling the form with custom data feed
    • Saving data without dhtmlxConnector
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
Start Form

Server-side Integration

To fill dhtmlxForm with data using datasource fields binding. There are two ways of doing this:

  • Automatically, using dhtmlxConnector
  • Using your own (custom) datasource

To save data back to server, you can use:

  • Automatic saving using dhtmlxConnector
  • Send data to server using AJAX request and save it there using your own processor

Automatic integration using dhtmlxConnector

dhtmlxConnector allows binding dhtmlxForm fields to server side datasource with minimal efforts. For details see the dhtmlxConnector documentation, here we'll show you the basics.
To use dhtmlxConnector you need to follow a few steps on client side and create server side file.

Server side

Here is the code sample (PHP) you could use to connect the form with "Users" table on server side.

require_once('form_connector.php');
$conn = new PDO("mysql:dbname=db_name;host=localhost","root","");

//create connector for dhtmlxForm using connection to mySQL server
$form = new FormConnector($conn);
//table name, id field name, fields to use to fill the form
$form->render_table("Users","user_id","f_name,l_name,email");

Client side

  1. Instantiate DataProcessor (pass server side file url where you use dhtmlxConnector as argument)
  2. Connect form to DataProcessor
  3. Use the load() and save() methods of dhtmlxForm to fill form with data and save data back to server
  4. Use names for form fields the same as corresponded database table fields names (or aliases if were used)
  var myForm = new dhtmlxForm(containerID,structureAr);//create form(structure below)
  var dp = new dataProcessor("php/user_details.php");//instatiate dataprocessor
  dp.init(yourFormObject);//link form to dataprocessor
  ...
  //fill form with data.Where userID is ID or record you want to use to fill the form
  myForm.load("php/user_details.php?id="+userID);
  ...
  //create event handler to save data on button click
  myForm.attachEvent("onButtonClick",function(buttonID){
    if(buttonID=="my_button"){
        myForm.save();//no params needed.It uses url that you passed to dataprocessor
    }
  })
</script>

Note: Client side dhtmlxForm validation will run automatically when the save() method is called. If it fails, data will not be sent to server.

Form elements on client-side should have 'name' attributes with the same names as corresponded database table fields names (or aliases) returned by connector (see above):

var structureAr = [
    {type: "input", name: "f_name", label:"First name"},
    {type:"input", name: "l_name", label:"Last Name"},
    {type:"input", name:"email", label:"Email"},
    {type:"button", name:"my_button", value:"Save"}
];

Filling the form with custom data feed

Instead of dhtmlxConnector, you can load data from any custom feed using the same load() method. The requirement is: feed elements should have the same names as corresponded form fields have.

var myForm = new dhtmlXForm(containderID,structureAr);
myForm.load("user.xml");

user.xml file:

<data>
  <f_name>John</f_name>
  <l_name>Doe</l_name>
  <email>jdoe@mail.com</email>
</data>

The name of the top tag in XML - <data> - can be any.

Saving data without dhtmlxConnector

AJAX Requests

In case you would like to have your own server-side processor for form data and don't apply dhtmlxConnector, you may use the send() method and send form data to the server by AJAX POST/GET request. By default, POST request is used.

myForm.attachEvent("onButtonClick",function(id){
    if(id=="send_button"){
        myForm.send("php/save_form.php", "get", function(loader, response){
            alert(response);
        });
    }
});

Note: Client side dhtmlxForm validation will run automatically when the send() method is called. If it fails, data will not be sent to server.

HTML Form Submit

Also, you can wrap dhtmlxForm container with HTML form tags and use HTML form submit to send data to server in common way. Just do not forget to run dhtmlxForm validation first.

<form action="php/save_form.php" method="post" target="[some target]">
    <div id="form_container"></div>
</form>

<script>
myForm = new dhtmlXForm("form_container",structureAr);
myForm.attachEvent("onButtonClick",function(id){
    if(id=="my_button"){
        if(myForm.validate())
            document.forms[0].submit()
    }
})
</script>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Integration with DHTMLX DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
    • Components which you can put into form
    • Integration with container components
  • Binding Data
  • Handling Events
Start Form

Integration with DHTMLX

In different situations you might need to combine form with some other dhtmlx components.

Components which you can put into form

You can put the following dhtmlx components into form:

  • Calendar
  • ColorPicker
  • Combo
  • Editor

Form's integration with these components is realized through the appropriate item types: calendar, colorpicker, combo and editor.

Integration with container components

Pretty often, you need to place form into other dhtmlx components. Such dhtmlx components are also known as container components. They are:

  • Accordion
  • Layout
  • Tabbar
  • Windows

Integration with any container component implements the same technique:

  1. Create a container component instance
    Details see in the related documentation:accordion, layout, tabbar, window.

  2. Put form into the container

//accordion, layout, tabbar
   myForm = mylayout.cells("a").attachForm();
   myForm.loadStruct("data.json", "json");
//window
   myForm = myWins.window("win").attachForm();
   myForm.loadStruct("data.json", "json");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Binding Data DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
    • Overview
    • Applicable components
  • Handling Events
Start Form

Binding Data

Overview

To use the stated below functionality - include the 'datastore.js' file on your page

When you deal with multiple related components on client-side, you can define rules how their data will be linked. So changed value in some component will be reflected in other components.

There are 2 main ways to link data:

  • when data in master component is changed - slave component gets new data;
  • when selection in master component is changed - slave component gets new data.

In both cases, based on configuration:

  • slave can take new data from master component;
  • slave can take new data from server side.

Basically, you can load data just once, in single global data store and define rules, how different components will use it.

Applicable components

Functionality described above can be applied to the following components:

  • chart
  • combo
  • dataview
  • form
  • grid
  • tree
  • treeGrid

form

  • loading data from dhtmlXDataStore
myForm.bind(myStore);
  • binding to other components (tree, grid, dataview etc.)
myForm.bind(myGrid);

Beware, for correct running you should specify the same IDs for grid columns and form controls:

myGrid.setColumnIds("col1, col2, col3");

var formData = [
    {type: "input", name:"col1"},
    {type: "input", name:"col2"},
    {type: "input", name:"col3"}
]

myForm = new dhtmlXForm("box", formData);
  • binding to server-side
//specify here the path to a file which will get change requests
myForm.dataFeed("data/form.php");
myForm.bind(myGrid);
  • pushing data back

If you have form which is bound to grid (common edit scenario), after values in form changed by user, you may need to push updated data back to the master grid. To do so, just call:

myForm.bind(myGrid);
myForm.attachEvent("onButtonClick", function(id){
     myform.save() //will push updates back to the master list
});

If you have 2 forms bound to a DataStore object, sequential saving their changes can provoke data loss. In this case, use the saveBatch() method to prevent losses and save data simultaneously.

myForm1.bind(myStore);
myForm2.bind(myStore);

myStore.saveBatch(function(){
        myForm1.save();
        myForm2.save();
});
  • unbinding components (tree, grid, dataview etc.)

Use the method unbind():

myForm.unbind(myGrid);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXForm API
  • How to Start with dhtmlxForm
  • Object Constructor
  • List of Controls
  • XML Format
  • JSON Format
  • HTML Format
  • Working with Userdata
  • Config and Operations
  • Positioning Controls
  • Validation
  • Creating a Custom Control
  • Server-side Integration
  • Integration with DHTMLX
  • Binding Data
  • Handling Events
    • Attaching event handler
    • Detaching event handler
    • Triggering HTML Events
    • Using the integrated DHTMLX components' events
    • The full list of events
Start Form

Handling Events

dhtmlxForm allows to handle different events using its events handling system. In general it is similar to what is used in other DHTMLX components. You can attach several handlers to the same event and detach them using two respective methods: attachEvent(...) and detachEvent(...).

Though event handler is attached to the form, it's attached to each control inside of it. You can determine what is the target control for event by the ID passed to the event handler.

myForm.attachEvent("onButtonClick", function(id){
    alert("Button with name "+id+" was clicked");
});

Event names are case-insensitive.

Attaching event handler

If you need to attach event, use the attachEvent() method.

myForm.attachEvent(evName, evHandler);
  • evName - the name of an event;
  • evHandler - the user-defined event handler.

Detaching event handler

You can also delete event if you have such necessity. The detachEvent() method helps you here.

var id = myform.attachEvent("onButtonClick",some_code);
   ...
myform.detachEvent(id);

Triggering HTML Events

You have the possibility to handle HTML input-related events for a number of dhtmlxForm inputs: input and textarea, password, calendar and colorpicker.

All you have to do is to get an input instance through the getInput() method. Then you can work with the received instance the same as with any ordinary HTML object.

There are 2 possible scenarios:

  1. You want to handle some HTML event and keep dhtmlxForm events you have attached before.
    var inpLogin = myForm.getInput("login");
if (window.addEventListener) {
    inpLogin.addEventListener("blur",doOnBlur,false);
} else {
    inpLogin.attachEvent("onblur",doOnBlur);
}
  2. You want to handle some HTML event and overwrite (detach) the already attached dhtmlxForm events.
    var inpEmail = myForm.getInput("email");
inpEmail.onblur = doOnBlur;

Using the integrated DHTMLX components' events

To use events of the dhtmlx components you've integrated into form (a list of components you can put into form), you should:

get component instance through one of the following methods:

  • getCalendar()
  • getColorPicker()
  • getCombo()
  • getEditor()

and attach the appropriate event.

var formData = [
    ...
    {type: "combo", name: "myCombo", label: "Select Band", options:[
    {value: "opt_a", text: "Cradle Of Filth"},
    {value: "opt_b", text: "Children Of Bodom", selected:true}
]};

var myForm = new dhtmlXForm("form_container",formData);
var combo = dhxForm.getCombo("myCombo");
combo.attachEvent("onCheck",function(value,state){
    if (value==2) return false;
    return true;
});

The full list of events

You can find the list of all available events in the dhtmlXForm API.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Form Builder DHTMLX Docs

Documentation
  • Form Builder
    • Form Builder Overview
    • Step 1. Creating a Mockup
    • Step 2. Configuring Items
    • Step 3. Previewing the Result
    • Step 4. Exporting Form
Start

Form Builder

DHTMLX Form Builder is an online tool intended for making the process of creating forms easier. It allows you not to write huge amounts of code for positioning and arranging elements in a form.

You just add columns and blocks and fill them up with desired controls. Then take the ready-made code and insert it into your application. As simple as that. Try and enjoy!

Form Builder Overview

Form Builder consists of 4 main parts:

  • Toolbar - contains buttons to manipulate data export/import and allows repeating or canceling actions.
  • Tree - takes the left part of the Form Builder, presents the arrangement of form elements in a hierarchical way:
    • The biggest form components - columns are displayed as folders.
    • Blocks/fieldsets with form controls are placed as nested folders inside columns.
    • Controls are located inside of columns, blocks or lie separately.
    • The Settings elements define configuration settings for each block/fieldset of controls.
  • Editor - the middle and most prominent part of the tool, allows building the form layout and defining the place of each element, as well as lets evaluate the result of each action at once. It presents the created form in two tabs:
    • Mockup - lets you define the order of form elements arrangement and relations between them
    • Preview - is intended for previewing the resulting form.
  • Item Configuration Block - the very right part of the Form Builder, displays the list of possible elements' properties that can be tuned to get the desired interface.

Step 1. Creating a Mockup

Start creating the layout of your future form in the Mockup tab of the Editor view.

Adding elements

To add a new block, a column or a separate control click the [image] icon.

Importing ready config

You can also import form configuration into Form Builder in JSON format.

Click the Import button and choose one of the two options:

  • Import - to insert a JSON object in the appearing popup
  • Import from File - to select a file that contains form structure as a JSON object

Deleting elements

To remove a column or a block, click the [image] icon. To delete an unnecessary item, use the cross sign in the input container.

Manipulating form elements in the Tree view

You can also add, delete or copy a column, a block or an item in the Tree view. Just call the context menu by right-clicking the needed form element and choose the corresponding menu item.

Step 2. Configuring Items

By default, all items are added into the mockup as inputs.

To set the desired type of the control, select it in the Mockup tab or the Tree view and choose the type you need in the Items Config view.

To tune the appearance and position of a form control in a proper way, define values of other control's properties in the Items Config view.

Step 3. Previewing the Result

To see the current result and fix the elements position and arrangement, go to the Preview tab of the Editor.

Step 4. Exporting Form

To save the created form configuration, click the Export button. The resulting code of your form will appear in the popup window.

Click "Save to File" and form structure will be exported into a file as a JSON object.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Grid DHTMLX Docs

Documentation
  • Grid
    • dhtmlXGrid API
    • Cell-Level API
    • Creating Grid on a Page
    • Loading and Storing Data
    • Configuring Grid
    • Managing Data in Grid
    • Styling Grid
    • Integrating with Other Components
Start

Grid

dhtmlxGrid is a flexible, smart, and easy-to-use JavaScript grid component which allows creating DHTMLX tables with rich in-cell editing, fixed multi-line headers and footers, resizable, sortable, and draggable columns, built-in filtering, searching, and grouping capabilities. dhtmlxGrid possesses advanced drag-and-drop, dynamic loading, customizable view, a set of predefined cell editors and many other capabilities that make it a fully-featured aid for developers. Complete JavaScript API is provided to help users save time on configuring.

API Reference
  • dhtmlXGrid API
  • Cell-Level API
Related resources
  • You may download Standard or PRO Edition of dhtmlxGrid from dhtmlx.com
  • Check online samples for dhtmlxGrid
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Creating Grid on a Page

  • Basic Initialization
  • Initializing Grid from HTML
 Says how to build a standard grid on a page and bring it to life: configure with specific settings, customize the default templates, attach events, etc.

Loading and Storing Data

  • Exploring Supported Data Formats
  • Loading Data into Grid
  • Loading Big Datasets
  • Saving Data on the Server Side
  • Serializing Data to XML,CSV
  • Exporting Data to PDF,Excel
  • Loading Additional Data to Grid
 Discusses the ways of loading data into the grid: different data sources, formats, techniques.

Configuring Grid

  • Common Operations with Grid and its Elements
  • Column Types
  • Headers and Footers
  • Freezing Columns (the 'Split' Mode)
  • Enabling Keyboard Navigation
  • Managing the Selection
  • Drag-and-Drop Support
  • Saving Grid Configuration in Cookies
  • Configuring Grid from XML
  • Configuring Grid from JSON
  • Grouping Columns
 Teaches you how to define the common structure and content of dhtmlxGrid: columns, headers, dimensions, etc.

Managing Data in Grid

  • Iterating Over Data
  • Sorting Data
  • Filtering Data
  • Searching in Grid
  • Grouping Data by Rows
  • Formatting Number and Date Values
  • Statistics Counters
  • Validating Data Items
  • Using Math Formulas for Data
  • Clipboard Operations
  • Providing Undo/Redo Operations
 Covers the basics of performing general operations under data items such as setting the date template or format, filtering, validating, paging etc.

Styling Grid

  • Exploring Available Skins
  • Styling Grid's Elements
 Focuses on how to fine-tune the grid appearance: redefining the default component CSS classes, applying the predefined skin etc.

Integrating with Other Components

  • HTML Form
  • Tree
  • Chart
  • Combo
  • Context menu
  • DataStore
 Introduces the components you can integrate dhtmlxGrid with.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXGrid API DHTMLX Docs

Documentation
  • dhtmlXGrid API
    • Methods
    • Events
    • Others
  • Cell-Level API
  • Creating Grid on a Page
  • Loading and Storing Data
  • Configuring Grid
  • Managing Data in Grid
  • Styling Grid
  • Integrating with Other Components
Start Grid

dhtmlXGrid API

Methods
addRow | adds a row to the grid
addRowFromClipboard | allows the user to add a new row from clipboard
adjustColumnSize | adjusts a column's size to make all content visible
attachEvent | adds any user-defined handler to available events
attachFooter | attaches an additional line to the footer
attachHeader | attaches an additional line to the header
attachToObject | attaches Grid to some object in DOM
cellById | gets dhtmlXGridCellObject object
cellByIndex | gets dhtmlXGridCellObject object
cellToClipboard | copies the value of a cell to the clipboard
cells | gets dhtmlXGridCellObject object
cells2 | gets dhtmlXGridCellObject object
changePage | changes the current page in grid
changePageRelative | changes the current page in grid
changeRowId | changes id of the row to the new one
checkAll | checks all checkboxes in the grid
clearAll | deletes all rows in the grid
clearAndLoad | clears the existing grid state and loads data from an external file ( xml, json, jsarray, csv )
clearChangedState | clears wasChanged state for all cells in grid (and wasAdded state as well, if called with a parameter)
clearConfigCookie | clears cookie with grid config details
clearSelection | removes selection from the grid
collapseAllGroups | collapses all groups
collapseColumns | collapses a group of columns
collapseGroup | collapses a group of rows
collectValues | gets all possible values of a column
copyBlockToClipboard | copies the content of a block selection into clipboard in CSV format (delimiter as set for CSV serialization)
copyRowContent | copies a row's content to another existing row
deleteColumn | deletes a column
deleteRow | deletes a row from the grid
deleteSelectedRows | deletes selected row(s)
destructor | destructor, removes the grid and cleans used memory
detachEvent | removes an event handler
detachFooter | removes a footer line from the grid (opposite to attachFooter)
detachHeader | removes a header line from the grid (opposite to attachHeader)
disableUndoRedo | disables the Undo/Redo functionality in the grid
doRedo | executes the redo operation
doUndo | executes the undo operation
doesRowExist | determines if a row with the specified id exists
editCell | creates an Editor object and switches the selected cell to the edit mode, if allowed
editStop | returns the value from the editor(if presents) to the cell and closes the editor
enableAccessKeyMap | enables Access keyboard navigation
enableAlterCss | sets css styles for even/odd rows
enableAutoHeight | enables autoheight of the grid
enableAutoHiddenColumnsSaving | enables automatic saving of a column's state ( hidden/shown )
enableAutoSaving | enables automatic saving of size, sorting order and columns order
enableAutoSizeSaving | enables automatic size saving to cookie
enableAutoWidth | changes the size of grid's container on the fly to fit total width of grid's columns
enableBlockSelection | enables block selection mode in grid
enableCSVAutoID | enables the mode in which IDs for the rows loaded from CSV are autogenerated
enableCSVHeader | enables recognizing the first row in CSV as the header
enableCellIds | enables/disables unique ids for cells (id will be automatically created by the template: 'c_[RowId]_[colIndex]')
enableColSpan | enables/disables colspan support
enableColumnAutoSize | adjusts column size to make all content visible on the header doublclick
enableColumnMove | enables the move column functionality
enableContextMenu | enables/disables context menu
enableDistributedParsing | enables/disables distributed parsing (rows are parsed portion by portion with some timeout)
enableDragAndDrop | enables/disables drag-and-drop
enableDragOrder | switches to the mode in which dragged items drop in the target location in the same order as they were in the source grid
enableEditEvents | enables/disables events which invoke excell editing
enableEditTabOnly | enables/disables the mode when readonly cell is not available with tab
enableExcelKeyMap | enables Excel keyboard navigation
enableHeaderImages | specifies if the values passed to Header are images' file names
enableHeaderMenu | enables a popup menu which allows hidding/showing columns
enableKeyboardSupport | enables/disables hot keys in grid
enableLightMouseNavigation | enables/disables light mouse navigation mode (row selection with mouse over, editing with single click)
enableMarkedCells | sets the marked cells support to enabled/disabled state
enableMathEditing | enables/disables editing of math cells
enableMathSerialization | enables/disables serialization of math formulas
enableMercyDrag | enables drag without removing (copy instead of move)
enableMultiline | sets the multiline rows support to enabled/disabled state
enableMultiselect | sets multiselect mode to enabled or disabled state
enableOrderSaving | enables automatic column order saving to cookie
enablePaging | enables smart paging mode
enablePreRendering | enables pre-rendering rows during scrolling.
enableResizing | enables/disables resizing for specified colums
enableRowsHover | enables/disables hovering on a row on mouse over
enableRowspan | enables rowspan in treegrid
enableSmartRendering | enables smart rendering mode
enableSortingSaving | enables automatic saving of the sorting state to cookie
enableStableSorting | enables stable sorting algorithm
enableTooltips | enables/disables tooltips for specified colums
enableUndoRedo | enables the Undo/Redo functionality in grid
enableValidation | enable validation in the grid
expandAllGroups | expands all groups
expandColumns | expands a group of columns
expandGroup | expands a group of rows
filterBy | filters Grid by mask
filterByAll | forces Grid filtering by registered inputs (created by # starting shortcuts, or by the makeFilter function)
findCell | finds cell in grid by value
forEachCell | executes the code for each cell in a row
forEachRow | executes code for each row in the grid
forEachRowInGroup | iterates through all rows in some group
forceFullLoading | loads all data in the grid, which is in dyn. srnd or dyn. paging mode
forceLabelSelection | affects block selection, so it will copy/paste only the visible text, not the values behind
getAllRowIds | gets the list of all row ids in the grid
getCellExcellType | returns the excell type of the cell in question
getChangedRows | gets the list of IDs of the changed rows
getCheckedRows | gets the list of ids of all the rows with checked exCell in the specified column
getColIndexById | gets column index by column id
getColLabel | gets the label of the column specified by index
getColType | gets column type by column index
getColTypeById | gets the column type by its ID
getColWidth | gets the width of the specified column in pixels
getColumnCombo | returns dhtmlXCombo column object
getColumnId | gets the id of the column specified by index
getColumnLabel | gets the label of the column specified by index
getColumnsNum | returns the number of columns in the grid (including [hidden columns](setColumnHidden))
getCombo | gets Combo object of the specified column
getCustomCombo | gets the combobox specific for the cell in question
getFilterElement | gets the input object of the filter linked to the column in question
getFooterLabel | gets the label of the footer specified by index
getHeaderMenu | returns dhtmlXMenu object of the grid header menu
getMarked | returns an array of marked cells (pairs of row id and column index)
getRedo | gets length of available ReDo operations
getRowAttribute | returns the row attribute's value which was set in the XML tag
getRowData | returns the row data
getRowId | gets the row id by the row index
getRowIndex | gets the row index by the row id (grid only)
getRowsNum | returns the number of rows in the grid (in case of dynamic mode it will return an expected number of rows)
getSelectedBlock | returns the attributes of the current block selection
getSelectedCellIndex | returns the index of the selected cell or -1, if there is no selected cell
getSelectedRowId | returns the id of the selected row (a list of ids with default delimiter) or null, if there are no selected rows
getSortingState | gets the sorting state of the grid
getStateOfView | returns details about current grid state
getUndo | gets length of available UnDo operations
getUserData | gets user data
gridFromClipboard | initializes grid from CSV stored in the clipboard
gridToClipboard | copies grid in CSV to the clipboard
gridToGrid | redefine this method in your code to specify how grid row values should be used in another grid
gridToTreeElement | redefine this method in your code to define how grid row values should be used in tree
groupBy | groups grid content by values of the specified column
groupStat | returns the result of aggregation for a column
init | initializes grid
insertColumn | adds a new column to the grid
isColumnHidden | gets the shown/hidden status of the column
load | loads data from an external file ( xml, json, jsarray, csv )
loadHiddenColumnsFromCookie | loads the sorting order from cookie
loadOpenStates | loads open state of TreeGrid into cookie
loadOrderFromCookie | loads sorting order from cookie
loadSizeFromCookie | loads grid layout from cookie
loadSortingFromCookie | loads sorting order from cookie
lockRow | locks/unlocks a row for editing
makeFilter | makes a filter from any input element (text filter), select (dropdown) or DIV (combobox based on dhtmlxCombo)
makeSearch | makes a search box (sets selection on the row with the found value) from any input
mark | marks/unmarks the specified cell
moveColumn | moves the column of the specified index to a new position
moveRow | moves a row
moveRowDown | moves a row one position down, if possible
moveRowTo | moves a row
moveRowUp | moves a row one position up, if possible
parse | loads data from a local data source (XML string, CSV string, XML island, XML object, JSON object, javascript array)
pasteBlockFromClipboard | pastes the content of the clipboard into a block selection of the grid
post | allows sending POST requests by loading data from external file ( xml, json, jsarray, csv )
preventIECaching | prevents caching in IE by adding random values to URL string
printView | generates the print friendly view
refreshComboColumn | updates the cells of the combo column
refreshFilters | refreshes the lists of values in all the filters created by shortcuts or by makeFilter calls
refreshMath | restores math after column moving
registerCList | registers an array of options for a multiselect column ("clist") of the grid
rowToClipboard | copies the value of a row to the clipboard
rowToDragElement | redefine this method in your code to specify how grid row values should be displayed during the dragging
saveHiddenColumnsToCookie | saves hidden columns to cookie
saveOpenStates | stores open state of TreeGrid in cookie
saveOrderToCookie | saves the columns' order to cookie
saveSizeToCookie | saves grid layout to cookie
saveSortingToCookie | saves the sorting order to cookie
selectAll | selects all rows in the grid, doesn't trigger any events
selectBlock | selects a block in the Grid, according to the specified rows' ids and columns' indexes
selectCell | sets selection to the specified row-cell
selectRow | selects a row (and its first cell)
selectRowById | selects row by ID
serialize | gets actual xml of the grid
serializeToCSV | serializes to CSV string
setActive | sets the grid active to make key navigation possible
setAwaitedRowHeight | applies a custom height of a row which will be used in the smart rendering mode for row calculation
setCSVDelimiter | changes csv delimiter
setCellExcellType | sets an excell type for the cell in question
setCellTextStyle | sets a style for a cell
setCheckedRows | sets a value for all checkboxes in the specified column
setColAlign | aligns values in columns
setColLabel | sets a new label for the column header
setColSorting | sets the types of column sort
setColTypes | sets column types
setColVAlign | sets vertical align for columns
setColValidators | assigns validators to the related column
setColWidth | sets the width for the specified column in pixels (doesn't work with the percentage based grid)
setColspan | dynamically sets colspan in a row starting from the specified column index
setColumnColor | colors the background of columns
setColumnExcellType | sets an excell type for all the cells in the specified column
setColumnHidden | hides/shows a column
setColumnId | sets id for the specified column
setColumnIds | sets id for every column
setColumnLabel | sets a new column header label
setColumnMinWidth | sets the minimum column width (works only for manual resizing)
setColumnsVisibility | sets the list of visible/hidden columns
setCustomSorting | sets a custom sorting
setDateFormat | sets a mask for date formatting in the grid (works for "dhxCalendar" and "dhxCalendarA" types only)
setDelimiter | sets a delimiter character used in list values (default is ",")
setDragBehavior | sets Drag-And-Drop behavior
setEditable | manages the editability of the grid
setExternalTabOrder | sets elements which get focus when the Tab button is pressed in the last or in the first (Tab+Shift) cell
setFieldName | allows defining an input's name which will be used for data sending,
setFooterLabel | sets a new label for a cell in the footer
setHeader | sets the header label and default params for new headers
setIconsPath | sets the path to external images used in the grid (tree and img column type)
setIconset | sets the font awesome iconset
setImagesPath | defines the path to the imgs folder
setInitWidths | sets the width of columns in pixels
setInitWidthsP | sets the width of columns in percents
setMathRound | enables/disables rounding during the math calculations
setNoHeader | creates a grid without header
setNumberFormat | sets a mask for formatting numeric data (works for **"edn"**, **"ron"** excell only)
setPagingSkin | allows setting a custom paging skin
setPagingTemplates | allows setting paging templates for the default skin
setPagingWTMode | configures the paging with toolbar mode
setRowAttribute | sets a row attribute
setRowColor | sets the background color of a row (via the bgcolor attribute)
setRowData | sets new data for row's columns
setRowExcellType | sets an excell type for all cells in the specified row
setRowHidden | hides/shows a row
setRowId | sets a new id for a row by its index
setRowTextBold | sets the text of a row BOLD
setRowTextNormal | sets the text weight of a row to normal
setRowTextStyle | sets the style of a row
setRowspan | sets rowspan of the specified length starting from the specified cell
setSerializableColumns | specifies which column must be serialized (if you don't use this method, all columns will be serialized)
setSerializationLevel | configures XML serialization
setSizes | resets sizes of the grid's elements
setSkin | sets one of the predefined css styles (xp, mt, gray, light, clear, modern, sb_dark)
setSortImgState | sets the position and visibility of a sort arrow
setStyle | modifies the default style of the grid and its elements
setSubGrid | attaches a grid-like editor to a grid's column
setSubTree | attaches a tree-like editor to a grid's column
setTabOrder | sets the tab order of columns
setUserData | sets user data for a row
setXMLAutoLoading | enables dynamic loading from XML
showRow | scrolls a grid to make the specified row visible
sortRows | sorts the Grid by the specified column
splitAt | splits the grid
startFastOperations | starts the fast operation mode
stopFastOperations | turns off the fast operation mode, needs to be executed to normalize the view
submitAddedRows | includes additional data with the info about which rows were added and which ones deleted, enabled by default
submitColumns | sets the list of columns the data of which will be updated
submitOnlyChanged | includes only the changed rows into the form submit
submitOnlyRowID | includes only rows' IDS into the form submit
submitOnlySelected | includes only the selected rows into the form submit
submitSerialization | includes a serialized grid as a part of the form submit
toExcel | exports data from dhtmxlGrid to an Excel document
toPDF | exports data from dhtmxlGrid to a PDF document
treeToGridElement | redefine this method in your code to specify how tree node values should be used in the grid
uid | returns the unique ID
unGroup | ungroups the grid to return it into the plain view
uncheckAll | unchecks all checkboxes of the grid
unmarkAll | removes selection from all the marked cells
updateCellFromClipboard | sets the value of a cell from the clipboard
updateFromXML | refreshes grid from XML (doesn't work for buffering, tree grid or rows in smart rendering mode)
updateGroups | forces grid grouping by registered parameters
updateRowFromClipboard | sets the value of a row from the clipboard
validateCell | forces validation of a specific cell
Events
onAfterCMove | fires after the column has been moved to a new position
onAfterRowDeleted | fires after a row has been deleted from the grid
onAfterSorting | fires exactly after sorting has occured in the grid
onBeforeBlockSelected | fires when the user starts selecting a block
onBeforeCMove | fires when a column moving operation starts
onBeforeContextMenu | fires immediately before showing a context menu
onBeforeDrag | fires when the drag operation starts
onBeforeFormSubmit | fires before submitting data to the form
onBeforePageChanged | fires before the active page in the grid is changed (paging extension)
onBeforeRowDeleted | fires right before a row is deleted
onBeforeSelect | fires a moment before a row in the grid is selected
onBeforeSorting | fires before data sorting is started
onBlockRightClick | fires after clicking by the right mouse button on the selection block
onBlockSelected | fires when some area is selected in the grid (block selection extension)
onCalendarShow | fires when a calendar pops up in the grid
onCellChanged | fires when a cell value has been changed by user actions or by API calls ( )
onCellMarked | fires immediately after a cell has been selected
onCellUnMarked | fires immediately after a cell is unselected
onCheck | fires after the state of a checkbox has been changed
onCheckbox | the event is deprecated, use the onCheck event instead; fires after the state was changed
onClearAll | fires when the grid is cleared (reloaded)
onCollectValues | fires after the values have been collected to fill the select filter
onColumnCollapse | the event occurs after a group of columns has been collapsed
onColumnHidden | fires after a column has been hidden (the setColumnHidden method has been called)
onDataReady | fires when the data is loaded to the grid but hasn't been rendered yet
onDhxCalendarCreated | fires on calendar's initialization on the page
onDistributedEnd | fires on the end of distributed parsing
onDrag | fires when an item is dragged to another target and the mouse is released, the event can be blocked
onDragIn | fires when an item is dragged to a potential target (the event can be blocked)
onDragOut | fires when an item is dragged out of the potential target (the event can be blocked)
onDrop | fires when an item is already placed in its final position
onDynXLS | fires before requesting additional data from the server in case of dynamic Smart Rendering or dynamic Paging
onEditCancel | fires when the edit operation was canceled
onEditCell | fires 1-3 times depending on cell's editability (see the stage parameter)
onEmptyClick | fires on clicking the dhtmlxgrid area which is not filled with data
onEnter | fires immediately after the Enter key was pressed
onFilterEnd | fires when filtering is completed (filtering extension)
onFilterStart | fires when filtering has been activated but before the real filtering started
onGridReconstructed | fires immediately after a row has been added/deleted or the grid has been reordered
onGroup | fires when a grid was grouped by some column
onGroupClick | fires on clicking a group row (can be blocked)
onGroupStateChanged | fires when a group was opened/closed
onHeaderClick | fires right after the header has been clicked, before sorting or any other actions
onKeyPress | fires after a key has been pressed but before the default key processing starts
onLastRow | fires on pressing the Down-Arrow button while the last row of the page is selected
onLiveValidationCorrect | fires when validation runs successfully
onLiveValidationError | fires when validation runs and rules execution are failed
onMouseOver | fires when the mouse pointer is moved over a cell
onPageChanged | fires after the active page of the grid has been changed (paging extension)
onPaging | fires each time when paging settings are changed (paging extension)
onResize | fires on each resize iteration
onResizeEnd | fires when resizing of a column is finished
onRightClick | fires immediately after the right mouse button has been clicked on a grid's row
onRowAdded | fires right after a row has been added to the grid
onRowCreated | fires after a row has been created in the grid and filled with data
onRowDblClicked | fires right after a row has been double clicked, before a cell editor is opened by a dbl click
onRowHide | fires when the row is hiding
onRowIdChange | fires after the ID of a row has been changed (changeRowId, setRowId, dataprocessor)
onRowInserted | fires when the row is added to the grid and filled with data
onRowPaste | fires for each row pasted from the clipboard (block selection extension)
onRowSelect | fires immediately after a row in the grid has been clicked
onScroll | fires immediately after scrolling has occured
onSelectStateChanged | fires immediately when the selection state has been changed
onStatReady | fires after the stat values have been calculated
onSubAjaxLoad | fires when sub-row-ajax cell loads its data
onSubGridCreated | fires when the creation of a sub-grid was initialized (can be blocked)
onSubRowOpen | fires when a sub-row(sub-grid) was opened/closed
onSyncApply | fires when data synchronization is finished
onTab | fires during the tabulation in the grid, blockable
onUndo | fires after the undo operation is implemented
onUnGroup | fires when the grid was ungrouped
onValidationCorrect | fires when validation runs successfully
onValidationError | fires when validation runs and rules execution are failed
onXLE | fires simultaneously with ending XML parsing, new items are already available in the grid
onXLS | fires before sending the request for a new XML to the server
Other
csvParser | object that controls CSV parsing
editor | reference to the cell that is in the edit state
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • addRow
    • addRowFromClipboard
    • adjustColumnSize
    • attachEvent
    • attachFooter
    • attachHeader
    • attachToObject
    • cellById
    • cellByIndex
    • cellToClipboard
    • cells
    • cells2
    • changePage
    • changePageRelative
    • changeRowId
    • checkAll
    • clearAll
    • clearAndLoad
    • clearChangedState
    • clearConfigCookie
    • clearSelection
    • collapseAllGroups
    • collapseColumns
    • collapseGroup
    • collectValues
    • copyBlockToClipboard
    • copyRowContent
    • deleteColumn
    • deleteRow
    • deleteSelectedRows
    • destructor
    • detachEvent
    • detachFooter
    • detachHeader
    • disableUndoRedo
    • doRedo
    • doUndo
    • doesRowExist
    • editCell
    • editStop
    • enableAccessKeyMap
    • enableAlterCss
    • enableAutoHeight
    • enableAutoHiddenColumnsSaving
    • enableAutoSaving
    • enableAutoSizeSaving
    • enableAutoWidth
    • enableBlockSelection
    • enableCSVAutoID
    • enableCSVHeader
    • enableCellIds
    • enableColSpan
    • enableColumnAutoSize
    • enableColumnMove
    • enableContextMenu
    • enableDistributedParsing
    • enableDragAndDrop
    • enableDragOrder
    • enableEditEvents
    • enableEditTabOnly
    • enableExcelKeyMap
    • enableHeaderImages
    • enableHeaderMenu
    • enableKeyboardSupport
    • enableLightMouseNavigation
    • enableMarkedCells
    • enableMathEditing
    • enableMathSerialization
    • enableMercyDrag
    • enableMultiline
    • enableMultiselect
    • enableOrderSaving
    • enablePaging
    • enablePreRendering
    • enableResizing
    • enableRowsHover
    • enableRowspan
    • enableSmartRendering
    • enableSortingSaving
    • enableStableSorting
    • enableTooltips
    • enableUndoRedo
    • enableValidation
    • expandAllGroups
    • expandColumns
    • expandGroup
    • filterBy
    • filterByAll
    • findCell
    • forEachCell
    • forEachRow
    • forEachRowInGroup
    • forceFullLoading
    • forceLabelSelection
    • getAllRowIds
    • getCellExcellType
    • getChangedRows
    • getCheckedRows
    • getColIndexById
    • getColLabel
    • getColType
    • getColTypeById
    • getColWidth
    • getColumnCombo
    • getColumnId
    • getColumnLabel
    • getColumnsNum
    • getCombo
    • getCustomCombo
    • getFilterElement
    • getFooterLabel
    • getHeaderMenu
    • getMarked
    • getRedo
    • getRowAttribute
    • getRowData
    • getRowId
    • getRowIndex
    • getRowsNum
    • getSelectedBlock
    • getSelectedCellIndex
    • getSelectedRowId
    • getSortingState
    • getStateOfView
    • getUndo
    • getUserData
    • gridFromClipboard
    • gridToClipboard
    • gridToGrid
    • gridToTreeElement
    • groupBy
    • groupStat
    • init
    • insertColumn
    • isColumnHidden
    • load
    • loadHiddenColumnsFromCookie
    • loadOpenStates
    • loadOrderFromCookie
    • loadSizeFromCookie
    • loadSortingFromCookie
    • lockRow
    • makeFilter
    • makeSearch
    • mark
    • moveColumn
    • moveRow
    • moveRowDown
    • moveRowTo
    • moveRowUp
    • parse
    • pasteBlockFromClipboard
    • post
    • preventIECaching
    • printView
    • refreshComboColumn
    • refreshFilters
    • refreshMath
    • registerCList
    • rowToClipboard
    • rowToDragElement
    • saveHiddenColumnsToCookie
    • saveOpenStates
    • saveOrderToCookie
    • saveSizeToCookie
    • saveSortingToCookie
    • selectAll
    • selectBlock
    • selectCell
    • selectRow
    • selectRowById
    • serialize
    • serializeToCSV
    • setActive
    • setAwaitedRowHeight
    • setCSVDelimiter
    • setCellExcellType
    • setCellTextStyle
    • setCheckedRows
    • setColAlign
    • setColLabel
    • setColSorting
    • setColTypes
    • setColVAlign
    • setColValidators
    • setColWidth
    • setColspan
    • setColumnColor
    • setColumnExcellType
    • setColumnHidden
    • setColumnId
    • setColumnIds
    • setColumnLabel
    • setColumnMinWidth
    • setColumnsVisibility
    • setCustomSorting
    • setDateFormat
    • setDelimiter
    • setDragBehavior
    • setEditable
    • setExternalTabOrder
    • setFieldName
    • setFooterLabel
    • setHeader
    • setIconsPath
    • setIconset
    • setImagesPath
    • setInitWidths
    • setInitWidthsP
    • setMathRound
    • setNoHeader
    • setNumberFormat
    • setPagingSkin
    • setPagingTemplates
    • setPagingWTMode
    • setRowAttribute
    • setRowColor
    • setRowData
    • setRowExcellType
    • setRowHidden
    • setRowId
    • setRowTextBold
    • setRowTextNormal
    • setRowTextStyle
    • setRowspan
    • setSerializableColumns
    • setSerializationLevel
    • setSizes
    • setSkin
    • setSortImgState
    • setStyle
    • setSubGrid
    • setSubTree
    • setTabOrder
    • setUserData
    • setXMLAutoLoading
    • showRow
    • sortRows
    • splitAt
    • startFastOperations
    • stopFastOperations
    • submitAddedRows
    • submitColumns
    • submitOnlyChanged
    • submitOnlyRowID
    • submitOnlySelected
    • submitSerialization
    • toExcel
    • toPDF
    • treeToGridElement
    • uid
    • unGroup
    • uncheckAll
    • unmarkAll
    • updateCellFromClipboard
    • updateFromXML
    • updateGroups
    • updateRowFromClipboard
    • validateCell
  • Events
  • Others
Start Grid dhtmlXGrid API

Methods

addRow | adds a row to the grid
addRowFromClipboard | allows the user to add a new row from clipboard
adjustColumnSize | adjusts a column's size to make all content visible
attachEvent | adds any user-defined handler to available events
attachFooter | attaches an additional line to the footer
attachHeader | attaches an additional line to the header
attachToObject | attaches Grid to some object in DOM
cellById | gets dhtmlXGridCellObject object
cellByIndex | gets dhtmlXGridCellObject object
cellToClipboard | copies the value of a cell to the clipboard
cells | gets dhtmlXGridCellObject object
cells2 | gets dhtmlXGridCellObject object
changePage | changes the current page in grid
changePageRelative | changes the current page in grid
changeRowId | changes id of the row to the new one
checkAll | checks all checkboxes in the grid
clearAll | deletes all rows in the grid
clearAndLoad | clears the existing grid state and loads data from an external file ( xml, json, jsarray, csv )
clearChangedState | clears wasChanged state for all cells in grid (and wasAdded state as well, if called with a parameter)
clearConfigCookie | clears cookie with grid config details
clearSelection | removes selection from the grid
collapseAllGroups | collapses all groups
collapseColumns | collapses a group of columns
collapseGroup | collapses a group of rows
collectValues | gets all possible values of a column
copyBlockToClipboard | copies the content of a block selection into clipboard in CSV format (delimiter as set for CSV serialization)
copyRowContent | copies a row's content to another existing row
deleteColumn | deletes a column
deleteRow | deletes a row from the grid
deleteSelectedRows | deletes selected row(s)
destructor | destructor, removes the grid and cleans used memory
detachEvent | removes an event handler
detachFooter | removes a footer line from the grid (opposite to attachFooter)
detachHeader | removes a header line from the grid (opposite to attachHeader)
disableUndoRedo | disables the Undo/Redo functionality in the grid
doRedo | executes the redo operation
doUndo | executes the undo operation
doesRowExist | determines if a row with the specified id exists
editCell | creates an Editor object and switches the selected cell to the edit mode, if allowed
editStop | returns the value from the editor(if presents) to the cell and closes the editor
enableAccessKeyMap | enables Access keyboard navigation
enableAlterCss | sets css styles for even/odd rows
enableAutoHeight | enables autoheight of the grid
enableAutoHiddenColumnsSaving | enables automatic saving of a column's state ( hidden/shown )
enableAutoSaving | enables automatic saving of size, sorting order and columns order
enableAutoSizeSaving | enables automatic size saving to cookie
enableAutoWidth | changes the size of grid's container on the fly to fit total width of grid's columns
enableBlockSelection | enables block selection mode in grid
enableCSVAutoID | enables the mode in which IDs for the rows loaded from CSV are autogenerated
enableCSVHeader | enables recognizing the first row in CSV as the header
enableCellIds | enables/disables unique ids for cells (id will be automatically created by the template: 'c_[RowId]_[colIndex]')
enableColSpan | enables/disables colspan support
enableColumnAutoSize | adjusts column size to make all content visible on the header doublclick
enableColumnMove | enables the move column functionality
enableContextMenu | enables/disables context menu
enableDistributedParsing | enables/disables distributed parsing (rows are parsed portion by portion with some timeout)
enableDragAndDrop | enables/disables drag-and-drop
enableDragOrder | switches to the mode in which dragged items drop in the target location in the same order as they were in the source grid
enableEditEvents | enables/disables events which invoke excell editing
enableEditTabOnly | enables/disables the mode when readonly cell is not available with tab
enableExcelKeyMap | enables Excel keyboard navigation
enableHeaderImages | specifies if the values passed to Header are images' file names
enableHeaderMenu | enables a popup menu which allows hidding/showing columns
enableKeyboardSupport | enables/disables hot keys in grid
enableLightMouseNavigation | enables/disables light mouse navigation mode (row selection with mouse over, editing with single click)
enableMarkedCells | sets the marked cells support to enabled/disabled state
enableMathEditing | enables/disables editing of math cells
enableMathSerialization | enables/disables serialization of math formulas
enableMercyDrag | enables drag without removing (copy instead of move)
enableMultiline | sets the multiline rows support to enabled/disabled state
enableMultiselect | sets multiselect mode to enabled or disabled state
enableOrderSaving | enables automatic column order saving to cookie
enablePaging | enables smart paging mode
enablePreRendering | enables pre-rendering rows during scrolling.
enableResizing | enables/disables resizing for specified colums
enableRowsHover | enables/disables hovering on a row on mouse over
enableRowspan | enables rowspan in treegrid
enableSmartRendering | enables smart rendering mode
enableSortingSaving | enables automatic saving of the sorting state to cookie
enableStableSorting | enables stable sorting algorithm
enableTooltips | enables/disables tooltips for specified colums
enableUndoRedo | enables the Undo/Redo functionality in grid
enableValidation | enable validation in the grid
expandAllGroups | expands all groups
expandColumns | expands a group of columns
expandGroup | expands a group of rows
filterBy | filters Grid by mask
filterByAll | forces Grid filtering by registered inputs (created by # starting shortcuts, or by the makeFilter function)
findCell | finds cell in grid by value
forEachCell | executes the code for each cell in a row
forEachRow | executes code for each row in the grid
forEachRowInGroup | iterates through all rows in some group
forceFullLoading | loads all data in the grid, which is in dyn. srnd or dyn. paging mode
forceLabelSelection | affects block selection, so it will copy/paste only the visible text, not the values behind
getAllRowIds | gets the list of all row ids in the grid
getCellExcellType | returns the excell type of the cell in question
getChangedRows | gets the list of IDs of the changed rows
getCheckedRows | gets the list of ids of all the rows with checked exCell in the specified column
getColIndexById | gets column index by column id
getColLabel | gets the label of the column specified by index
getColType | gets column type by column index
getColTypeById | gets the column type by its ID
getColWidth | gets the width of the specified column in pixels
getColumnCombo | returns dhtmlXCombo column object
getColumnId | gets the id of the column specified by index
getColumnLabel | gets the label of the column specified by index
getColumnsNum | returns the number of columns in the grid (including [hidden columns](setColumnHidden))
getCombo | gets Combo object of the specified column
getCustomCombo | gets the combobox specific for the cell in question
getFilterElement | gets the input object of the filter linked to the column in question
getFooterLabel | gets the label of the footer specified by index
getHeaderMenu | returns dhtmlXMenu object of the grid header menu
getMarked | returns an array of marked cells (pairs of row id and column index)
getRedo | gets length of available ReDo operations
getRowAttribute | returns the row attribute's value which was set in the XML tag
getRowData | returns the row data
getRowId | gets the row id by the row index
getRowIndex | gets the row index by the row id (grid only)
getRowsNum | returns the number of rows in the grid (in case of dynamic mode it will return an expected number of rows)
getSelectedBlock | returns the attributes of the current block selection
getSelectedCellIndex | returns the index of the selected cell or -1, if there is no selected cell
getSelectedRowId | returns the id of the selected row (a list of ids with default delimiter) or null, if there are no selected rows
getSortingState | gets the sorting state of the grid
getStateOfView | returns details about current grid state
getUndo | gets length of available UnDo operations
getUserData | gets user data
gridFromClipboard | initializes grid from CSV stored in the clipboard
gridToClipboard | copies grid in CSV to the clipboard
gridToGrid | redefine this method in your code to specify how grid row values should be used in another grid
gridToTreeElement | redefine this method in your code to define how grid row values should be used in tree
groupBy | groups grid content by values of the specified column
groupStat | returns the result of aggregation for a column
init | initializes grid
insertColumn | adds a new column to the grid
isColumnHidden | gets the shown/hidden status of the column
load | loads data from an external file ( xml, json, jsarray, csv )
loadHiddenColumnsFromCookie | loads the sorting order from cookie
loadOpenStates | loads open state of TreeGrid into cookie
loadOrderFromCookie | loads sorting order from cookie
loadSizeFromCookie | loads grid layout from cookie
loadSortingFromCookie | loads sorting order from cookie
lockRow | locks/unlocks a row for editing
makeFilter | makes a filter from any input element (text filter), select (dropdown) or DIV (combobox based on dhtmlxCombo)
makeSearch | makes a search box (sets selection on the row with the found value) from any input
mark | marks/unmarks the specified cell
moveColumn | moves the column of the specified index to a new position
moveRow | moves a row
moveRowDown | moves a row one position down, if possible
moveRowTo | moves a row
moveRowUp | moves a row one position up, if possible
parse | loads data from a local data source (XML string, CSV string, XML island, XML object, JSON object, javascript array)
pasteBlockFromClipboard | pastes the content of the clipboard into a block selection of the grid
post | allows sending POST requests by loading data from external file ( xml, json, jsarray, csv )
preventIECaching | prevents caching in IE by adding random values to URL string
printView | generates the print friendly view
refreshComboColumn | updates the cells of the combo column
refreshFilters | refreshes the lists of values in all the filters created by shortcuts or by makeFilter calls
refreshMath | restores math after column moving
registerCList | registers an array of options for a multiselect column ("clist") of the grid
rowToClipboard | copies the value of a row to the clipboard
rowToDragElement | redefine this method in your code to specify how grid row values should be displayed during the dragging
saveHiddenColumnsToCookie | saves hidden columns to cookie
saveOpenStates | stores open state of TreeGrid in cookie
saveOrderToCookie | saves the columns' order to cookie
saveSizeToCookie | saves grid layout to cookie
saveSortingToCookie | saves the sorting order to cookie
selectAll | selects all rows in the grid, doesn't trigger any events
selectBlock | selects a block in the Grid, according to the specified rows' ids and columns' indexes
selectCell | sets selection to the specified row-cell
selectRow | selects a row (and its first cell)
selectRowById | selects row by ID
serialize | gets actual xml of the grid
serializeToCSV | serializes to CSV string
setActive | sets the grid active to make key navigation possible
setAwaitedRowHeight | applies a custom height of a row which will be used in the smart rendering mode for row calculation
setCSVDelimiter | changes csv delimiter
setCellExcellType | sets an excell type for the cell in question
setCellTextStyle | sets a style for a cell
setCheckedRows | sets a value for all checkboxes in the specified column
setColAlign | aligns values in columns
setColLabel | sets a new label for the column header
setColSorting | sets the types of column sort
setColTypes | sets column types
setColVAlign | sets vertical align for columns
setColValidators | assigns validators to the related column
setColWidth | sets the width for the specified column in pixels (doesn't work with the percentage based grid)
setColspan | dynamically sets colspan in a row starting from the specified column index
setColumnColor | colors the background of columns
setColumnExcellType | sets an excell type for all the cells in the specified column
setColumnHidden | hides/shows a column
setColumnId | sets id for the specified column
setColumnIds | sets id for every column
setColumnLabel | sets a new column header label
setColumnMinWidth | sets the minimum column width (works only for manual resizing)
setColumnsVisibility | sets the list of visible/hidden columns
setCustomSorting | sets a custom sorting
setDateFormat | sets a mask for date formatting in the grid (works for "dhxCalendar" and "dhxCalendarA" types only)
setDelimiter | sets a delimiter character used in list values (default is ",")
setDragBehavior | sets Drag-And-Drop behavior
setEditable | manages the editability of the grid
setExternalTabOrder | sets elements which get focus when the Tab button is pressed in the last or in the first (Tab+Shift) cell
setFieldName | allows defining an input's name which will be used for data sending,
setFooterLabel | sets a new label for a cell in the footer
setHeader | sets the header label and default params for new headers
setIconsPath | sets the path to external images used in the grid (tree and img column type)
setIconset | sets the font awesome iconset
setImagesPath | defines the path to the imgs folder
setInitWidths | sets the width of columns in pixels
setInitWidthsP | sets the width of columns in percents
setMathRound | enables/disables rounding during the math calculations
setNoHeader | creates a grid without header
setNumberFormat | sets a mask for formatting numeric data (works for **"edn"**, **"ron"** excell only)
setPagingSkin | allows setting a custom paging skin
setPagingTemplates | allows setting paging templates for the default skin
setPagingWTMode | configures the paging with toolbar mode
setRowAttribute | sets a row attribute
setRowColor | sets the background color of a row (via the bgcolor attribute)
setRowData | sets new data for row's columns
setRowExcellType | sets an excell type for all cells in the specified row
setRowHidden | hides/shows a row
setRowId | sets a new id for a row by its index
setRowTextBold | sets the text of a row BOLD
setRowTextNormal | sets the text weight of a row to normal
setRowTextStyle | sets the style of a row
setRowspan | sets rowspan of the specified length starting from the specified cell
setSerializableColumns | specifies which column must be serialized (if you don't use this method, all columns will be serialized)
setSerializationLevel | configures XML serialization
setSizes | resets sizes of the grid's elements
setSkin | sets one of the predefined css styles (xp, mt, gray, light, clear, modern, sb_dark)
setSortImgState | sets the position and visibility of a sort arrow
setStyle | modifies the default style of the grid and its elements
setSubGrid | attaches a grid-like editor to a grid's column
setSubTree | attaches a tree-like editor to a grid's column
setTabOrder | sets the tab order of columns
setUserData | sets user data for a row
setXMLAutoLoading | enables dynamic loading from XML
showRow | scrolls a grid to make the specified row visible
sortRows | sorts the Grid by the specified column
splitAt | splits the grid
startFastOperations | starts the fast operation mode
stopFastOperations | turns off the fast operation mode, needs to be executed to normalize the view
submitAddedRows | includes additional data with the info about which rows were added and which ones deleted, enabled by default
submitColumns | sets the list of columns the data of which will be updated
submitOnlyChanged | includes only the changed rows into the form submit
submitOnlyRowID | includes only rows' IDS into the form submit
submitOnlySelected | includes only the selected rows into the form submit
submitSerialization | includes a serialized grid as a part of the form submit
toExcel | exports data from dhtmxlGrid to an Excel document
toPDF | exports data from dhtmxlGrid to a PDF document
treeToGridElement | redefine this method in your code to specify how tree node values should be used in the grid
uid | returns the unique ID
unGroup | ungroups the grid to return it into the plain view
uncheckAll | unchecks all checkboxes of the grid
unmarkAll | removes selection from all the marked cells
updateCellFromClipboard | sets the value of a cell from the clipboard
updateFromXML | refreshes grid from XML (doesn't work for buffering, tree grid or rows in smart rendering mode)
updateGroups | forces grid grouping by registered parameters
updateRowFromClipboard | sets the value of a row from the clipboard
validateCell | forces validation of a specific cell
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addRow DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

addRow

adds a row to the grid

void addRow(string|number new_id,string|number text, [string|number ind] );

Parameters

new_id | string|number | row ID, must be unique
text | string|number | row values, may be a comma-separated list or an array
ind | string|number | index of the new row, row is added to the last position by default, optional

Example

var newId = (new Date()).valueOf();
myGrid.addRow(newId,"");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addRowFromClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

addRowFromClipboard

allows the user to add a new row from clipboard

void addRowFromClipboard();

Available only in PRO Edition

Example

myGrid.addRowFromClipboard();

Details

A new row is being added to the last position in the grid

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


adjustColumnSize DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

adjustColumnSize

adjusts a column's size to make all content visible

void adjustColumnSize(number cInd);

Parameters

cInd number index of a column

Example

//adjust the first column's size
myGrid.adjustColumnSize(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

attachEvent

adds any user-defined handler to available events

void attachEvent(string evName,function evHandler);

Parameters

evName | string | an event's name
evHandler | function | a user-defined event handler

Example

myGrid.attachEvent("onRowSelect",function(rowId,cellIndex){
    alert("Row with id="+rowId+" was selected");
});

Details
  • return 'true' - confirms the action
  • return 'false' - denies the action
  • if there is no "return" command, it is treated as return 'false'
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachFooter DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

attachFooter

attaches an additional line to the footer

void attachFooter(array values, [array style] );

Parameters

values | array | array of header titles
style | array | array of styles, optional

Available only in PRO Edition

Example

//plain usage
myGrid.attachFooter("A,B,C,D");
//alternative syntax
myGrid.attachFooter(["A","B","C","D"])
//colspans in the footer
myGrid.attachFooter("A,#cspan,C,#cspan");
//rowspans in the footer
myGrid.attachFooter("A,#rspan,C,#rspan");
//styles assigned
myGrid.attachFooter("A,B,C,D",["","color:red;","",""]);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHeader DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

attachHeader

attaches an additional line to the header

void attachHeader(array values, [array style] );

Parameters

values | array | array of header titles
style | array | array of styles, optional

Example

//plain usage
myGrid.attachHeader("A,B,C,D");
//alternative syntax
myGrid.attachHeader(["A","B","C","D"])
//colspans in header
myGrid.attachHeader("A,#cspan,C,#cspan");
//rowspans in header
myGrid.attachHeader("A,#rspan,C,#rspan");
//styles assigned
myGrid.attachHeader("A,B,C,D",["","color:red;","",""]);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToObject DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

attachToObject

attaches Grid to some object in DOM

void attachToObject(object obj);

Parameters

obj object object to attach Grid to

Example

myGrid.attachToObject(obj);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cellById DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

cellById

gets dhtmlXGridCellObject object

void cellById(string|number row_id,number col_ind);

Parameters

row_id | string|number | row id
col_ind | number | column index

Example

var cellObj = myGrid.cellById(row_id, col_ind);

Details

If there are no arguments, the method gets dhtmlXGridCellObject object of the currently selected cell

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cellByIndex DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

cellByIndex

gets dhtmlXGridCellObject object

void cellByIndex(number row_ind,number col_ind);

Parameters

row_ind | number | row index
col_ind | number | column index

Example

var cellObj = myGrid.cellByIndex(row_ind, col_ind);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cellToClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

cellToClipboard

copies the value of a cell to the clipboard

void cellToClipboard( [string|number rowId,number cellInd] );

Parameters

rowId | string|number | row id (optional, uses selected row by default)
cellInd | number | column index (optional, uses selected cell by default)

Available only in PRO Edition

Example

//minimal parameters set
myGrid.cellToClipboard();
//maximal parameters set
myGrid.cellToClipboard("rowID",0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cells DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

cells

gets dhtmlXGridCellObject object

dhtmlXCellObject cells(string|number row_id,number col);

Parameters

row_id | string|number | row id
col | number | column index

Returns

dhtmlXCellObject object of the specified cell

Example

var cellObj = myGrid.cells(row_id, col);

Details

If there are no arguments, the method gets dhtmlXGridCellObject object of the currently selected cell

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cells2 DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

cells2

gets dhtmlXGridCellObject object

dhtmlXCellObject cells2(number row_index,number col);

Parameters

row_index | number | row index
col | number | column index

Returns

dhtmlXCellObject object of the specified cell

Example

var cellObj = myGrid.cells2(row_index, col);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


changePage DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

changePage

changes the current page in grid

void changePage(number pageNum);

Parameters

pageNum number a new active page

Available only in PRO Edition

Example

//go to the 5th page
myGrid.changePage(5);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


changePageRelative DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

changePageRelative

changes the current page in grid

void changePageRelative(number ind);

Parameters

ind number correction ( -1,1,2, etc.) to the currently active page

Available only in PRO Edition

Example

<a href="javascript:void(0)" onclick="myGrid.changePageRelative(-1)">Previous page</a>
<a href="javascript:void(0)" onclick="myGrid.changePageRelative(1)">Next page</a>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


changeRowId DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

changeRowId

changes id of the row to the new one

void changeRowId(string|number oldRowId,string|number newRowId);

Parameters

oldRowId | string|number | row id to change
newRowId | string|number | row id to set

Example

myGrid.changeRowId("old_rowID","new_rowID");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


checkAll DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

checkAll

checks all checkboxes in the grid

void checkAll(boolean mode);

Parameters

mode boolean {true/false} check

Example

//check all checkboxes in grid
myGrid.checkAll(true);
//uncheck all checkboxes in grid
myGrid.checkAll(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearAll DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

clearAll

deletes all rows in the grid

void clearAll(boolean header);

Parameters

header boolean enable/disable cleaning header

Example

//delete all rows from the grid
myGrid.clearAll();
//delete all rows from the grid, clear header
myGrid.clearAll(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearAndLoad DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

clearAndLoad

clears the existing grid state and loads data from an external file ( xml, json, jsarray, csv )

void clearAndLoad(string url, [function call,string type] );

Parameters

url | string | url to an external file
call | function | after loading callback function, optional
type | string | type of data (xml,csv,json,jsarray), optional, XML by default

Example

//clear grid and load new data
myGrid.clearAndLoad("grid_new.xml");
//clear grid, load new data, execute doAfterRefresh() function after grid was loaded
myGrid.clearAndLoad("grid_new.xml",doAfterRefresh);
//clear grid, load new data in csv format, execute doAfterRefresh() function after grid was loaded
myGrid.clearAndLoad("grid_new.csv",doAfterRefresh,csv);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearChangedState DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

clearChangedState

clears wasChanged state for all cells in grid (and wasAdded state as well, if called with a parameter)

void clearChangedState(boolean mode);

Parameters

mode boolean true - to clear the wasAdded state

Available only in PRO Edition

Example

// clears wasChanged state for cells
myGrid.clearChangedState();

// clears wasChanged and wasAdded state for cells
myGrid.clearChangedState(true);

Change log

the mode param added in the version 5.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearConfigCookie DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

clearConfigCookie

clears cookie with grid config details

void clearConfigCookie( [string name] );

Parameters

name string optional,cookie name

Available only in PRO Edition

Example

<button onclick="myGrid.clearConfigCookie()">Clear cookies</button>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearSelection DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

clearSelection

removes selection from the grid

void clearSelection();

Example

myGrid.clearSelection();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


collapseAllGroups DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

collapseAllGroups

collapses all groups

void collapseAllGroups();

Available only in PRO Edition

Example

myGrid.collapseAllGroups();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


collapseColumns DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

collapseColumns

collapses a group of columns

void collapseColumns(number cInd);

Parameters

cInd number index of the first column in the group

Available only in PRO Edition

Example

//collapse the group of columns
myGrid.collapseColumns(3); //can be called after the init only

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


collapseGroup DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

collapseGroup

collapses a group of rows

void collapseGroup(string val);

Parameters

val string a value used to determine what group to collapse (in other words, this should be a value common for all of them)

Available only in PRO Edition

Example

//collapse "John Grisham" group
myGrid.collapseGroup('John Grisham');

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


collectValues DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

collectValues

gets all possible values of a column

array collectValues(number column);

Parameters

column number zero based index of column

Returns

array an array of all possible values of a column

Example

//collect possible values in the 2nd column
var values=myGrid.collectValues(1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


copyBlockToClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

copyBlockToClipboard

copies the content of a block selection into clipboard in CSV format (delimiter as set for CSV serialization)

void copyBlockToClipboard();

Example

myGrid.attachEvent("onKeyPress",onKeyPressed);
...
function onKeyPressed(code,ctrl,shift){
    if(code==67&&ctrl){
        myGrid.setCSVDelimiter("t");
        myGrid.copyBlockToClipboard()
    }
    if(code==86&&ctrl){
        myGrid.pasteBlockFromClipboard()
    }
    return true;
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


copyRowContent DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

copyRowContent

copies a row's content to another existing row

void copyRowContent(string|number from_row,string|number to_row_id);

Parameters

from_row | string|number | id of the row to copy content from
to_row_id | string|number | of the row to copy content to

Example

myGrid.copyRowContent("from_row_id","to_row_id");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


deleteColumn DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

deleteColumn

deletes a column

void deleteColumn(number ind);

Parameters

ind number index of column

Available only in PRO Edition

Example

//delete first column
myGrid.deleteColumn(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


deleteRow DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

deleteRow

deletes a row from the grid

void deleteRow(string|number row_id);

Parameters

row_id string|number row ID

Example

//delete row with id "row1"
myGrid.deleteRow("row1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


deleteSelectedRows DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

deleteSelectedRows

deletes selected row(s)

void deleteSelectedRows();

Example

myGrid.deleteSelectedRows();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


destructor DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

destructor

destructor, removes the grid and cleans used memory

void destructor();

Example

myGrid.destructor();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

detachEvent

removes an event handler

void detachEvent(string id);

Parameters

id string event id

Example

myGrid.detachEvent(id); // unique id of the event handler

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachFooter DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

detachFooter

removes a footer line from the grid (opposite to attachFooter)

void detachFooter(number index);

Parameters

index number index of the footer

Available only in PRO Edition

Example

myGrid.detachFooter(0); //detach first footer's line

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachHeader DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

detachHeader

removes a header line from the grid (opposite to attachHeader)

void detachHeader(number index);

Parameters

index number index of the row to be removed ( zero-based )

Example

myGrid.detachHeader(0); //detach the first header's line

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disableUndoRedo DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

disableUndoRedo

disables the Undo/Redo functionality in the grid

void disableUndoRedo();

Available only in PRO Edition

Example

myGrid.disableUndoRedo();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


doRedo DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

doRedo

executes the redo operation

void doRedo();

Available only in PRO Edition

Example

myGrid.doRedo();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


doUndo DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

doUndo

executes the undo operation

void doUndo();

Available only in PRO Edition

Example

myGrid.doUndo();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


doesRowExist DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

doesRowExist

determines if a row with the specified id exists

void doesRowExist(string|number row_id);

Parameters

row_id string|number row id

Example

var exist=myGrid.doesRowExist("some_row_ID");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


editCell DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

editCell

creates an Editor object and switches the selected cell to the edit mode, if allowed

void editCell();

Example

myGrid.selectCell(rowIndex,cellIndex);
myGrid.editCell();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


editStop DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

editStop

returns the value from the editor(if presents) to the cell and closes the editor

void editStop(boolean ode);

Parameters

ode boolean if true - current edit value will be reverted to the previous one

Example

//close opened editor and return value from editor to the cell
myGrid.editStop();
//close opened editor and revert cell value to the previous one
myGrid.editStop(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAccessKeyMap DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableAccessKeyMap

enables Access keyboard navigation

void enableAccessKeyMap();

Available only in PRO Edition

Example

myGrid.enableAccessKeyMap();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAlterCss DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableAlterCss

sets css styles for even/odd rows

void enableAlterCss(string cssE,string cssU, [boolean perLevel,boolean levelUnique] );

Parameters

cssE | string | name of css class for even rows
cssU | string | name of css class for odd rows
perLevel | boolean | true|false - mark rows not by order, but by level in treegrid (optional, default value: true - treeGrid, false - Grid)
levelUnique | boolean | true|false - creates additional unique css class based on the row level (optional, false by default)

Example

.even{
    background-color:#22FF44;
}
.uneven{
    background-color:#41964e;
}

//a minimal parameters' set:
myGrid.enableAlterCss("even","uneven");
//disable even/odd rows in the grid:
myGrid.enableAlterCss("","");
//color rows in treeGrid by order:
myGrid.enableAlterCss("even","uneven",false,false);
//color rows in treeGrid by level,each row level will have a unique class
//(even_0 - 1st level, uneven_1 - 2nd level, even_2 - 3rd level, etc.)
myGrid.enableAlterCss("even","uneven",true,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoHeight DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableAutoHeight

enables autoheight of the grid

void enableAutoHeight(boolean mode,number maxHeight,boolean countFullHeight);

Parameters

mode | boolean | true/false
maxHeight | number | maximum height before scrolling appears (no limit by default)
countFullHeight | boolean | control usage of maxHeight param:if true,all grid height included in max height calculation,if false(default)-only data part(no header)of the grid included in it

Example

//enable auto height mode
myGrid.enableAutoHeight(true);
//disable auto height mode
myGrid.enableAutoHeight(false);
//enable auto height mode, set maximum height before scrolling appears,
//only data part included in max height calculation
myGrid.enableAutoHeight(true,100);
//enable auto height mode, set maximum height before scrolling appears,
//all grid height included in max height calculation
myGrid.enableAutoHeight(true,100,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoHiddenColumnsSaving DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableAutoHiddenColumnsSaving

enables automatic saving of a column's state ( hidden/shown )

void enableAutoHiddenColumnsSaving( [string name,string cookie_param] );

Parameters

name | string | optional, cookie name
cookie_param | string | optional, additional parameters added to cookie

Available only in PRO Edition

Example

//minimal parameters' set
myGrid.enableAutoHiddenColumnsSaving();
//maximal parameters' set
myGrid.enableAutoHiddenColumnsSaving(
    "some_name",
    "expires=Fri,31-Dec-2010 23:59:59 GMT"
);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoSaving DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableAutoSaving

enables automatic saving of size, sorting order and columns order

void enableAutoSaving(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

//minimal parameters' set
myGrid.enableAutoSaving();
//maximal parameters' set
myGrid.enableAutoSaving("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");

Details

If you need to save hidden columns as well, you should use the enableAutoHiddenColumnsSaving() in addition to this command.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoSizeSaving DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableAutoSizeSaving

enables automatic size saving to cookie

void enableAutoSizeSaving(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

//minimal parameters set
myGrid.enableAutoSizeSaving();
//maximal parameters set
myGrid.enableAutoSizeSaving("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoWidth DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableAutoWidth

changes the size of grid's container on the fly to fit total width of grid's columns

void enableAutoWidth(boolean mode,number max_limit,number min_limit);

Parameters

mode | boolean | true/false - enable / disable
max_limit | number | max allowed width, not limited by default
min_limit | number | min allowed width, not limited by default

Example

//enable auto width mode
myGrid.enableAutoWidth(true);
//disable auto width mode
myGrid.enableAutoWidth(false);
//enable auto width mode, set the maximal and minimal allowed width
myGrid.enableAutoWidth(true,600,100);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableBlockSelection DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableBlockSelection

enables block selection mode in grid

void enableBlockSelection(boolean mode);

Parameters

mode boolean enable/disable block selection (optional, true by default)

Example

//enable block selection
myGrid.enableBlockSelection(true);
//disable block selection
myGrid.enableBlockSelection(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableCSVAutoID DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableCSVAutoID

enables the mode in which IDs for the rows loaded from CSV are autogenerated

void enableCSVAutoID(boolean mode);

Parameters

mode boolean true/false

Available only in PRO Edition

Example

//enable autogenerated rows IDs for the CSV loading
myGrid.enableCSVAutoID(true);
//disable autogenerated rows IDs for the CSV loading
myGrid.enableCSVAutoID(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableCSVHeader DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableCSVHeader

enables recognizing the first row in CSV as the header

void enableCSVHeader(boolean mode);

Parameters

mode boolean true/false

Available only in PRO Edition

Example

//enable recognizing first row in CSV as header
myGrid.enableCSVHeader(true);
//disable recognizing first row in CSV as header
myGrid.enableCSVHeader(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableCellIds DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableCellIds

enables/disables unique ids for cells (id will be automatically created by the template: 'c_[RowId]_[colIndex]')

void enableCellIds(boolean mode);

Parameters

mode boolean enable/disable unique ids for cells

Example

//enable unique ids for cells
myGrid.enableCellIds(true);
//disable unique ids for cells
myGrid.enableCellIds(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableColSpan DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableColSpan

enables/disables colspan support

void enableColSpan(boolean mode);

Parameters

mode boolean enable/disable colspan support

Available only in PRO Edition

Example

//enable colspan mode
myGrid.enableColSpan(true);
//disable colspan mode
myGrid.enableColSpan(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableColumnAutoSize DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableColumnAutoSize

adjusts column size to make all content visible on the header doublclick

void enableColumnAutoSize(boolean mode);

Parameters

mode boolean true/false

Example

myGrid.enableColumnAutoSize(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableColumnMove DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableColumnMove

enables the move column functionality

void enableColumnMove(boolean mode,string columns);

Parameters

mode | boolean | true/false
columns | string | list of true/false values, optional

Available only in PRO Edition

Example

//minimal parameters set
myGrid.enableColumnMove(true);
//maximal parameters set
myGrid.enableColumnMove(true,"false,true,true,true,true,true");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableContextMenu DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableContextMenu

enables/disables context menu

void enableContextMenu(object menu);

Parameters

menu object dhtmlxMenu object, if null - context menu will be disabled

Example

var menu = new dhtmlXMenuObject(null, "standard");
...
myGrid.enableContextMenu(menu);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDistributedParsing DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableDistributedParsing

enables/disables distributed parsing (rows are parsed portion by portion with some timeout)

void enableDistributedParsing(boolean mode,number count,number time);

Parameters

mode | boolean | true/false
count | number | count of nodes parsed by a step (optional, 10 by default)
time | number | time between parsing counts in milliseconds (optional, 250 by default)

Available only in PRO Edition

Example

//enable distributed parsing mode
myGrid.enableDistributedParsing(true);
//enable distributed parsing mode, parse 50 nodes by one step,
//parse nodes with a 2 seconds delay
myGrid.enableDistributedParsing(true,50,2000);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDragAndDrop DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableDragAndDrop

enables/disables drag-and-drop

void enableDragAndDrop(boolean mode);

Parameters

mode boolean enables/disables drag-and-drop support

Example

//enable drag-and-drop
myGrid.enableDragAndDrop(true);
//disable drag-and-drop
myGrid.enableDragAndDrop(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDragOrder DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableDragOrder

switches to the mode in which dragged items drop in the target location in the same order as they were in the source grid

void enableDragOrder(boolean mode);

Parameters

mode boolean true|false to enable/disable mode

Example

//enable drag order
myGrid.enableDragOrder(true);
//disable drag order
myGrid.enableDragOrder(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableEditEvents DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableEditEvents

enables/disables events which invoke excell editing

void enableEditEvents(boolean click,boolean dblclick,boolean f2Key);

Parameters

click | boolean | enable/disable editing by single click
dblclick | boolean | enable/disable editing by double click
f2Key | boolean | enable/disable editing by pressing F2 key

Example

//enable editing by single click and by pressing F2 key,disable editing by double click
myGrid.enableEditEvents(true,false,true);

Details

mutually exclusive with the enableLightMouseNavigation() method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableEditTabOnly DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableEditTabOnly

enables/disables the mode when readonly cell is not available with tab

void enableEditTabOnly(boolean state);

Parameters

state boolean true/false to enable/disable the mode

Example

//enable mode when readonly cell is not available with tab
myGrid.enableEditTabOnly(true);
//disable mode when readonly cell is not available with tab
myGrid.enableEditTabOnly(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableExcelKeyMap DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableExcelKeyMap

enables Excel keyboard navigation

void enableExcelKeyMap();

Available only in PRO Edition

Example

myGrid.enableExcelKeyMap();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableHeaderImages DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableHeaderImages

specifies if the values passed to Header are images' file names

void enableHeaderImages(boolean mode);

Parameters

mode boolean true to treat column header values as image names

Example

//enable header images
myGrid.enableHeaderImages(true);
//disable header images
myGrid.enableHeaderImages(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableHeaderMenu DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableHeaderMenu

enables a popup menu which allows hidding/showing columns

void enableHeaderMenu(string list);

Parameters

list string a comma-separated string of true/false values (true means that the related column will be shown)

Available only in PRO Edition

Example

myGrid.enableHeaderMenu("false,true,false,false");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableKeyboardSupport DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableKeyboardSupport

enables/disables hot keys in grid

void enableKeyboardSupport(boolean mode);

Parameters

mode boolean true/false (true by default)

Example

//enable hot keys in grid
myGrid.enableKeyboardSupport(true);
//disable hot keys in grid
myGrid.enableKeyboardSupport(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableLightMouseNavigation DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableLightMouseNavigation

enables/disables light mouse navigation mode (row selection with mouse over, editing with single click)

void enableLightMouseNavigation(boolean mode);

Parameters

mode boolean true/false

Example

//enable light mouse navigation
myGrid.enableLightMouseNavigation(true);
//disable light mouse navigation
myGrid.enableLightMouseNavigation(false);

Details

mutually exclusive with the enableEditEvents method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMarkedCells DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableMarkedCells

sets the marked cells support to enabled/disabled state

void enableMarkedCells(boolean mode);

Parameters

mode boolean enable/disable marked cells support

Available only in PRO Edition

Example

//enable marked cells
myGrid.enableMarkedCells(true);
//disable marked cells
myGrid.enableMarkedCells(false);

Details

the user will be able to select single cell instead of selecting the whole row

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMathEditing DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableMathEditing

enables/disables editing of math cells

void enableMathEditing(boolean mode);

Parameters

mode boolean enable/disable editing of math cells

Available only in PRO Edition

Example

//enable editing of math cells
myGrid.enableMathEditing(true);
//disable editing of math cells
myGrid.enableMathEditing(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMathSerialization DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableMathSerialization

enables/disables serialization of math formulas

void enableMathSerialization(boolean mode);

Parameters

mode boolean enable/disable math formulas serialization

Available only in PRO Edition

Example

//enable math formulas serialization
myGrid.enableMathSerialization(true);
//disable math formulas serialization
myGrid.enableMathSerialization(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMercyDrag DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableMercyDrag

enables drag without removing (copy instead of move)

void enableMercyDrag(boolean mode);

Parameters

mode boolean enable/disable mode

Available only in PRO Edition

Example

//enable mercy drag
myGrid.enableMercyDrag(true);
//disable mercy drag
myGrid.enableMercyDrag(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMultiline DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableMultiline

sets the multiline rows support to enabled/disabled state

void enableMultiline(boolean state);

Parameters

state boolean enable/disable multi line mode

Example

//enable multi line mode
myGrid.enableMultiline(true);
//disable multi line mode
myGrid.enableMultiline(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMultiselect DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableMultiselect

sets multiselect mode to enabled or disabled state

void enableMultiselect(boolean state);

Parameters

state boolean true or false

Example

//enable multi select mode
myGrid.enableMultiselect(true);
//disable multi select mode
myGrid.enableMultiselect(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableOrderSaving DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableOrderSaving

enables automatic column order saving to cookie

void enableOrderSaving(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

//minimal parameters set
myGrid.enableOrderSaving();
//maximal parameters set
myGrid.enableOrderSaving("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enablePaging DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enablePaging

enables smart paging mode

void enablePaging(boolean mode,number pageSize,number pagesInGrp,id|HTMLElement pagingControlsContainer,boolean showRecInfo,id|HTMLElement pagingStateContainer);

Parameters

mode | boolean | enable/disable paging mode
pageSize | number | count of rows per page
pagesInGrp | number | count of visible page selectors
pagingControlsContainer | id|HTMLElement | ID or container which will be used for showing paging controls
showRecInfo | boolean | enable/disable showing of additional info about paging state
pagingStateContainer | id|HTMLElement | ID or container which will be used for showing paging state

Available only in PRO Edition

Example

//enable paging with 10 rows per page
myGrid.enablePaging(true,10,5,"pagingArea",true,"recinfoArea");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enablePreRendering DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enablePreRendering

enables pre-rendering rows during scrolling.

void enablePreRendering(number buffer);

Parameters

buffer number count of rows to pre-render

Example

myGrid.enablePreRendering(50);

Details

makes scrolling smoother but with a small drop in overall perfomance

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableResizing DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableResizing

enables/disables resizing for specified colums

void enableResizing(string list);

Parameters

list string a list of true/false values separated by the default delimiter (comma)

Example

//disable resizing of the first column
myGrid.enableResizing("false,true,true,true,true,true,true");

Details

resizing enabled for all columns by default

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableRowsHover DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableRowsHover

enables/disables hovering on a row on mouse over

void enableRowsHover(boolean mode,string cssClass);

Parameters

mode | boolean | true/false
cssClass | string | css class for hovering on a row

Example

.hover {
    background-color: navy;
}

myGrid.enableRowsHover(true,"hover");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableRowspan DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableRowspan

enables rowspan in treegrid

void enableRowspan();

Available only in PRO Edition

Example

myGrid.enableRowspan();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableSmartRendering DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableSmartRendering

enables smart rendering mode

void enableSmartRendering(boolean mode,number buffer);

Parameters

mode | boolean | enable/disable the mode
buffer | number | count of rows requested from server by single operation(optional,makes sense only in dynamic loading mode)

Example

//enable smart rendering mode
myGrid.enableSmartRendering(true);
//enable smart rendering mode,
//set a count of rows requested from the server by single operation
myGrid.enableSmartRendering(true,50);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableSortingSaving DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableSortingSaving

enables automatic saving of the sorting state to cookie

void enableSortingSaving(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

//minimal parameters set
myGrid.enableSortingSaving();
//maximal parameters set
myGrid.enableSortingSaving("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableStableSorting DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableStableSorting

enables stable sorting algorithm

void enableStableSorting(boolean mode);

Parameters

mode boolean true/false

Example

myGrid.enableStableSorting(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableTooltips DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableTooltips

enables/disables tooltips for specified colums

void enableTooltips(string list);

Parameters

list string list of true/false values, tooltips are enabled for all columns by default

Example

//disable first column's tooltips
myGrid.enableTooltips("false,true,true,true,true");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableUndoRedo DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableUndoRedo

enables the Undo/Redo functionality in grid

void enableUndoRedo();

Available only in PRO Edition

Example

myGrid.enableUndoRedo();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableValidation DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

enableValidation

enable validation in the grid

void enableValidation(boolean mode);

Parameters

mode boolean enable/disable the validation in the grid

Available only in PRO Edition

Example

myGrid.enableValidation(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


expandAllGroups DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

expandAllGroups

expands all groups

void expandAllGroups();

Available only in PRO Edition

Example

myGrid.expandAllGroups();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


expandColumns DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

expandColumns

expands a group of columns

void expandColumns(number cInd);

Parameters

cInd number index of the first column in the group

Available only in PRO Edition

Example

//expand the group of columns
myGrid.expandColumns(3); //can be called after the init only

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


expandGroup DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

expandGroup

expands a group of rows

void expandGroup(string val);

Parameters

val string value used to determine what group to expand (a common value for all rows in the group)

Available only in PRO Edition

Example

//expand 'John Grisham' group
myGrid.expandGroup('John Grisham')

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


filterBy DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

filterBy

filters Grid by mask

void filterBy(number column,string value,boolean preserve);

Parameters

column | number | a zero-based index of column
value | string | a value by which the column will be filtered
preserve | boolean | filter current or initial state (false by default)

Available only in PRO Edition

Example

//filter grid by 2nd column by value "alf"
myGrid.filterBy(1,"alf");
//filter grid by 2nd column with a more complex rule
myGrid.filterBy(1,function(data){
// true - show the related row, false - hide the related row
    return   data.toString().indexOf("alf")!=-1;
});
//filter current grid state by 3rd column by value "Omega"
myGrid.filterBy(2,"Omega",true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


filterByAll DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

filterByAll

forces Grid filtering by registered inputs (created by # starting shortcuts, or by the makeFilter function)

void filterByAll();

Available only in PRO Edition

Example

myGrid.filterByAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


findCell DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

findCell

finds cell in the grid by its value

void findCell(string value,number c_ind,boolean first,boolean compare);

Parameters

value | string | search string
c_ind | number | index of the column to search in (optional, if not specified, search everywhere)
first | boolean | find only the first occurence (optional, false by default)
compare | boolean | find only exact matches of the entered value, false by default

Available only in PRO Edition

Example

//search for "alf" value in all grid cells
var searchResult = myGrid.findCell("alf");
//search for "alf" value in the second column, find only the first occurence
var searchResult = myGrid.findCell("alf",1,true);
//search for "alf" value in the second column, find only exact matches
var searchResult = myGrid.findCell("alf",1,false,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachCell DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

forEachCell

executes the code for each cell in a row

void forEachCell(string|number rowId,function custom_code);

Parameters

rowId | string|number | the id of the row where cells must be iterated
custom_code | function | a function which gets the eXcell object as an incoming argument

Example

myGrid.forEachCell("row1",function(cellObj,ind){
//execute code for each cell in a row with the id "row1"
//cellObj - related cell object
//ind - column index
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachRow DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

forEachRow

executes code for each row in the grid

void forEachRow(function custom_code);

Parameters

custom_code function function which gets the row id as the incoming argument

Example

myGrid.forEachRow(function(id){
//your code here
//id - row's id
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachRowInGroup DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

forEachRowInGroup

iterates through all rows in some group

void forEachRowInGroup(string name,function custom_code);

Parameters

name | string | name of the group
custom_code | function | function which gets row id as the incoming argument

Available only in PRO Edition

Example

myGrid.forEachRowInGroup("John",function(id){
    do_something_with_row(id);
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forceFullLoading DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

forceFullLoading

loads all data in the grid, which is in dyn. srnd or dyn. paging mode

void forceFullLoading(number buffer);

Parameters

buffer number size of data which will be loaded by single iteration, optional, 50 rows by default

Example

//load all data in grid
myGrid.forceFullLoading();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forceLabelSelection DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

forceLabelSelection

affects block selection, so it will copy/paste only the visible text, not the values behind

void forceLabelSelection(boolean mode);

Parameters

mode boolean affects block selection

Example

//enable label selection
myGrid.forceLabelSelection(true);
//disable label selection
myGrid.forceLabelSelection(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllRowIds DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getAllRowIds

gets the list of all row ids in the grid

string getAllRowIds(string separator);

Parameters

separator string delimiter to be used in the list (optional, comma by default)

Returns

string the list of all row ids in the grid

Example

//return the list of row ids with comma delimiter
var ids=myGrid.getAllRowIds();
//return the list of row ids with dot delimiter
var ids=myGrid.getAllRowIds(".");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCellExcellType DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getCellExcellType

returns the excell type of the cell in question

string getCellExcellType(string|number rowId,number cellIndex);

Parameters

rowId | string|number | the row ID
cellIndex | number | the cell index

Returns

string the type of excell (the code like "ed", "txt", "ch", etc.)

Available only in PRO Edition

Example

// setting the type "txt" for the 2nd cell in the row with the id "row1"
myGrid.setCellExcellType("row1",1,"txt");

// getting the the type of the 2nd cell in the row with the id "row1"
var type = myGrid.setCellExcellType("row1",1); // -> returns "txt"

See also
  • API
    • setCellExcellType
  • Articles
    • Column Types
    • Change log

    added in version 5.1

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


getChangedRows DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getChangedRows

gets the list of IDs of the changed rows

string getChangedRows(boolean nd_added);

Parameters

nd_added boolean if true, include ids of added rows

Returns

string the list of IDs of the changed rows

Available only in PRO Edition

Example

//get the list of changed rows
var ids = myGrid.getChangedRows();
//get the list of changed rows including added rows
var ids = myGrid.getChangedRows(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCheckedRows DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getCheckedRows

gets the list of ids of all the rows with checked exCell in the specified column

string getCheckedRows(number col_ind);

Parameters

col_ind number column index

Returns

string the list of ids of all the rows with checked exCell in the specified column

Example

//get the list of ids of checked rows from the first column
var checked=myGrid.getCheckedRows(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColIndexById DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getColIndexById

gets column index by column id

number getColIndexById(number id);

Parameters

id number column id

Returns

number the index of a column

Example

//get index of the column with id "col1"
var colIndex=myGrid.getColIndexById("col1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColLabel DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getColLabel

gets the label of the column specified by index

string getColLabel(number cin,number ind);

Parameters

cin | number | column index
ind | number | header row index (optional, 0 by default, makes sense only for a multiline header)

Returns

string the label of the column specified by index

Example

//get label of the first column
var colLabel=myGrid.getColLabel(0);
//get label of the second line of the first column
var colLabel=myGrid.getColLabel(0,1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColType DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getColType

gets column type by column index

string getColType(number cInd);

Parameters

cInd number column index

Returns

string the type of a column

Example

//get type of the first column
var type=myGrid.getColType(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColTypeById DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getColTypeById

gets the column type by its ID

string getColTypeById(string|number cID);

Parameters

cID string|number column id

Returns

string the type of a column

Example

// get the type of the column with the id "column1"
var type=myGrid.getColTypeById("column1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColWidth DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getColWidth

gets the width of the specified column in pixels

number getColWidth(number ind);

Parameters

ind number column index

Returns

number the width of the specified column in pixels

Example

//get width of the first column
var width=myGrid.getColWidth(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColumnCombo DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getColumnCombo

returns dhtmlXCombo column object

object getColumnCombo(number column_index);

Parameters

column_index number the column index

Returns

object dhtmlXCombo column object

Example

//getting dhtmlXCombo column object
myCombo = myGrid.getColumnCombo(column_index);

//using it later with dhtmlxCombo API
myCombo.enableFilteringMode(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColumnId DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getColumnId

gets the id of the column specified by index

string|number getColumnId(number cin);

Parameters

cin number column index

Returns

string|number the id of the column specified by index

Example

// get id of the first column
var colId=myGrid.getColumnId(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColumnLabel DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getColumnLabel

gets the label of the column specified by index

string getColumnLabel(number cin,number ind);

Parameters

cin | number | column index
ind | number | header row index (optional, 0 by default, makes sense only for a multiline header)

Returns

string the label of the column specified by index

Example

//get label of the first column
var colLabel=myGrid.getColLabel(0);
//get label of the second line of the first column
var colLabel=myGrid.getColLabel(0,1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColumnsNum DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getColumnsNum

returns the number of columns in the grid (including hidden columns)

number getColumnsNum();

Returns

number the number of columns in the grid

Example

var colNum=myGrid.getColumnsNum();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCombo DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getCombo

gets Combo object of the specified column

object getCombo(number col_ind);

Parameters

col_ind number index of the column to get combo object for (column must have 'co', 'coro' or 'combo' type)

Returns

object Combo object of the specified column

Example

//get combo object of the first column
var combo=myTreeGrid.getCombo(0);

Details

use the method to change select box value for cell before editor opened

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCustomCombo DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getCustomCombo

gets the combobox specific for the cell in question

object getCustomCombo(string|number id,number ind);

Parameters

id | string|number | row id
ind | number | column index (the cell must have 'co', 'coro' or 'combo' type)

Returns

object the combobox specific for the cell in question

Example

var combo=myGrid.getCustomCombo("row1",0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFilterElement DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getFilterElement

gets the input object of the filter linked to the column in question

object getFilterElement(number index);

Parameters

index number index of a column

Returns

object the input object of the filter linked to the column in question

Example

//get filter object placed at the header of the first column
var filterObject=myGrid.getFilterElement(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFooterLabel DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getFooterLabel

gets the label of the footer specified by index

string getFooterLabel(number cin,number ind,boolean mode);

Parameters

cin | number | column index
ind | number | footer row index (optional, 0 by default)
mode | boolean | true, to return a label in HTML format, preserving formatting tags

Returns

string the label of the footer specified by index

Example

//minimal parameters set
var footerLabel=myGrid.getFooterLabel(0); // returns "AB"
//maximal parameters set
var footerLabel=myGrid.getFooterLabel(0,0,true); // returns "<b>A</b><br>B"

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getHeaderMenu DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getHeaderMenu

returns dhtmlXMenu object of the grid header menu

object getHeaderMenu(object columns);

Parameters

columns object an object with grid columns

Returns

object dhtmlXMenu object of the grid header menu

Example

var headerObject=myGrid.getHeaderMenu(columns);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getMarked DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getMarked

returns an array of marked cells (pairs of row id and column index)

array getMarked();

Returns

array an array of marked cells

Available only in PRO Edition

Example

var markedArray = myGrid.getMarked();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getRedo DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getRedo

gets length of available ReDo operations

array getRedo();

Returns

array an array of available ReDo operations

Available only in PRO Edition

Example

var redo=myGrid.getRedo();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getRowAttribute DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getRowAttribute

returns the row attribute's value which was set in the XML tag

mixed getRowAttribute(string|number rId,string name);

Parameters

rId | string|number | row id
name | string | the attribute's name

Returns

mixed the row attribute's value set in the XML tag

Example

<?xml version='1.0' encoding='iso-8859-1'?>
    <rows>
        <row id="unique_rowid" some="data">
            <cell some="data">cell content</cell>
        </row>
    </rows>
    ...
var rowAttr = myGrid.getRowAttribute("unique_rowid","some");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getRowData DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getRowData

returns the row data

object getRowData(string rowId);

Parameters

rowId string the row id

Returns

object the row data

Example

myGrid.setColumnIds("id1,id2,id3"); //setting ids for columns of the row with id "row1"
var data = myGrid.getRowData("row1");
// -> data = {"id1":"value","id2":"value2","id3":"value3"}

Details

In order to get data of the row, you need to check that related columns have ids specified.

See also
  • API
    • setRowData
    • Change log

    added in version 5.1

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


getRowId DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getRowId

gets the row id by the row index

string|number getRowId(number ind);

Parameters

ind number row index

Returns

string|number the id of the row

Example

//get ID of the first row
var rowID=myGrid.getRowId(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getRowIndex DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getRowIndex

gets the row index by the row id (grid only)

number getRowIndex(string|number row_id);

Parameters

row_id string|number row id

Returns

number the row index

Example

//get the index of the row with the id "row1"
var rowIndex=myGrid.getRowIndex("row1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getRowsNum DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getRowsNum

returns the number of rows in the grid (in case of dynamic mode it will return an expected number of rows)

number getRowsNum();

Returns

number the number of rows in the grid

Example

var count=myGrid.getRowsNum();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelectedBlock DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getSelectedBlock

returns the attributes of the current block selection

object getSelectedBlock();

Returns

object the attributes of the current block selection

Example

var top_row=myGrid.getSelectedBlock().LeftTopRow;
var bottom_row=myGrid.getSelectedBlock().RightBottomRow;
var left_column=myGrid.getSelectedBlock().LeftTopCol;
var right_column=myGrid.getSelectedBlock().RightBottomCol;

Details

returns an object with four properties:

  • LeftTopRow: the index of the top row in the selected block,
  • LeftTopCol: the index of the first column in the selected block,
  • RightBottomRow: the index of the bottom row in the selected block,
  • RightBottomCol: the index of the last column in the selected block describing the boundary elements of the block
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelectedCellIndex DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getSelectedCellIndex

returns the index of the selected cell or -1, if there is no selected cell

number getSelectedCellIndex();

Returns

number the index of the selected cell or -1

Example

var ind=myGrid.getSelectedCellIndex();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelectedRowId DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getSelectedRowId

returns the id of the selected row (a list of ids with default delimiter) or null, if there are no selected rows

string|number getSelectedRowId();

Returns

string|number the id of the selected row

Example

var selectedId = myGrid.getSelectedRowId();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSortingState DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getSortingState

gets the sorting state of the grid

string getSortingState();

Returns

string the sorting state of the grid

Example

var state=myGrid.getSortingState();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getStateOfView DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getStateOfView

returns details about current grid state

array getStateOfView();

Returns

array details about current grid state

Example

var state=myGrid.getStateOfView();

Details

If the paging mode is enabled:

  • state[0] = the number of the currently active page
  • state[1] = the index of the top row on the page
  • state[2] = the index of the last row on the page
  • state[3] = the number of rows in the grid

If the paging mode is disabled:

  • state[0] = the index of the top visible row
  • state[1] = the height of the visible area in rows
  • state[2] = the number of rows in the grid
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getUndo DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getUndo

gets length of available UnDo operations

array getUndo();

Returns

array length of available UnDo operations

Available only in PRO Edition

Example

var undo=myGrid.getUndo();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getUserData DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

getUserData

gets user data

mixed getUserData(string|number row_id,string name);

Parameters

row_id | string|number | row id, if empty, user data of the grid (not of a row)
name | string | name of the user data

Returns

mixed user data value

Example

//get row user data
var userdata = myGrid.getUserData("unique_rowid","someName1");
//get global user data
var userdata = myGrid.getUserData("","someName1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


gridFromClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

gridFromClipboard

initializes grid from CSV stored in the clipboard

void gridFromClipboard();

Available only in PRO Edition

Example

<a href="javascript:void(0)" onclick="myGrid.clearAll(); myGrid.gridFromClipboard();">
    Load grid from clipboard
</a>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


gridToClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

gridToClipboard

copies grid in CSV to the clipboard

void gridToClipboard();

Available only in PRO Edition

Example

<a href="javascript:void(0)" onclick="copyData()">
    Copy entire grid (with tab as delimiter) to clipboard
</a>

<script>
function copyData(type,delim){
   myGrid.setCSVDelimiter('\t');
   myGrid.gridToClipboard();
}
</script>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


gridToGrid DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

gridToGrid

redefine this method in your code to specify how grid row values should be used in another grid

void gridToGrid(string|number rowId,object sgrid,object tgrid);

Parameters

rowId | string|number | the id of the dragged row
sgrid | object | source grid object
tgrid | object | target grid object

Example

myGrid.gridToGrid = function(rowId,sgrid,tgrid){
    var z=[];
    for (var i=0; i<sgrid.getColumCount(); i++) // for each cell in the source grid
    z[i]=sgrid.cells(rowId,i).getValue();       // prepare data for the target grid
    return z;
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


gridToTreeElement DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

gridToTreeElement

redefine this method in your code to define how grid row values should be used in tree

void gridToTreeElement(object treeObj,string|number treeNodeId,string|number gridRowId);

Parameters

treeObj | object | object of tree
treeNodeId | string|number | id of the node created in tree
gridRowId | string|number | id of the grid row

Available only in PRO Edition

Example

myGrid.gridToTreeElement = function(tree,treeID,gridID){
    return this.cells(gridId,0).getValue(); //take data from 1st column as a tree value
};

Details

using input parameters you can change id of a new tree node, set label, set userdata blocks, etc.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


groupBy DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

groupBy

groups grid content by values of the specified column

void groupBy(number ind,array mask);

Parameters

ind | number | column index to group by
mask | array | optional, array, each value of which is mapped to the related column

Available only in PRO Edition

Example

//minimal parameters set. Group rows by the second column
myGrid.groupBy(1);
//maximal parameters set
myGrid.groupBy(2,["#stat_max","#title","","#stat_total","","#cspan","#cspan","#cspan"]);

Details

The values of the mask parameter are:

  • title (string) - mandatory, will be used for group-key;
  • cspan (string) - organize colspan with a sibling cell (the same as in cspan in header);
  • stat_total (number) - calculates total of values for the group;
  • stat_max (number) - calculates maximum value in the group;
  • stat_min (number) - calculates minimum value in the group;
  • stat_average (number) - calculates the average value in the group;
  • stat_count (number) - calculates count of records in the group.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


groupStat DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

groupStat

returns the result of aggregation for a column

number groupStat(string key,number ind,string item);

Parameters

key | string | the group key
ind | number | the index of a column (zero-based numbering)
item | string | the aggregation shortcut

Returns

number the result of aggregation for a column

Example

myGrid.groupStat(name,3,"stat_total");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


init DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

init

initializes grid

void init();

Example

myGrid.init();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


insertColumn DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

insertColumn

adds a new column to the grid

void insertColumn(number ind,string header,string type,number width,string sort,string align,string valign,any reserved,string columnColor);

Parameters

ind | number | index of the column
header | string | header content of column (optional, blank by default)
type | string | the type of the column (optional, 'ed' by default)
width | number | the width of the column (optional, '100' by default)
sort | string | the sort type of the column (optional, 'na' by default)
align | string | the align of the column (optional, 'left' by default)
valign | string | vertical align of column (optional)
reserved | any | not used for now
columnColor | string | background color of the column (optional)

Available only in PRO Edition

Example

//minimal parameters set
myGrid.insertColumn(10);
//maximal parameters set
myGrid.insertColumn(11,'Some text','ed',120,'na','left','top',null,'red');

Details

The method can be used after grid is initialized. At least one column should be in the grid

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isColumnHidden DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

isColumnHidden

gets the shown/hidden status of the column

void isColumnHidden(number ind);

Parameters

ind number column index

Available only in PRO Edition

Example

//check if the first column is hidden
var isHidden=myGrid.isColumnHidden(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


load DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

load

loads data from an external file ( xml, json, jsarray, csv )

promise load(string url,function call,string type);

Parameters

url | string | url to an external file
call | function | after loading callback function, optional, can be omitted
type | string | type of data (xml,csv,json,jsarray), optional, xml by default

Returns

promise a "promise" object

Example

// load grid from an external file
myGrid.load("grid.xml");

// load grid, execute doAfterRefresh() function after grid was loaded
myGrid.load("grid.xml",doAfterRefresh);

// load grid from an external csv file,
// execute doAfterRefresh() function after grid was loaded
myGrid.load("grid.csv",doAfterRefresh,"csv");

// returns a "promise" object, see details
myGrid.load(url).then(function(text){
    // text - a server side response
});

Details

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadHiddenColumnsFromCookie DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

loadHiddenColumnsFromCookie

loads the sorting order from cookie

void loadHiddenColumnsFromCookie(string name);

Parameters

name string optional,cookie name

Available only in PRO Edition

Example

myGrid.load("grid.xml",function(){
    //minimal parameters set
    myGrid.loadHiddenColumnsFromCookie();
    //maximal parameters set
    myGrid.loadHiddenColumnsFromCookie("some_name");
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadOpenStates DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

loadOpenStates

loads open state of TreeGrid into cookie

void loadOpenStates(string name);

Parameters

name string optional, cookie name

Available only in PRO Edition

Example

myGrid.load("grid.xml",function(){
    //minimal parameters set
    myGrid.loadOpenStates();
    //maximal parameters set
    myGrid.loadOpenStates("some_name");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadOrderFromCookie DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

loadOrderFromCookie

loads sorting order from cookie

void loadOrderFromCookie(string name);

Parameters

name string optional,cookie name

Available only in PRO Edition

Example

myGrid.load("grid.xml",function(){
    //minimal parameters set
    myGrid.loadOrderFromCookie();
    //maximal parameters set
    myGrid.loadOrderFromCookie("some_name");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadSizeFromCookie DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

loadSizeFromCookie

loads grid layout from cookie

void loadSizeFromCookie(string name);

Parameters

name string optional,cookie name

Available only in PRO Edition

Example

myGrid.load("grid.xml",function(){
    //minimal parameters set
    myGrid.loadSizeFromCookie();
    //maximal parameters set
    myGrid.loadSizeFromCookie("some_name");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadSortingFromCookie DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

loadSortingFromCookie

loads sorting order from cookie

void loadSortingFromCookie(string name);

Parameters

name string optional,cookie name

Available only in PRO Edition

Example

myGrid.load("grid.xml",function(){
    //minimal parameters set
    myGrid.loadSortingFromCookie();
    //maximal parameters set
    myGrid.loadSortingFromCookie("some_name");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


lockRow DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

lockRow

locks/unlocks a row for editing

void lockRow(string|number rowId,boolean mode);

Parameters

rowId | string|number | id of a row
mode | boolean | true/false to lock/unlock

Example

//lock row with id "row1" for editing
myGrid.lockRow("row1",true);
//unlock row with id "row1" for editing
myGrid.lockRow("row1",false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


makeFilter DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

makeFilter

makes a filter from any input element (text filter), select (dropdown) or DIV (combobox based on dhtmlxCombo)

void makeFilter(id|HTMLElement id,number column,boolean preserve);

Parameters

id | id|HTMLElement | input id or input HTML object
column | number | index of a column
preserve | boolean | filter the current state or the initial one (optional, false by default)

Available only in PRO Edition

Example

//minimal parameters set
myGrid.makeFilter("some_el",0);
//maximal parameters set
myGrid.makeFilter("some_el",0,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


makeSearch DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

makeSearch

makes a search box (sets selection on the row with the found value) from any input

void makeSearch(string|number|HTMLElement id,number column);

Parameters

id | string|number|HTMLElement | input id or input HTML object
column | number | index of a column

Available only in PRO Edition

Example

myGrid.makeSearch("input_id",0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


mark DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

mark

marks/unmarks the specified cell

void mark(string|number row,number cInd,boolean state);

Parameters

row | string|number | row id
cInd | number | cell index
state | boolean | true or false

Available only in PRO Edition

Example

// mark cell
myGrid.mark('row1',0,true);
// unmark cell
myGrid.mark('row1',0,false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveColumn DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

moveColumn

moves the column of the specified index to a new position

void moveColumn(number oldInd,number newInd);

Parameters

oldInd | number | the current index of column
newInd | number | the index of the column, before which the moved column will be inserted

Available only in PRO Edition

Example

//put the 1st column before the 3rd column
myGrid.moveColumn(0,2);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveRow DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

moveRow

moves a row

void moveRow(string|number rowId,string mode, [string|number targetId,object targetGrid] );

Parameters

rowId | string|number | the id of the source row (the row that will be moved)
mode | string | moving mode ("up","down","row_sibling")
targetId | string|number | used just in the "row_sibling" mode. The id of the target row (the row after which the source row will be pasted) (optional)
targetGrid | object | used for moving between grids (optional)

Available only in PRO Edition

Example

//move row up
myGrid1.moveRow("row1","up");
//move row down
myGrid1.moveRow("row1","down");
//put row with id "row1" after row with the id "row2" in the grid[2]
myGrid1.moveRow("row1","row_sibling","row2",myGrid2);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveRowDown DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

moveRowDown

moves a row one position down, if possible

void moveRowDown(string|number row_id);

Parameters

row_id string|number row id

Example

<a href="javascript:void(0)" onclick="myGrid.moveRowDown(myGrid.getSelectedId())">
    Move selected row down
</a>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveRowTo DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

moveRowTo

moves a row

void moveRowTo(string|number srowId,string|number trowId,string mode, [string dropmode,object sourceGrid,object targetGrid] );

Parameters

srowId | string|number | the id of the source row (the row that will be moved or copied)
trowId | string|number | the id of the target row (in the 'sibling' mode - the row after which the source row will be pasted, in the 'child' mode - the row that will be the parent for the source row in the specified grid)
mode | string | "move" or "copy"
dropmode | string | "sibling" or "child" (optional, "sibling" by default)
sourceGrid | object | source grid object used for moving between grids (optional, current grid by default)
targetGrid | object | target grid object used for moving between grids (optional, current grid by default)

Available only in PRO Edition

Example

//move row with id "row1" after row with id "row2"
myGrid1.moveRowTo("row1","row2","move");
//copy row with id "row1" from grid[1] as child of row with id "row2" in grid[2]
var movedId=myGrid1.moveRowTo("row1","row2","copy","child",myGrid1,myGrid2);

Details

Details on the trowId parameter - the target row is:

  • in the 'sibling' mode - the row after which the source row will be pasted
  • in the 'child' mode - the row that will be the parent for the source row in the specified grid
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveRowUp DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

moveRowUp

moves a row one position up, if possible

void moveRowUp(string|number row_id);

Parameters

row_id string|number row id

Example

<a href="javascript:void(0)" onclick="myGrid.moveRowUp(myGrid.getSelectedId())">
    Move selected row up
</a>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


parse DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

parse

loads data from a local data source (XML string, CSV string, XML island, XML object, JSON object, javascript array)

void parse(string|object data, [string type] );

Parameters

data | string|object | the data to load
type | string | data type (XML,JSON,JSarray,CSV), optional, data is treated as XML by default

Example

//parse grid from the xml string
myGrid.parse(data);
//parse grid from the csv string
myGrid.parse(data,"csv");
//parse grid from the javascript array
myGrid.parse(data,"jsarray");
//parse grid from the json string
myGrid.parse(data,"json");

Details

the method works in the synchronous mode

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


pasteBlockFromClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

pasteBlockFromClipboard

pastes the content of the clipboard into a block selection of the grid

void pasteBlockFromClipboard();

Example

myGrid.attachEvent("onKeyPress",onKeyPressed);
...
function onKeyPressed(code,ctrl,shift){
    if(code==67&&ctrl){
        myGrid.setCSVDelimiter("\t");
        myGrid.copyBlockToClipboard();
    }
    if(code==86&&ctrl){
        myGrid.pasteBlockFromClipboard();
    }
    return true;
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


post DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

post

allows sending POST requests by loading data from external file ( xml, json, jsarray, csv )

void post(string url,string post,function call,string type);

Parameters

url | string | url to an external file
post | string | POST request
call | function | an after loading callback function, optional, can be omitted
type | string | type of data (xml,csv,json,jsarray), optional, xml by default

Available only in PRO Edition

Example

myGrid.post("data.php?id=1","data=10",ondataload,"xml");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


preventIECaching DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

preventIECaching

prevents caching in IE by adding random values to URL string

void preventIECaching(boolean mode);

Parameters

mode boolean enable/disable random values in URLs (disabled by default)

Example

//enable preventing IE caching mode
myGrid.preventIECaching(true);
//disable preventing IE caching mode
myGrid.preventIECaching(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


printView DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

printView

generates the print friendly view

void printView(string before,string after);

Parameters

before | string | html which will be placed before the printed grid
after | string | html which will be placed after the printed grid

Available only in PRO Edition

Example

//minimal parameters set
myGrid.printView();
//maximal parameters set
myGrid.printView('<div>before</div>','<strong>after</strong>');

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


refreshComboColumn DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

refreshComboColumn

updates the cells of the combo column

void refreshComboColumn(number index);

Parameters

index number the column index

Example

myGrid.refreshComboColumn(index);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


refreshFilters DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

refreshFilters

refreshes the lists of values in all the filters created by shortcuts or by makeFilter calls

void refreshFilters();

Available only in PRO Edition

Example

myGrid.refreshFilters();

Details

the method can be used if data in grid has been changed and filters need to be updated

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


refreshMath DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

refreshMath

restores math after column moving

void refreshMath();

Example

myGrid.refreshMath();

Change log

added in version 4.6.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


registerCList DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

registerCList

registers an array of options for a multiselect column ("clist") of the grid

void registerCList(index col,array list);

Parameters

col | index | the column index
list | array | an array of options set in the list

Example

myGrid.registerCList(2,["Stephen King","John Grisham","Honore de Balzac"]);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


rowToClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

rowToClipboard

copies the value of a row to the clipboard

void rowToClipboard(string|number rowId);

Parameters

rowId string|number the id of a row (optional, uses the selected row by default)

Available only in PRO Edition

Example

<a href="javascript:void(0)" onclick="copyData()">
    Copy selected row (with tab as delimiter) to clipboard
</a>
<script>
function copyData(type,delim){
   myGrid.setCSVDelimiter('\t');
   myGrid.rowToClipboard();
}
</script>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


rowToDragElement DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

rowToDragElement

redefine this method in your code to specify how grid row values should be displayed during the dragging

void rowToDragElement(string|number id);

Parameters

id string|number the id of the grid's row

Example

myGrid.rowToDragElement=function(id){
    //your code here

    // prepare a text string
    var text = "<img src = 'some.gif'> - "+myGrid.cells(id,0).getValue();
    return text;
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveHiddenColumnsToCookie DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

saveHiddenColumnsToCookie

saves hidden columns to cookie

void saveHiddenColumnsToCookie(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

myGrid.attachEvent("onColumnHidden", function(index,state){
  //minimal parameters set
  myGrid.saveHiddenColumnsToCookie();
  //maximal parameters set
  myGrid.saveHiddenColumnsToCookie("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveOpenStates DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

saveOpenStates

stores open state of TreeGrid in cookie

void saveOpenStates(string name);

Parameters

name string optional, cookie name

Available only in PRO Edition

Example

myTreeGrid.attachEvent("onOpenEnd", function(index,state){
    //minimal parameters set
    myTreeGrid.saveOpenStates();
    //maximal parameters set
    myTreeGrid.saveOpenStates("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");
});

Details

the method doesn't make sense for Grid and is actual for TreeGrid only

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveOrderToCookie DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

saveOrderToCookie

saves the columns' order to cookie

void saveOrderToCookie(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

myGrid.attachEvent("onAfterCMove", function(cInd,posInd){
    //minimal parameters set
    myGrid.saveOrderToCookie();
    //maximal parameters set
    myGrid.saveOrderToCookie("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveSizeToCookie DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

saveSizeToCookie

saves grid layout to cookie

void saveSizeToCookie(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

myGrid.attachEvent("onResizeEnd", function(obj){
    //minimal parameters set
    myGrid.saveSizeToCookie();
    //maximal parameters set
    myGrid.saveSizeToCookie("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveSortingToCookie DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

saveSortingToCookie

saves the sorting order to cookie

void saveSortingToCookie(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

myGrid.attachEvent("onAfterSorting", function(index,type,direction){
    //minimal parameters set
    myGrid.saveSortingToCookie();
    //maximal parameters set
    myGrid.saveSortingToCookie("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectAll DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

selectAll

selects all rows in the grid, doesn't trigger any events

void selectAll();

Example

myGrid.selectAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectBlock DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

selectBlock

selects a block in the Grid, according to the specified rows' ids and columns' indexes

void selectBlock(string|number start_row,number start_col,string|number end_row,number end_column);

Parameters

start_row | string|number | the start row's id
start_col | number | the start column's index
end_row | string|number | the end row's id
end_column | number | the end column's index

Example

myGrid.selectBlock("row1",0,"row5",4);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectCell DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

selectCell

sets selection to the specified row-cell

void selectCell(number|HTMLElement row,number cInd,boolean preserve,boolean edit,boolean show);

Parameters

row | number|HTMLElement | row index or row object
cInd | number | cell index
preserve | boolean | preserve previously selected rows, true/false (optional, false by default). Multiselect mode should be enabled
edit | boolean | switch selected cell to the edit mode (optional, false by default)
show | boolean | true|false - scroll row to view (optional, true by default)

Example

//select the second cell of the first row
myTreeGrid.selectCell(0,1);
//select the second cell of the first row, call "onRowSelect" event,
//preserve previously selected rows
myTreeGrid.selectCell(0,1,true,true);

//select the second cell of the 11th row, switch cell to the edit mode
<button onclick="myfunc()">select cell</button>

<script>
    function myfunc(){
        (arguments[0]||window.event).cancelBubble=true;
        myTreeGrid.selectCell(10,1,false,false,true);
    }
</script>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectRow DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

selectRow

selects a row (and its first cell)

void selectRow(number|HTMLElement row,boolean fl,boolean preserve,boolean show);

Parameters

row | number|HTMLElement | row index or row object
fl | boolean | if true, call function on select (optional, false by default)
preserve | boolean | preserve previously selected rows, true/false (false by default). Multi select mode should be enabled.
show | boolean | true|false - scroll row to view, true by default

Example

//select the first row in the grid
mygrid.selectRow(0);
//select the first row in the grid, call the "onRowSelect" function,
//preserve previously selected rows, scroll row to view
mygrid.selectRow(0,true,true,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectRowById DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

selectRowById

selects row by ID

void selectRowById(string|number row_id,boolean preserve,boolean show,boolean call);

Parameters

row_id | string|number | row id
preserve | boolean | preserve previously selected (optional, false by default). Multi select mode should be enabled.
show | boolean | scroll row to view (optional, true by default)
call | boolean | if true, call the onRowSelect function (optional, false by default)

Example

// minimal parameters' set
mygrid.selectRowById('row1');
// maximal parameters' set
mygrid.selectRowById('row1',true,true,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


serialize DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

serialize

gets actual xml of the grid

void serialize();

Available only in PRO Edition

Example

var str=mygrid.serialize();

Details

the depth of serialization can be set with setSerializationLevel() method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


serializeToCSV DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

serializeToCSV

serializes to CSV string

void serializeToCSV(boolean text_only);

Parameters

text_only boolean optional, force serialization of the text values (skip HTML elements), false by default

Available only in PRO Edition

Example

//serialize grid to CSV format
var csv=mygrid.serializeToCSV();
//serialize grid to CSV format, only the text values will be serialized
var csv=mygrid.serializeToCSV(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setActive DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setActive

sets the grid active to make key navigation possible

void setActive(boolean mode);

Parameters

mode boolean set focus on/off the grid

Example

mygrid.setActive(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setAwaitedRowHeight DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setAwaitedRowHeight

applies a custom height of a row which will be used in the smart rendering mode for row calculation

void setAwaitedRowHeight(number height);

Parameters

height number the awaited height of a row

Example

mygrid.setAwaitedRowHeight(25);

Details

the function needs to be used if you use a custom skin which changes the default row height of the grid.

It can be called only after the setSkin method.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCSVDelimiter DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setCSVDelimiter

changes csv delimiter

void setCSVDelimiter(string str);

Parameters

str string the delimiter used in CSV operations, comma by default (only single char delimiters allowed)

Example

mygrid.setCSVDelimiter(":")
var  str="11:12:13\n21:22:23\n31:32:33";
mygrid.loadCSVString(str);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCellExcellType DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setCellExcellType

sets an excell type for the cell in question

void setCellExcellType(string|number rowId,number cellIndex,string type);

Parameters

rowId | string|number | the row ID
cellIndex | number | the cell index
type | string | the type of excell (code like "ed", "txt", "ch", etc.)

Available only in PRO Edition

Example

// setting the type "txt" for the 2nd cell in the row with the id "row1"
myGrid.setCellExcellType("row1",1,"txt");

See also
  • API
    • getCellExcellType
  • Articles
    • Column Types
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setCellTextStyle DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setCellTextStyle

sets a style for a cell

void setCellTextStyle(string|number row_id,number ind,string styleString);

Parameters

row_id | string|number | the row id
ind | number | the cell index
styleString | string | a style string in the common format (ex: "color:red;border:1px solid gray;")

Example

mygrid.setCellTextStyle("row1",0,"color:red;border:1px solid gray;");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCheckedRows DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setCheckedRows

sets a value for all checkboxes in the specified column

void setCheckedRows(number col_ind,number v);

Parameters

col_ind | number | column index
v | number | value, 0 - not checked, any other value - checked

Example

//check all the checkboxes in the first column
mygrid.setCheckedRows(0,1);
//uncheck all the checkboxes in the first column
mygrid.setCheckedRows(0,0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColAlign DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColAlign

aligns values in columns

void setColAlign(string alStr);

Parameters

alStr string a list of align values (possible values are: right,left,center,justify). Default delimiter is ","

Example

mygrid.setColAlign("right,left,center,justify")

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColLabel DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColLabel

sets a new label for the column header

void setColLabel(number col,number ind);

Parameters

col | number | the index of the header column
ind | number | the index of the header row (default is 0)

Example

//set a new label for the first column
mygrid.setColLabel(0,"New Column Label");
//set a new label for the second line of the first column
mygrid.setColLabel(0,"Some Other Label",1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColSorting DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColSorting

sets the types of column sort

void setColSorting(string sortStr);

Parameters

sortStr string a list of sort codes with the default delimiter

Example

mygrid.setColSorting("int,str,date,na,sortingFunction")

Details

the available sort types are: str, int, date, na or function object for custom sorting

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColTypes DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColTypes

sets column types

void setColTypes(string typeStr);

Parameters

typeStr string the list of type codes(default delimiter is ",")

Example

mygrid.setColTypes("dyn,ed,txt,price,ch,coro,ra,ro");

Details

You can find the list of possible column types with their description in the article Column Types.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColVAlign DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColVAlign

sets vertical align for columns

void setColVAlign(string valStr);

Parameters

valStr string the list of vertical align values for columns (possible values are: baseline,sub,super,top,text-top,middle,bottom,text-bottom)

Example

mygrid.setColVAlign("top,middle,bottom,top,top,sub");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColValidators DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColValidators

assigns validators to the related column

void setColValidators(string vals);

Parameters

vals string the list of validators

Available only in PRO Edition

Example

//sets validators for the 1st and 2nd columns
mygrid.setColValidators("ValidInteger,ValidEmail");
//alternative syntax
mygrid.setColValidators(["ValidInteger","ValidEmail"]);
//adding a few rules for the same column
mygrid.setColValidators(["NotEmpty,ValidInteger","ValidEmail"]);
//seting null/empty value for the columns which shouldn't be affected by validation
mygrid.setColValidators("ValidInteger,,,ValidEmail");
//alternative syntax
mygrid.setColValidators(["ValidInteger",null,null,"ValidEmail"]);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColWidth DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColWidth

sets the width for the specified column in pixels (doesn't work with the percentage based grid)

void setColWidth(number ind,string value);

Parameters

ind | number | the index of a column
value | string | a new width value

Example

//set width of the first column
mygrid.setColWidth(0,"150");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColspan DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColspan

dynamically sets colspan in a row starting from the specified column index

void setColspan(string| number row_id,number col_index,number colspan);

Parameters

row_id | string| number | the id of a row
col_index | number | the index of a column
colspan | number | the size of colspan

Available only in PRO Edition

Example

mygrid.enableColSpan(true);
//merge first 2 cells in the row with the id "row1"
mygrid.setColspan("row1",0,2);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnColor DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColumnColor

colors the background of columns

void setColumnColor(string clr);

Parameters

clr string a comma-delimited list of colors

Example

//set colors for the first 3 columns
mygrid.setColumnColor("white,#d5f1ff,#d5f1ff");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnExcellType DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColumnExcellType

sets an excell type for all the cells in the specified column

void setColumnExcellType(number colIndex,string type);

Parameters

colIndex | number | the index of a column
type | string | the type of excell

Available only in PRO Edition

Example

//set type "ch" for the cells in the 3rd column
mygrid.setColumnExcellType(2,"ch");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnHidden DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColumnHidden

hides/shows a column

void setColumnHidden(number ind,boolean state);

Parameters

ind | number | the index of a column
state | boolean | true/false to hide/show a column

Available only in PRO Edition

Example

//hide the first column
mygrid.setColumnHidden(0,true);
//show the first column
mygrid.setColumnHidden(0,false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnId DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColumnId

sets id for the specified column

void setColumnId(number ind,string|number id);

Parameters

ind | number | the index of a column
id | string|number | the id to set for a column

Example

//set id for the first column
mygrid.setColumnId(0,"column1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnIds DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColumnIds

sets id for every column

void setColumnIds(string ids);

Parameters

ids string a comma-delimited list of ids or an empty one, if the values to use have been set earlier

Example

mygrid.setColumnIds("sales,book,author,price,store,shipping,best,date");

Details

the method can be used to retreive the index of the desired column

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnLabel DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColumnLabel

sets a new column header label

void setColumnLabel(number colIndex,string label,number rowIndex);

Parameters

colIndex | number | the index of the header column
label | string | a text for a new column header label
rowIndex | number | the index of the header row (the default one is 1)

Example

// set a new label for the first column
mygrid.setColLabel(0,"New Column Label");
// set a new label for the second line of the first column
mygrid.setColLabel(0,"New Column Label",1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnMinWidth DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColumnMinWidth

sets the minimum column width (works only for manual resizing)

void setColumnMinWidth(number width,number ind);

Parameters

width | number | the minimum column width, can be set for the specified column, or as a comma-separated list for all columns
ind | number | the index of a column

Example

//set the min width of the first column
mygrid.setColumnMinWidth(50,0);
//set columns min widths
mygrid.setColumnMinWidth("50,100,100,150,200,100,150");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnsVisibility DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setColumnsVisibility

sets the list of visible/hidden columns

void setColumnsVisibility(string list);

Parameters

list string a list of true/false separated by comma, false to show column, true to hide column

Available only in PRO Edition

Example

//hide the first column
mygrid.setColumnsVisibility("true,false,false,false,false");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCustomSorting DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setCustomSorting

sets a custom sorting

void setCustomSorting(function func,number col);

Parameters

func | function | the function used for comparison
col | number | the index of a column to apply the custom sorting to

Available only in PRO Edition

Example

//the second column is sorted by the number of symbols in the text
mygrid.setCustomSorting(sort_custom,1);
...
function sort_custom(a,b,order){
    var n=a.length;
    var m=b.length;
    if(order=="asc")
        return n>m?1:-1;
    else
        return n<m?1:-1;
}

Details

the custom sort has three params:valueA,valueB,order; where the order can be "asc" or "des"

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDateFormat DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setDateFormat

sets a mask for date formatting in the grid (works for "dhxCalendar" and "dhxCalendarA" types only)

void setDateFormat(string mask,string server_mask);

Parameters

mask | string | sets the client-side date format
server_mask | string | sets the server-side date format

Available only in PRO Edition

Example

mygrid.setDateFormat("%m/%d/%Y", "%Y/%m/%d"); // 05/26/2010, 2010/05/26

Details

You can get more format details in the chapter Formatting Number and Date Values.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDelimiter DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setDelimiter

sets a delimiter character used in list values (default is ",")

void setDelimiter(string delim);

Parameters

delim string delimiter as a string

Example

mygrid.setDelimiter(";");
mygrid.setHeader("First Column;Second Column;Third Column");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDragBehavior DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setDragBehavior

sets Drag-And-Drop behavior

void setDragBehavior(string mode);

Parameters

mode string the name of the behavior

Example

mygrid.setDragBehavior("sibling");

Details

the possible variants of behavior mode:

  • child - the item is dropped as a child of the target item;
  • sibling - the item is dropped as a sibling of the target item; if drop occurs between the parent and the child elements, the item is moved to the parent level;
  • complex - the item is dropped as a sibling or a child depending on the position of the target item towards the landing; if drop occurs between the parent and the child elements, the item is moved to the parent level;
  • sibling-next - the item is dropped as a sibling of the target; if drop occurs between the parent and the child elements, the item is moved to the child level;
  • complex-next - the item is dropped as a sibling or a child depending on the position of the target item towards the landing; if drop occurs between the parent and the child elements, the item is moved to the child level.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setEditable DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setEditable

manages the editability of the grid

void setEditable(boolean mode);

Parameters

mode boolean set non-editable if FALSE, set editable otherwise

Example

//set grid editable
mygrid.setEditable(true);
//set grid non-editable
mygrid.setEditable(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setExternalTabOrder DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setExternalTabOrder

sets elements which get focus when the Tab button is pressed in the last or in the first (Tab+Shift) cell

void setExternalTabOrder(string|number|HTMLElement start,string|number|HTMLElement end);

Parameters

start | string|number|HTMLElement | HTML object or its id - gets focus when Tab+Shift are pressed in the first cell
end | string|number|HTMLElement | HTML object or its id - gets focus when Tab is pressed in the last cell

Example

mygrid.setExternalTabOrder("elem1","elem2");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setFieldName DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setFieldName

allows defining an input's name which will be used for data sending,

void setFieldName(string name);

Parameters

name string the mask of an input's name

Example

mygrid.setFieldName("{GRID_ID}[{ROW_INDEX}].{COLUMN_ID}"); // gridbox[0].columnA

Details

the input's name may contain the following auto-replaced elements:

  • GRID_ID - the id of the grid's container,
  • ROW_ID - the ID of a row,
  • ROW_INDEX - the index of a row,
  • COLUMN_ID - the id of a column,
  • COLUMN_INDEX - the index of a column.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setFooterLabel DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setFooterLabel

sets a new label for a cell in the footer

void setFooterLabel(number col,string label,number ind);

Parameters

col | number | the index of a column
label | string | a new label for the specified footer's column. Can contain img:[imageUrl]Text Label
ind | number | the index of a footer row (optional, 1 by default)

Example

//set a new label for the first cell in the first footer's line
mygrid.setFooterLabel(0,'New Label');
//set a new label with an image for the first cell in the second footer's line
mygrid.setFooterLabel(0,'img:[../codebase/imgs/image.gif]New Label',1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setHeader DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setHeader

sets the header label and default params for new headers

void setHeader(string hdrStr,string splitSign,array styles);

Parameters

hdrStr | string | a header string with delimiters
splitSign | string | a string used as a split marker, optional. Default is "#cspan"
styles | array | an array of header styles

Example

// setting columns' labels
mygrid.setHeader("A,B,C");
// setting columns' labels and their styles
mygrid.setHeader(
    "A,B,C",
    null,
    ["text-align:right;","text-align:left;","text-align:center"]
);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconsPath DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setIconsPath

sets the path to external images used in the grid (tree and img column type)

void setIconsPath(string path);

Parameters

path string url of (or a relative path to) the images' folder with the closing ”/”

Example

myGrid.setIconsPath("../codebase/imgs/icons_greenfolders/");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconset DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setIconset

sets the font awesome iconset

void setIconset(string name);

Parameters

name string "fontawesome"

Example

myGrid.setIconset("fontawesome");

Related samples

  • Font awesome
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setImagesPath DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setImagesPath

defines the path to the imgs folder

void setImagesPath(string path);

Parameters

path string the path to the imgs folder, relative to the current page

Example

grid.setImagesPath("./codebase/imgs");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setInitWidths DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setInitWidths

sets the width of columns in pixels

void setInitWidths(string wp);

Parameters

wp string a list of columns' width in pixels

Example

mygrid.setInitWidths("150,100,100,100,100");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setInitWidthsP DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setInitWidthsP

sets the width of columns in percents

void setInitWidthsP(string wp);

Parameters

wp string a list of columns' width in percents. The sum of columns' widths must be equal to 100.

Example

mygrid.setInitWidthsP("50,40,10");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setMathRound DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setMathRound

enables/disables rounding during the math calculations

void setMathRound(number digits);

Parameters

digits number set how many digits must be rounded, set 0 for disabling

Available only in PRO Edition

Example

mygrid.setMathRound(2);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setNoHeader DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setNoHeader

creates a grid without header

void setNoHeader(boolean fl);

Parameters

fl boolean true - for not using header in the grid

Example

mygrid.setNoHeader(true);

Details

call the method before initialization, but after the setHeader() call. The setHeader() method should be called any way, as it defines the number of columns.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setNumberFormat DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setNumberFormat

sets a mask for formatting numeric data (works for "edn", "ron" excell only)

void setNumberFormat(string mask,number cInd,string p_sep,string d_sep);

Parameters

mask | string | a numeric mask; for example 0,000.00 - 1,234.56
cInd | number | the index of a column
p_sep | string | a char used as a decimal separator (point by default)
d_sep | string | a char used as groups part separator (comma by default)

Available only in PRO Edition

Example

mygrid.setNumberFormat("0,000.00",index,".",",");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setPagingSkin DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setPagingSkin

allows setting a custom paging skin

void setPagingSkin(string name);

Parameters

name string the skin's name (default,toolbar,bricks)

Example

//set the "bricks" paging skin
mygrid.setPagingSkin("bricks");
//set the "toolbar" paging skin with the "dhx_skyblue" toolbar's skin
mygrid.setPagingSkin("toolbar");
//set the "toolbar" paging skin with the "dhx_web" toolbar's skin
mygrid.setPagingSkin("toolbar","dhx_web");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setPagingTemplates DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setPagingTemplates

allows setting paging templates for the default skin

void setPagingTemplates(string navigation_template,string info_template);

Parameters

navigation_template | string | a template for paging controls zone
info_template | string | a template for paging state zone

Example

mygrid.setPagingTemplates(
    "Pages - [current:0] [current:+1] [current:+2], from [total] rows",
    "Pages <b>[from]-[to]</b> of <b>[total]</b>"
);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setPagingWTMode DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setPagingWTMode

configures the paging with toolbar mode

void setPagingWTMode(boolean navButtons,boolean navLabel,boolean pageSelect,boolean|array perPageSelect);

Parameters

navButtons | boolean | enables/disables navigation buttons
navLabel | boolean | enables/disables a navigation label
pageSelect | boolean | enables/disables a page selector
perPageSelect | boolean|array | enables/disables a rows-per-page selector. If the parameter is specified as an array, it defines options of the dropdown list.

Available only in PRO Edition

Example

//disables the page selector
mygrid.setPagingWTMode(true,true,false,true);
//disables the row-per-page selector
mygrid.setPagingWTMode(true,true,true,false);
//defines options of the row-per-page selector: 30 rows per page, 60 rows per page,etc.
mygrid.setPagingWTMode(true,true,true,[30,60,90,120])

Details

the method must be called BEFORE the enablePaging() call

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowAttribute DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setRowAttribute

sets a row attribute

void setRowAttribute(string|number id,string name,mixed value);

Parameters

id | string|number | the id of a row
name | string | an attribute's name
value | mixed | a new attribute's value

Example

<?xml version='1.0' encoding='iso-8859-1'?>
<rows>
    <row id="unique_rowid" some="data">
        <cell some="data">cell content</cell>
    </row>
</rows>
...
var rowAttr = grid.setRowAttribute("unique_rowid","some","new value");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowColor DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setRowColor

sets the background color of a row (via the bgcolor attribute)

void setRowColor(string|number row_id,string color);

Parameters

row_id | string|number | the id of a row
color | string | a color value

Example

mygrid.setRowColor("row1","red");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowData DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setRowData

sets new data for row's columns

void setRowData(string rowId,object data);

Parameters

rowId | string | the row id
data | object | data to be set for a row in JSON format

Example

var new_data = {"id1":"value","id2":"value2","id3":"value3"};
myGrid.setRowData("row1",new_data); // setting new data for the row with id "row1"

Details

In order to set data for the row, you need to check that related columns have ids specified.

See also
  • API
    • getRowData
    • Change log

    added in version 5.1

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setRowExcellType DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setRowExcellType

sets an excell type for all cells in the specified row

void setRowExcellType(string|number rowId,string type);

Parameters

rowId | string|number | the id of a row
type | string | the type of an excell

Available only in PRO Edition

Example

//set the "ra_str" type for the cells in the row with the id "row1"
mygrid.setRowExcellType("row1","ra_str");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowHidden DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setRowHidden

hides/shows a row

void setRowHidden(string|number id,boolean state);

Parameters

id | string|number | the id of a row
state | boolean | true/false to hide/show a row

Example

// hide row with the id "row1"
mygrid.setRowHidden("row1",true);
// show row with the id "row1"
mygrid.setRowHidden("row1",false);

Details

Warning! This command doesn't affect row indexes, only visual appearance.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowId DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setRowId

sets a new id for a row by its index

void setRowId(number ind,string|number row_id);

Parameters

ind | number | the index of a row
row_id | string|number | a new id of a row

Example

//set a new id for the first row
mygrid.setRowId(0,"new_row_id");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowTextBold DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setRowTextBold

sets the text of a row BOLD

void setRowTextBold(string|number row_id);

Parameters

row_id string|number the id of a row

Example

mygrid.setRowTextBold("row1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowTextNormal DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setRowTextNormal

sets the text weight of a row to normal

void setRowTextNormal(string|number row_id);

Parameters

row_id string|number the id of a row

Example

mygrid.setRowTextNormal("row1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowTextStyle DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setRowTextStyle

sets the style of a row

void setRowTextStyle(string|number row_id,string styleString);

Parameters

row_id | string|number | the id of a row
styleString | string | a style string in the common format (example: "color:red;border:1px solid gray;")

Example

grid.setRowTextStyle("r123", "background-color: red; font-family: arial;");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowspan DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setRowspan

sets rowspan of the specified length starting from the specified cell

void setRowspan(string|number rowID,number colInd,number length);

Parameters

rowID | string|number | the id of a row
colInd | number | the index of a column
length | number | the length of rowspan

Available only in PRO Edition

Example

mygrid.setRowspan("row1",0,2);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSerializableColumns DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setSerializableColumns

specifies which column must be serialized (if you don't use this method, all columns will be serialized)

void setSerializableColumns(string list);

Parameters

list string a list of true/false values separated by comma, if the list is empty, all fields will be serialized

Available only in PRO Edition

Example

//serialize only the 1st and the 4th columns
mygrid.setSerializableColumns("true,false,false,true,false,false,false");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSerializationLevel DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setSerializationLevel

configures XML serialization

void setSerializationLevel(boolean userData,boolean selectedAttr,boolean config,boolean changedAttr,boolean onlyChanged,boolean asCDATA);

Parameters

userData | boolean | enable/disable user data serialization
selectedAttr | boolean | include the "selected" row's attribute in the resulting XML
config | boolean | serialize the grid's configuration (only the information about the grid's structure)
changedAttr | boolean | include the "changed" cell's attribute in the resulting XML
onlyChanged | boolean | include only the changed rows in the resulting XML
asCDATA | boolean | output cell values as CDATA sections (prevent invalid XML)

Available only in PRO Edition

Example

mygrid.setSerializationLevel(true,false,true,false,true,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSizes DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setSizes

resets sizes of the grid's elements

void setSizes();

Example

mygrid.setSizes();

Details

the method is used to refresh the grid after the size of its container has changed

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setSkin

sets one of the predefined skins ("material" (default),"skyblue","web","terrace")

void setSkin(string name);

Parameters

name string the name of a style

Example

myGrid.setSkin("web"); // sets the "light" skin to the grid

See also
  • Articles
    • Exploring Available Skins
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setSortImgState DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setSortImgState

sets the position and visibility of a sort arrow

void setSortImgState(boolean state,number ind,string order,number row);

Parameters

state | boolean | true/false to show/hide an image
ind | number | the index of a column
order | string | asc/desc - the type of an image (optional, "asc" by default)
row | number | one-based index of the header row (used in multirow headers, the top row by default)

Example

//minimal parameters set
mygrid.setSortImgState(true,1);
//maximal parameters set
mygrid.setSortImgState(true,1,"desc",2);
//hide the sorting image
mygrid.setSortImgState(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setStyle DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setStyle

modifies the default style of the grid and its elements

void setStyle(string ss_header,string ss_grid,string ss_selCell,string ss_selRow);

Parameters

ss_header | string | style def. expression for the header
ss_grid | string | style def. expression for grid cells
ss_selCell | string | style def. expression for the selected cell
ss_selRow | string | style def. expression for the selected row

Example

mygrid.setStyle(
    "background-color:navy;color:white;font-weight:bold;",
    "","color:red;",""
);

Details

call the method before or after init()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSubGrid DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setSubGrid

attaches a grid-like editor to a grid's column

void setSubGrid(object subgrid,number sInd,number tInd);

Parameters

subgrid | object | the subgrid object
sInd | number | the column of the main grid, which should contain the subgrid
tInd | number | the column of the subgrid, its value will be displayed in the main grid cell

Example

mygrid.setColTypes("grid");
mygrid.setSubGrid(subgrid,sInd,tInd);

Details

read more about a grid-like editor in the article Column Types

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSubTree DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setSubTree

attaches a tree-like editor to a grid's column

void setSubTree(object subgrid,number sInd);

Parameters

subgrid | object | the tree object
sInd | number | the column of the main grid, which should contain the tree

Example

mygrid.setColTypes("stree");
mygrid.setSubTree(subgrid,sInd);

Details

read more about a grid-like editor in the article Column Types

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setTabOrder DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setTabOrder

sets the tab order of columns

void setTabOrder(string order);

Parameters

order string a list of tab indexes (the default delimiter is ",")

Example

mygrid.setTabOrder("1,3,5,2,4,6,7,8");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setUserData DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setUserData

sets user data for a row

void setUserData(string|number row_id,string name,mixed value);

Parameters

row_id | string|number | the id of a row, if empty, user data is set for grid (not for a row)
name | string | the name of a user data block
value | mixed | the value of a user data block

Example

//set row userdata
mygrid.setUserData("unique_rowid","someName1","new value");
//set global userdata
mygrid.setUserData("","someName1","new value");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setXMLAutoLoading DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

setXMLAutoLoading

enables dynamic loading from XML

void setXMLAutoLoading(string url,number buffer);

Parameters

url | string | url to the external file
buffer | number | count of rows requested from server by single operation

Example

myGrid.setXMLAutoLoading("data.xml", 50);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRow DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

showRow

scrolls a grid to make the specified row visible

void showRow(number|string rowID);

Parameters

rowID number|string the id of a row

Example

mygrid.showRow("row1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


sortRows DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

sortRows

sorts the Grid by the specified column

void sortRows(number col,string type,string order);

Parameters

col | number | the index of the column, by which the grid needs to be sorted
type | string | the sorting type ("str"|"int"|"date"), optional, by default the sorting type is taken from the column's setting
order | string | the sorting order ("asc"|"des"), optional, by default the sorting order is based on the previous sorting operation

Example

//sort the first column in the grid
myGrid.sortRows(0);
//sort the first column in the grid by the "str" type in the "des" order
myGrid.sortRows(0,"str","des");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


splitAt DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

splitAt

splits the grid

void splitAt(number ind);

Parameters

ind number the index of the column at which the grid should be split

Available only in PRO Edition

Example

mygrid.splitAt(2);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


startFastOperations DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

startFastOperations

starts the fast operation mode

void startFastOperations();

Available only in PRO Edition

Example

mygrid.startFastOperations();

for (var i=0; i<1000; i++)
    mygrid.addRow(mygrid.uid(),[i,"new row"]);

mygrid.stopFastOperations();

Details

in the fast operation mode events are not generated, some time-consuming actions are applied only once, which allows increasing the performance

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


stopFastOperations DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

stopFastOperations

turns off the fast operation mode, needs to be executed to normalize the view

void stopFastOperations();

Example

mygrid.startFastOperations();

for (var i=0; i<1000; i++)
    mygrid.addRow(mygrid.uid(),[i,"new row"]);

mygrid.stopFastOperations();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


submitAddedRows DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

submitAddedRows

includes additional data with the info about which rows were added and which ones deleted, enabled by default

void submitAddedRows(boolean mode);

Parameters

mode boolean enable/disable the mode

Example

mygrid.submitAddedRows(true);

Details

the method is incompatible with the submitSerialization method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


submitColumns DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

submitColumns

sets the list of columns the data of which will be updated

void submitColumns(string inds);

Parameters

inds string a list of columns' indexes

Available only in PRO Edition

Example

mygrid.submitColumns("0,1,2,5");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


submitOnlyChanged DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

submitOnlyChanged

includes only the changed rows into the form submit

void submitOnlyChanged(boolean mode);

Parameters

mode boolean enable/disable the mode

Example

mygrid.submitOnlyChanged(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


submitOnlyRowID DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

submitOnlyRowID

includes only rows' IDS into the form submit

void submitOnlyRowID(boolean mode);

Parameters

mode boolean enable/disable the mode

Example

mygrid.submitOnlyRowID(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


submitOnlySelected DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

submitOnlySelected

includes only the selected rows into the form submit

void submitOnlySelected(boolean mode);

Parameters

mode boolean enable/disable the mode

Example

mygrid.submitOnlySelected(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


submitSerialization DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

submitSerialization

includes a serialized grid as a part of the form submit

void submitSerialization(boolean mode);

Parameters

mode boolean enable/disable the mode

Example

mygrid.submitSerialization(true);

Details

the method is incompatible with the submitAddedRows method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


toExcel DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

toExcel

exports data from dhtmxlGrid to an Excel document

void toExcel(string path);

Parameters

path string the path to the generate.php file resided in the Export package

Available only in PRO Edition

Example

mygrid.toExcel('codebase/grid-excel-php/generate.php');

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


toPDF DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

toPDF

exports data from dhtmxlGrid to a PDF document

void toPDF(string path);

Parameters

path string the path to the generate.php file resided in the Export package

Available only in PRO Edition

Example

mygrid.toPDF('codebase/grid-pdf-php/generate.php');

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


treeToGridElement DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

treeToGridElement

redefine this method in your code to specify how tree node values should be used in the grid

void treeToGridElement(object treeObj,string|number treeNodeId,string|number gridRowId);

Parameters

treeObj | object | a tree object
treeNodeId | string|number | the id of a node created in the tree
gridRowId | string|number | the id of a grid's row

Available only in PRO Edition

Example

grid.treeToGridElement = function(tree,treeID,gridID){
  var z=[treeObj.getItemText(treeID)]; //set tree text as a value of 1st column in grid
  return z;
}

Details

by using the input parameters you can change the id of a new row, values for cells, userdata blocks, etc.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


uid DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

uid

returns the unique ID

void uid();

Example

var uniqueID=mygrid.uid();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unGroup DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

unGroup

ungroups the grid to return it into the plain view

void unGroup();

Available only in PRO Edition

Example

mygrid.unGroup();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


uncheckAll DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

uncheckAll

unchecks all checkboxes of the grid

void uncheckAll();

Example

mygrid.uncheckAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unmarkAll DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

unmarkAll

removes selection from all the marked cells

void unmarkAll();

Available only in PRO Edition

Example

mygrid.unmarkAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


updateCellFromClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

updateCellFromClipboard

sets the value of a cell from the clipboard

void updateCellFromClipboard( [string|number rowId,number cellInd] );

Parameters

rowId | string|number | the id of a row (optional, the selected row is used by default)
cellInd | number | the index of a column (optional, the selected cell is used by default)

Available only in PRO Edition

Example

//minimal parameters set
mygrid.updateCellFromClipboard();
//maximal parameters set
mygrid.updateCellFromClipboard("rowID",0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


updateFromXML DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

updateFromXML

refreshes grid from XML (doesn't work for buffering, tree grid or rows in smart rendering mode)

void updateFromXML(string url,boolean insert_new,boolean del_missed,function afterCall);

Parameters

url | string | url of the file
insert_new | boolean | insert new items (optional, true by default)
del_missed | boolean | delete missed rows (optional, false by default)
afterCall | function | the function that will be executed after refresh is completted

Example

//update grid from xml
mygrid.updateFromXML("grid_updated.xml");
//update grid from xml, insert new items, delete missed rows,
//execute the doAfterUpdate() function after rows have been updated
mygrid.updateFromXML("grid_updated.xml",true,true,doAfterUpdate);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


updateGroups DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

updateGroups

forces grid grouping by registered parameters

void updateGroups();

Available only in PRO Edition

Example

mygrid.updateGroups();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


updateRowFromClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

updateRowFromClipboard

sets the value of a row from the clipboard

void updateRowFromClipboard( [string|number rowId] );

Parameters

rowId string|number the id of a row (optional, the selected row is used by default)

Available only in PRO Edition

Example

//minimal parameters set
mygrid.updateRowFromClipboard();
//maximal parameters set
mygrid.updateRowFromClipboard("rowID");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


validateCell DHTMLX Docs

Documentation
  • addRow
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableUndoRedo
  • enableValidation
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getMarked
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • setXMLAutoLoading
  • showRow
  • sortRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start Grid dhtmlXGrid API Methods

validateCell

forces validation of a specific cell

void validateCell(string|number id,number index,function rule);

Parameters

id | string|number | the id of the cell's row
index | number | the index of the cell's column
rule | function | the validation function

Example

mygrid.validateCell(1,1);//when a cell has some validator(s) assigned already
//or

//when a cell doesn't have any validators assigned
mygrid.validateCell(1,1,dhtmlxValidation.isValidTime);

//or
dhtmlxValidation.isMin4=function(data){
    return data.length>=4;    // the length of data should be more than 4 symbols
};
mygrid.validateCell(1,1,dhtmlxValidation.isMin4);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onAfterCMove
    • onAfterRowDeleted
    • onAfterSorting
    • onBeforeBlockSelected
    • onBeforeCMove
    • onBeforeContextMenu
    • onBeforeDrag
    • onBeforeFormSubmit
    • onBeforePageChanged
    • onBeforeRowDeleted
    • onBeforeSelect
    • onBeforeSorting
    • onBlockRightClick
    • onBlockSelected
    • onCalendarShow
    • onCellChanged
    • onCellMarked
    • onCellUnMarked
    • onCheck
    • onCheckbox
    • onClearAll
    • onCollectValues
    • onColumnCollapse
    • onColumnHidden
    • onDataReady
    • onDhxCalendarCreated
    • onDistributedEnd
    • onDrag
    • onDragIn
    • onDragOut
    • onDrop
    • onDynXLS
    • onEditCancel
    • onEditCell
    • onEmptyClick
    • onEnter
    • onFilterEnd
    • onFilterStart
    • onGridReconstructed
    • onGroup
    • onGroupClick
    • onGroupStateChanged
    • onHeaderClick
    • onKeyPress
    • onLastRow
    • onLiveValidationCorrect
    • onLiveValidationError
    • onMouseOver
    • onPageChanged
    • onPaging
    • onResize
    • onResizeEnd
    • onRightClick
    • onRowAdded
    • onRowCreated
    • onRowDblClicked
    • onRowHide
    • onRowIdChange
    • onRowInserted
    • onRowPaste
    • onRowSelect
    • onScroll
    • onSelectStateChanged
    • onStatReady
    • onSubAjaxLoad
    • onSubGridCreated
    • onSubRowOpen
    • onSyncApply
    • onTab
    • onUndo
    • onUnGroup
    • onValidationCorrect
    • onValidationError
    • onXLE
    • onXLS
  • Others
Start Grid dhtmlXGrid API

Events

onAfterCMove | fires after the column has been moved to a new position
onAfterRowDeleted | fires after a row has been deleted from the grid
onAfterSorting | fires exactly after sorting has occured in the grid
onBeforeBlockSelected | fires when the user starts selecting a block
onBeforeCMove | fires when a column moving operation starts
onBeforeContextMenu | fires immediately before showing a context menu
onBeforeDrag | fires when the drag operation starts
onBeforeFormSubmit | fires before submitting data to the form
onBeforePageChanged | fires before the active page in the grid is changed (paging extension)
onBeforeRowDeleted | fires right before a row is deleted
onBeforeSelect | fires a moment before a row in the grid is selected
onBeforeSorting | fires before data sorting is started
onBlockRightClick | fires after clicking by the right mouse button on the selection block
onBlockSelected | fires when some area is selected in the grid (block selection extension)
onCalendarShow | fires when a calendar pops up in the grid
onCellChanged | fires when a cell value has been changed by user actions or by API calls ( )
onCellMarked | fires immediately after a cell has been selected
onCellUnMarked | fires immediately after a cell is unselected
onCheck | fires after the state of a checkbox has been changed
onCheckbox | the event is deprecated, use the onCheck event instead; fires after the state was changed
onClearAll | fires when the grid is cleared (reloaded)
onCollectValues | fires after the values have been collected to fill the select filter
onColumnCollapse | the event occurs after a group of columns has been collapsed
onColumnHidden | fires after a column has been hidden (the setColumnHidden method has been called)
onDataReady | fires when the data is loaded to the grid but hasn't been rendered yet
onDhxCalendarCreated | fires on calendar's initialization on the page
onDistributedEnd | fires on the end of distributed parsing
onDrag | fires when an item is dragged to another target and the mouse is released, the event can be blocked
onDragIn | fires when an item is dragged to a potential target (the event can be blocked)
onDragOut | fires when an item is dragged out of the potential target (the event can be blocked)
onDrop | fires when an item is already placed in its final position
onDynXLS | fires before requesting additional data from the server in case of dynamic Smart Rendering or dynamic Paging
onEditCancel | fires when the edit operation was canceled
onEditCell | fires 1-3 times depending on cell's editability (see the stage parameter)
onEmptyClick | fires on clicking the dhtmlxgrid area which is not filled with data
onEnter | fires immediately after the Enter key was pressed
onFilterEnd | fires when filtering is completed (filtering extension)
onFilterStart | fires when filtering has been activated but before the real filtering started
onGridReconstructed | fires immediately after a row has been added/deleted or the grid has been reordered
onGroup | fires when a grid was grouped by some column
onGroupClick | fires on clicking a group row (can be blocked)
onGroupStateChanged | fires when a group was opened/closed
onHeaderClick | fires right after the header has been clicked, before sorting or any other actions
onKeyPress | fires after a key has been pressed but before the default key processing starts
onLastRow | fires on pressing the Down-Arrow button while the last row of the page is selected
onLiveValidationCorrect | fires when validation runs successfully
onLiveValidationError | fires when validation runs and rules execution are failed
onMouseOver | fires when the mouse pointer is moved over a cell
onPageChanged | fires after the active page of the grid has been changed (paging extension)
onPaging | fires each time when paging settings are changed (paging extension)
onResize | fires on each resize iteration
onResizeEnd | fires when resizing of a column is finished
onRightClick | fires immediately after the right mouse button has been clicked on a grid's row
onRowAdded | fires right after a row has been added to the grid
onRowCreated | fires after a row has been created in the grid and filled with data
onRowDblClicked | fires right after a row has been double clicked, before a cell editor is opened by a dbl click
onRowHide | fires when the row is hiding
onRowIdChange | fires after the ID of a row has been changed (changeRowId, setRowId, dataprocessor)
onRowInserted | fires when the row is added to the grid and filled with data
onRowPaste | fires for each row pasted from the clipboard (block selection extension)
onRowSelect | fires immediately after a row in the grid has been clicked
onScroll | fires immediately after scrolling has occured
onSelectStateChanged | fires immediately when the selection state has been changed
onStatReady | fires after the stat values have been calculated
onSubAjaxLoad | fires when sub-row-ajax cell loads its data
onSubGridCreated | fires when the creation of a sub-grid was initialized (can be blocked)
onSubRowOpen | fires when a sub-row(sub-grid) was opened/closed
onSyncApply | fires when data synchronization is finished
onTab | fires during the tabulation in the grid, blockable
onUndo | fires after the undo operation is implemented
onUnGroup | fires when the grid was ungrouped
onValidationCorrect | fires when validation runs successfully
onValidationError | fires when validation runs and rules execution are failed
onXLE | fires simultaneously with ending XML parsing, new items are already available in the grid
onXLS | fires before sending the request for a new XML to the server
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterCMove DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onAfterCMove

fires after the column has been moved to a new position

void onAfterCMove(number cInd,number posInd){ ... };

Parameters

cInd | number | the index of the moved column
posInd | number | the index of the new position

Available only in PRO Edition

Example

mygrid.attachEvent("onAfterCMove", function(cInd,posInd){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterRowDeleted DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onAfterRowDeleted

fires after a row has been deleted from the grid

void onAfterRowDeleted(string|number id, [string|number pid] ){ ... };

Parameters

id | string|number | the id of the deleted item
pid | string|number | the parent ID, makes sense for TreeGrid only

Example

grid.attachEvent("onAfterRowDeleted", function(id,pid){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterSorting DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onAfterSorting

fires exactly after sorting has occured in the grid

void onAfterSorting(number index,string type,string direction){ ... };

Parameters

index | number | the index of a column
type | string | the sorting type("str","int","date")
direction | string | the direction of sorting ("asc","des")

Available only in PRO Edition

Example

grid.attachEvent("onAfterSorting", function(index,type,direction){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeBlockSelected DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onBeforeBlockSelected

fires when the user starts selecting a block

void onBeforeBlockSelected(string rId,number cInd){ ... };

Parameters

rId | string | start selection point row ID
cInd | number | start selection point column index

Example

mygrid.attachEvent("onBeforeBlockselected",function(id,ind){
    //your code here
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeCMove DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onBeforeCMove

fires when a column moving operation starts

void onBeforeCMove(number cInd,number posInd){ ... };

Parameters

cInd | number | the index of the moved column
posInd | number | the index of a new position

Available only in PRO Edition

Example

mygrid.attachEvent("onBeforeCMove", function(cInd,posInd){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeContextMenu DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onBeforeContextMenu

fires immediately before showing a context menu

void onBeforeContextMenu(string|number id,number ind,object obj){ ... };

Parameters

id | string|number | the id of the clicked row
ind | number | the index of the cell column
obj | object | a grid object

Available only in PRO Edition

Example

grid.attachEvent("onBeforeContextMenu", function(id,ind,obj){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDrag DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onBeforeDrag

fires when the drag operation starts

void onBeforeDrag(string|number id){ ... };

Parameters

id string|number the id of the dragged row

Example

grid.attachEvent("onBeforeDrag", function(id){
    //your code here
});

Details

The event can be blocked - return false to block the row's dragging

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeFormSubmit DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onBeforeFormSubmit

fires before submitting data to the form

void onBeforeFormSubmit(){ ... };

Available only in PRO Edition

Example

mygrid.attachEvent("onBeforeFormsubmit", function(){
    //your code here
    return true;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforePageChanged DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onBeforePageChanged

fires before the active page in the grid is changed (paging extension)

void onBeforePageChanged(number ind,number count){ ... };

Parameters

ind | number | the index of the current page
count | number | the count of pages

Available only in PRO Edition

Example

grid.attachEvent("onBeforePageChanged", function(ind,count){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeRowDeleted DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onBeforeRowDeleted

fires right before a row is deleted

void onBeforeRowDeleted(string|number rId){ ... };

Parameters

rId string|number the id of a row

Available only in PRO Edition

Example

grid.attachEvent("onBeforeRowDeleted", function(rId){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeSelect DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onBeforeSelect

fires a moment before a row in the grid is selected

void onBeforeSelect(string|number new_row,string|number old_row,number new_col_index){ ... };

Parameters

new_row | string|number | the id of a newly selected row
old_row | string|number | the id of a previously selected row
new_col_index | number | the index of a newly selected cell/column

Available only in PRO Edition

Example

grid.attachEvent("onBeforeSelect", function(new_row,old_row,new_col_index){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeSorting DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onBeforeSorting

fires before data sorting is started

void onBeforeSorting(number ind,string type,string direction){ ... };

Parameters

ind | number | the index of a column
type | string | the sorting type ("str","int","date")
direction | string | the direction of sorting ("asc","des")

Available only in PRO Edition

Example

grid.attachEvent("onBeforeSorting", function(ind,type,direction){
    //your code here
    return false;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBlockRightClick DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onBlockRightClick

fires after clicking by the right mouse button on the selection block

void onBlockRightClick(string block,object ev){ ... };

Parameters

block | string | a constant
ev | object | a mouseEvent

Example

mygrid.attachEvent("onBlockRightClick",function(block,e){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBlockSelected DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onBlockSelected

fires when some area is selected in the grid (block selection extension)

void onBlockSelected(){ ... };

Available only in PRO Edition

Example

grid.attachEvent("onBlockSelected", function(){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCalendarShow DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onCalendarShow

fires when a calendar pops up in the grid

void onCalendarShow(object myCal,string|number row_id,number col_ind){ ... };

Parameters

myCal | object | the calendar object
row_id | string|number | the id of the related row
col_ind | number | the index of the related column

Example

grid.attachEvent("onCalendarShow",function(myCal,row_id,col_ind){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCellChanged DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onCellChanged

fires when a cell value has been changed by user actions or by API calls ( )

void onCellChanged(string|number rId,number cInd,mixed nValue){ ... };

Parameters

rId | string|number | the id of a row
cInd | number | the index of a cell
nValue | mixed | a new value

Available only in PRO Edition

Example

grid.attachEvent("onCellChanged", function(rId,cInd,nValue){
    //your code here
});

Details

the event will be called for data set during the loading from XML data, or during the adding of a new row as well

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCellMarked DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onCellMarked

fires immediately after a cell has been selected

void onCellMarked(string|number rid,string|number ind){ ... };

Parameters

rid | string|number | the id of the selected row
ind | string|number | the index of the selected cell

Available only in PRO Edition

Example

grid.attachEvent("onCellMarked", function(rid,ind){
    //your code here
});

Details

the event works only with "Markers" extension

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCellUnMarked DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onCellUnMarked

fires immediately after a cell is unselected

void onCellUnMarked(string|number rid,number ind){ ... };

Parameters

rid | string|number | the id of the selected row
ind | number | the index of the selected cell

Available only in PRO Edition

Example

grid.attachEvent("onCellUnMarked", function(rid,ind){
    //your code here
});

Details

the event works only with "Markers" extension

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCheck DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onCheck

fires after the state of a checkbox has been changed

void onCheck(string|number rId,number cInd,boolean state){ ... };

Parameters

rId | string|number | the id of a row
cInd | number | the index of a cell
state | boolean | the state of the checkbox/radiobutton

Available only in PRO Edition

Example

grid.attachEvent("onCheck", function(rId,cInd,state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCheckbox DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onCheckbox

the event is deprecated, use the onCheck event instead; fires after the state was changed

void onCheckbox(string|number rId,number cInd,boolean state){ ... };

Parameters

rId | string|number | the id of the row
cInd | number | the index of a cell
state | boolean | the state of the checkbox/radiobutton

Available only in PRO Edition

Example

grid.attachEvent("onCheckbox", function(rId,cInd,state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClearAll DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onClearAll

fires when the grid is cleared (reloaded)

void onClearAll(){ ... };

Available only in PRO Edition

Example

grid.attachEvent("onClearAll", function(){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCollectValues DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onCollectValues

fires after the values have been collected to fill the select filter

void onCollectValues(number index){ ... };

Parameters

index number the index of a column

Available only in PRO Edition

Example

grid.attachEvent("onCollectValues", function(index){
    //your code here
    return true; //mandatory for the default processing
});

Details

The event can be used to provide a custom list of options for select filter.

grid.attachEvent("onCollectValues", function(index){
    if (index == 2)
        return ["one","two","three"]; //options for select filter
    else
        return true; //default processing
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onColumnCollapse DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onColumnCollapse

the event occurs after a group of columns has been collapsed

void onColumnCollapse(number ind,boolean state){ ... };

Parameters

ind | number | the index of the first column of the group
state | boolean | the state of the collapse: true - the column was collapsed, false - the column was expanded

Available only in PRO Edition

Example

mygrid.attachEvent("onColumnCollapse",function(ind,state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onColumnHidden DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onColumnHidden

fires after a column has been hidden (the setColumnHidden method has been called)

void onColumnHidden(number index,boolean state){ ... };

Parameters

index | number | the index of a column
state | boolean | true - the column is hidden, otherwise the column is shown

Available only in PRO Edition

Example

grid.attachEvent("onColumnHidden", function(index,state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDataReady DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onDataReady

fires when the data is loaded to the grid but hasn't been rendered yet

void onDataReady(){ ... };

Example

mygrid.attachEvent("onDataReady",function(){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDhxCalendarCreated DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onDhxCalendarCreated

fires on calendar's initialization on the page

void onDhxCalendarCreated(object myCal){ ... };

Parameters

myCal object the calendar object

Example

grid.attachEvent("onDhxCalendarCreated",function(myCal){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDistributedEnd DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onDistributedEnd

fires on the end of distributed parsing

void onDistributedEnd(){ ... };

Available only in PRO Edition

Example

grid.attachEvent("onDistributedEnd", function(){
    // your code here
});

Details

in the case of distributed parsing the onXLE event will mark just the moment when data was loaded and the first bunch of data was processed.
The moment when all data was processed and rendered can be detected by the onDistributedEnd event.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDrag DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onDrag

fires when an item is dragged to another target and the mouse is released, the event can be blocked

boolean onDrag(string|number sId,string|number tId,object sObj,object tObj,number sInd,number tInd){ ... };

Parameters

sId | string|number | the id of the source item
tId | string|number | the id of the target item
sObj | object | the source grid object
tObj | object | the target grid object
sInd | number | the index of the column from which drag has started
tInd | number | the index of the column in which drop occurs

Returns

boolean true - confirms drag-and-drop, false - denies drag-and-drop

Available only in PRO Edition

Example

grid.attachEvent("onDrag", function(sId,tId,sObj,tObj,sInd,tInd){
    // your code here
});

Details

to get more info, read the article Drag-and-Drop Support

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDragIn DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onDragIn

fires when an item is dragged to a potential target (the event can be blocked)

void onDragIn(string|number dId,string|number tId,object sObj,object tObj){ ... };

Parameters

dId | string|number | the id of the dragged item
tId | string|number | the id of the potential drop landing
sObj | object | a grid object
tObj | object | the target grid object

Available only in PRO Edition

Example

mygrid.attachEvent("onDragIn", function(dId,tId,sObj,tObj){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDragOut DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onDragOut

fires when an item is dragged out of the potential target (the event can be blocked)

void onDragOut(string|number dId,string|number tId,object sObj,object tObj){ ... };

Parameters

dId | string|number | the id of the dragged item
tId | string|number | the id of the potential drop landing
sObj | object | a grid object
tObj | object | the target grid object

Available only in PRO Edition

Example

mygrid.attachEvent("onDragOut", function(dId,tId,sObj,tObj){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDrop DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onDrop

fires when an item is already placed in its final position

void onDrop(string|number sId,string|number tId,string|number dId,object sObj,object tObj,number sCol,number tCol){ ... };

Parameters

sId | string|number | the id of the source item
tId | string|number | the id of the target item
dId | string|number | the id of the dropped item (makes sense for mercy drag-n-drop)
sObj | object | the source grid object
tObj | object | the target grid object
sCol | number | the index of the column from which drag started
tCol | number | the index of the column in which drop occurs

Available only in PRO Edition

Example

grid.attachEvent("onDrop", function(sId,tId,dId,sObj,tObj,sCol,tCol){
    // your code here
});

Details

the event can be used to catch the moment when the operation is finished

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDynXLS DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onDynXLS

fires before requesting additional data from the server in case of dynamic Smart Rendering or dynamic Paging

void onDynXLS(number start,number count){ ... };

Parameters

start | number | the position from which data requested
count | number | the count of rows requested

Available only in PRO Edition

Example

grid.attachEvent("onDynXLS", function(start,count){
    //your code here
});

Details

the event is blockable

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEditCancel DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onEditCancel

fires when the edit operation was canceled

void onEditCancel(string|number rowId,number colInd,mixed value){ ... };

Parameters

rowId | string|number | the id of a row
colInd | number | the index of a column
value | mixed | the value of a cell

Example

mygrid.attachEvent("onEditCancel",function(rId,cInd,val){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEditCell DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onEditCell

fires 1-3 times depending on cell's editability (see the stage parameter)

mixed onEditCell(number stage,string|number rId,number cInd,number nValue,number oValue){ ... };

Parameters

stage | number | the stage of editing (0-before start; can be canceled if return false,1 - the editor is opened,2- the editor is closed)
rId | string|number | the id of a row
cInd | number | the index of a cell
nValue | number | a new value (only for the stage 2)
oValue | number | an old value (only for the stage 2)

Returns

mixed true - editing is confirmed, false - editing is canceled; or a new value of the cell

Available only in PRO Edition

Example

grid.attachEvent("onEditCell", function(stage,rId,cInd,nValue,oValue){
    // your code here
});

Details

the event is commonly used for validation

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEmptyClick DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onEmptyClick

fires on clicking the dhtmlxgrid area which is not filled with data

void onEmptyClick(object ev){ ... };

Parameters

ev object MouseEvent

Example

grid.attachEvent("onEmptyClick", function(ev){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEnter DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onEnter

fires immediately after the Enter key was pressed

void onEnter(string|number id,number ind){ ... };

Parameters

id | string|number | the id of a row
ind | number | the index of a cell

Available only in PRO Edition

Example

grid.attachEvent("onEnter", function(id,ind){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onFilterEnd DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onFilterEnd

fires when filtering is completed (filtering extension)

void onFilterEnd(array elements){ ... };

Parameters

elements array a collection of filtering elements

Available only in PRO Edition

Example

grid.attachEvent("onFilterEnd", function(elements){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onFilterStart DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onFilterStart

fires when filtering has been activated but before the real filtering started

boolean onFilterStart(array indexes,array values){ ... };

Parameters

indexes | array | an array of indexes
values | array | an array of filtering values

Returns

boolean returning true will confirm filtering

Available only in PRO Edition

Example

grid.attachEvent("onFilterStart", function(indexes,values){
    // your code here
    return true;
});

Details

The event is blockable. Returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onGridReconstructed DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onGridReconstructed

fires immediately after a row has been added/deleted or the grid has been reordered

void onGridReconstructed(object grid_obj){ ... };

Parameters

grid_obj object a grid object

Available only in PRO Edition

Example

grid.attachEvent("onGridReconstructed", function(grid_obj){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onGroup DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onGroup

fires when a grid was grouped by some column

void onGroup(){ ... };

Available only in PRO Edition

Example

grid.attachEvent("onGroup", function(){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onGroupClick DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onGroupClick

fires on clicking a group row (can be blocked)

void onGroupClick(string name){ ... };

Parameters

name string the name of a group

Available only in PRO Edition

Example

mygrid.attachEvent("onGroupClick",function(name){
    //your code here
    return false;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onGroupStateChanged DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onGroupStateChanged

fires when a group was opened/closed

void onGroupStateChanged(string|number value,boolean state){ ... };

Parameters

value | string|number | the key value of a group
state | boolean | the open state, true - opened

Available only in PRO Edition

Example

grid.attachEvent("onGroupStateChanged", function(value,state){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onHeaderClick DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onHeaderClick

fires right after the header has been clicked, before sorting or any other actions

void onHeaderClick(number ind,object obj){ ... };

Parameters

ind | number | the index of a column
obj | object | the related javascript event object

Available only in PRO Edition

Example

grid.attachEvent("onHeaderClick", function(ind,obj){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onKeyPress DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onKeyPress

fires after a key has been pressed but before the default key processing starts

void onKeyPress(number code,boolean cFlag,boolean sFlag){ ... };

Parameters

code | number | key code
cFlag | boolean | control key flag
sFlag | boolean | shift key flag

Available only in PRO Edition

Example

grid.attachEvent("onKeyPress", function(code,cFlag,sFlag){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onLastRow DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onLastRow

fires on pressing the Down-Arrow button while the last row of the page is selected

void onLastRow(){ ... };

Example

myGrid.attachEvent("onLastRow",function(){
    // your code here
});

Details

The event is blockable. Returning false in case of dynamic loading and paging will block switching to the next page.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onLiveValidationCorrect DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onLiveValidationCorrect

fires when validation runs successfully

void onLiveValidationCorrect(string|number id,number index,mixed value,object input,string rule){ ... };

Parameters

id | string|number | the id of a row
index | number | the index of a column
value | mixed | the value of a cell
input | object | an input object
rule | string | the name of a rule

Available only in PRO Edition

Example

grid.attachEvent("onLiveValidationCorrect", function(id,index,value,input,rule){
    // your code here
});

Details

read more details in the article Validating Data Items

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onLiveValidationError DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onLiveValidationError

fires when validation runs and rules execution are failed

void onLiveValidationError(string|number id,number index,mixed value,object input,string rule){ ... };

Parameters

id | string|number | the id of a row
index | number | the index of a column
value | mixed | the value of a cell
input | object | an input object
rule | string | the name of a rule

Available only in PRO Edition

Example

grid.attachEvent("onLiveValidationError", function(id,index,value,input,rule){
    // your code here
});

Details

read more details in the article Validating Data Items

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseOver DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onMouseOver

fires when the mouse pointer is moved over a cell

void onMouseOver(string|number id,number ind){ ... };

Parameters

id | string|number | the id of a row
ind | number | the index of a cell

Available only in PRO Edition

Example

grid.attachEvent("onMouseOver", function(id,ind){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onPageChanged DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onPageChanged

fires after the active page of the grid has been changed (paging extension)

void onPageChanged(number ind,number fInd,number lInd){ ... };

Parameters

ind | number | the index of the current page
fInd | number | the index of the first row of the page
lInd | number | the index of the last row of the page

Available only in PRO Edition

Example

grid.attachEvent("onPageChanged", function(ind,fInd,lInd){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onPaging DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onPaging

fires each time when paging settings are changed (paging extension)

void onPaging(number count){ ... };

Parameters

count number the count of pages

Available only in PRO Edition

Example

grid.attachEvent("onPaging", function(count){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onResize DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onResize

fires on each resize iteration

void onResize(number cInd,number cWidth,object obj){ ... };

Parameters

cInd | number | the index of a cell
cWidth | number | the width of a cell
obj | object | the grid object

Available only in PRO Edition

Example

grid.attachEvent("onResize", function(cInd,cWidth,obj){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onResizeEnd DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onResizeEnd

fires when resizing of a column is finished

void onResizeEnd(object obj){ ... };

Parameters

obj object the grid object

Available only in PRO Edition

Example

grid.attachEvent("onResizeEnd", function(obj){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRightClick DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onRightClick

fires immediately after the right mouse button has been clicked on a grid's row

void onRightClick(string|number id,number ind,object obj){ ... };

Parameters

id | string|number | the id of the clicked row
ind | number | the index of the cell column
obj | object | an event object

Available only in PRO Edition

Example

grid.attachEvent("onRightClick", function(id,ind,obj){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowAdded DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onRowAdded

fires right after a row has been added to the grid

void onRowAdded(string|number rId){ ... };

Parameters

rId string|number the id of a row

Available only in PRO Edition

Example

grid.attachEvent("onRowAdded", function(rId){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowCreated DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onRowCreated

fires after a row has been created in the grid and filled with data

void onRowCreated(string|number rId,object rObj,object rXML){ ... };

Parameters

rId | string|number | the id of a row
rObj | object | the row object
rXML | object | the related XML (if available)

Available only in PRO Edition

Example

grid.attachEvent("onRowCreated", function(rId,rObj,rXml){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowDblClicked DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onRowDblClicked

fires right after a row has been double clicked, before a cell editor is opened by a dbl click

void onRowDblClicked(string|number rId,index cInd){ ... };

Parameters

rId | string|number | the id of a row
cInd | index | the index of a column

Available only in PRO Edition

Example

grid.attachEvent("onRowDblClicked", function(rId,cInd){
    // your code here
});

Details

if returns false, the event is canceled

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowHide DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onRowHide

fires when the row is hiding

void onRowHide(string|number id,boolean state){ ... };

Parameters

id | string|number | the id of a row
state | boolean | true, if the row is hiding, false for showing the row

Example

mygrid.attachEvent("onColumnCollapse",function(id,state){
    //your code here
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowIdChange DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onRowIdChange

fires after the ID of a row has been changed (changeRowId, setRowId, dataprocessor)

void onRowIdChange(string|number old_id,string|number new_id){ ... };

Parameters

old_id | string|number | the old ID of a row
new_id | string|number | the new ID of a row

Available only in PRO Edition

Example

grid.attachEvent("onRowIdChange", function(old_id,new_id){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowInserted DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onRowInserted

fires when the row is added to the grid and filled with data

void onRowInserted(object row,number rInd){ ... };

Parameters

row | object | the row object
rInd | number | the row's index

Example

mygrid.attachEvent("onRowInserted",function(row,rInd){
    //your code here
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowPaste DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onRowPaste

fires for each row pasted from the clipboard (block selection extension)

void onRowPaste(string|number rId){ ... };

Parameters

rId string|number the id of the row

Available only in PRO Edition

Example

grid.attachEvent("onRowPaste", function(rId){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowSelect DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onRowSelect

fires immediately after a row in the grid has been clicked

void onRowSelect(string|number id,number ind){ ... };

Parameters

id | string|number | the id of the clicked row
ind | number | the index of the clicked cell

Available only in PRO Edition

Example

grid.attachEvent("onRowSelect", function(id,ind){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onScroll DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onScroll

fires immediately after scrolling has occured

void onScroll(number sLeft,number sTop){ ... };

Parameters

sLeft | number | left scroll value
sTop | number | top scroll value

Available only in PRO Edition

Example

grid.attachEvent("onScroll", function(sLeft,sTop){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelectStateChanged DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onSelectStateChanged

fires immediately when the selection state has been changed

void onSelectStateChanged(string|number id){ ... };

Parameters

id string|number the id or the list of ids of selected row(s)

Available only in PRO Edition

Example

grid.attachEvent("onSelectStateChanged", function(id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onStatReady DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onStatReady

fires after the stat values have been calculated

void onStatReady(){ ... };

Available only in PRO Edition

Example

grid.attachEvent("onStatReady", function(){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSubAjaxLoad DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onSubAjaxLoad

fires when sub-row-ajax cell loads its data

void onSubAjaxLoad(string|number id,string content){ ... };

Parameters

id | string|number | the ID of the row for which data is loaded
content | string | the response received from the server

Available only in PRO Edition

Example

grid.attachEvent("onSubAjaxLoad", function(id,content){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSubGridCreated DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onSubGridCreated

fires when the creation of a sub-grid was initialized (can be blocked)

void onSubGridCreated(object sub_grid_obj,string|number rId,number rInd){ ... };

Parameters

sub_grid_obj | object | sub-grid object
rId | string|number | the id of the related row
rInd | number | the index of the related row

Example

//The event can be used to change the grid behavior:
mygrid.attachEvent("onSubGridCreated",function(subgrid){
    subgrid.enableMultiselect(true);
    subgrid.enableEditEvents(false,false,false);
    return true; // mandatory!
});
//The event can be used to completely change the way the sub-grid is loaded
grid.attachEvent("onSubGridCreated",function(subgrid){
    subgrid.setHeader("A,B,C");
    subgrid.setColTypes("ro,ro,ro");
    subgrid.setInitWidths("100,100,100");
    subgrid.init();
    subgrid.load("data.xml");
    return false;  // block default behavior
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSubRowOpen DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onSubRowOpen

fires when a sub-row(sub-grid) was opened/closed

void onSubRowOpen(string|number id,boolean state){ ... };

Parameters

id | string|number | the id of a row
state | boolean | the open state, true - opened

Available only in PRO Edition

Example

grid.attachEvent("onSubRowOpen", function(id,state){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSyncApply DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onSyncApply

fires when data synchronization is finished

void onSyncApply(){ ... };

Example

myGrid.attachEvent("onSyncApply", function(){
    //your code here
});

Details

If the grid.sync(store) method was called, the grid will be updated each time when data is changed in the store. The onSyncApply event handler will be called after grid update.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onTab DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onTab

fires during the tabulation in the grid, blockable

void onTab(boolean mode){ ... };

Parameters

mode boolean the direction of tabulation (true for straight tab, false for backward tab)

Available only in PRO Edition

Example

grid.attachEvent("onTab", function(mode){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onUndo DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onUndo

fires after the undo operation is implemented

void onUndo(string|number rowId){ ... };

Parameters

rowId string|number the id of a row

Available only in PRO Edition

Example

mygrid.attachEvent("onUndo",function(rId){
    //your code here
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onUnGroup DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onUnGroup

fires when the grid was ungrouped

void onUnGroup(){ ... };

Available only in PRO Edition

Example

grid.attachEvent("onUnGroup", function(){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onValidationCorrect DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onValidationCorrect

fires when validation runs successfully

void onValidationCorrect(string|number id,number index,mixed value,string rule){ ... };

Parameters

id | string|number | the id of a row
index | number | the index of a column
value | mixed | the value of a cell
rule | string | the name of a rule

Available only in PRO Edition

Example

grid.attachEvent("onValidationCorrect", function(id,index,value,rule){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onValidationError DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onValidationError

fires when validation runs and rules execution are failed

void onValidationError(string|number id,number index,mixed value,string rule){ ... };

Parameters

id | string|number | the id of a row
index | number | the index of a column
value | mixed | the value of a cell
rule | string | the name of a rule

Example

myGrid.attachEvent("onValidationError", function(id,index,value,rule){
    // your code here
    return true;
});

Details

the event is blockable, returning false will ignore the validation error

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onXLE

fires simultaneously with ending XML parsing, new items are already available in the grid

void onXLE(object grid_obj,number count){ ... };

Parameters

grid_obj | object | the grid object
count | number | the count of added rows

Available only in PRO Edition

Example

grid.attachEvent("onXLE", function(grid_obj,count){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start Grid dhtmlXGrid API Events

onXLS

fires before sending the request for a new XML to the server

void onXLS(object grid_obj){ ... };

Parameters

grid_obj object the grid object

Available only in PRO Edition

Example

grid.attachEvent("onXLS", function(grid_obj){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • csvParser
    • editor
Start Grid dhtmlXGrid API

Others

csvParser | object that controls CSV parsing
editor | reference to the cell that is in the edit state
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


csvParser DHTMLX Docs

Documentation
  • csvParser
  • editor
Start Grid dhtmlXGrid API Others

csvParser

object that controls CSV parsing

object csvParser;

Example

var array_data = grid.csvParser.unblock( string_data, cell_separator, row_separator );

Details

To enable advanced CSV parsing you can use:

grid.csvParser = grid.csvExtParser;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


editor DHTMLX Docs

Documentation
  • csvParser
  • editor
Start Grid dhtmlXGrid API Others

editor

reference to the cell that is in the edit state

object editor;

Example

grid.editor.getValue();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Cell-Level API DHTMLX Docs

Documentation
  • dhtmlXGrid API
  • Cell-Level API
    • isChecked
    • isDisabled
    • getAttribute
    • getBgColor
    • getCellCombo
    • getHorAlign
    • getMathValue
    • getTextColor
    • getTitle
    • getValue
    • getWidth
    • setAttribute
    • setBgColor
    • setDisabled
    • setHorAlign
    • setTextColor
    • setValue
  • Creating Grid on a Page
  • Loading and Storing Data
  • Configuring Grid
  • Managing Data in Grid
  • Styling Grid
  • Integrating with Other Components
Start Grid

Cell-Level API

isChecked

indicates whether a checkbox or a radio button is checked

Returns:

  • state - (boolean) returns true, if the first child of the cell is checked. Otherwise, false
mygrid.cells("row1",1).isChecked();

isDisabled

indicates whether the specified cell is disabled by the method setDisabled(). If the setDisabled() method wasn't called for the cell, the method returns 'undefined'.

Returns:

  • mode - (boolean) true, if the cell is disabled, otherwise - false
mygrid.cells("row1",4).setDisabled(true);
...
mygrid.cells("row1",4).isDisabled(); // ->true

getAttribute

checks whether the specified cell has a certain attribute

Parameters:

  • name - (string) the attribute's name
mygrid.cells("row1",1).setAttribute('invalid', true);
...
mygrid.cells("row1",1).getAttribute('invalid'); // -> true

getBgColor

gets the background color of the cell set by the method setBgColor. If setBgColor() wasn't called for the cell, the method returns ”#FFFFFF”.

Returns:

  • bgcolor - (string) the background color of the cell
//colors the cell in red in 2 different ways
mygrid.cells("row1",1).setBgColor('red');
mygrid.cells("row1",3).setBgColor('#ff0000');
...
mygrid.cells("row1",1).getBgColor(); // -> "red"
mygrid.cells("row1",3).getBgColor(); // -> "#ff0000"

getCellCombo

returns dhtmlXCombo cell object that can be used to work with dhtmlxCombo API

Returns:

  • cell_combo - (object) dhtmlXCombo cell object
//getting  dhtmlXCombo cell object
myCombo = grid.cells(id,index).getCellCombo();

//using it later with dhtmlxCombo API
myCombo.addOption(key,text);

getHorAlign

retrieves the horizontal alignment set in the cell by the method setHorAlign. If setHorAlign() wasn't called for the cell, the method returns “left”.

Returns:

  • hor_align - (string) the horizontal alignment set in the cell
mygrid.cells("row1",1).setHorAlign('right');
...
mygrid.cells("row1",1).getHorAlign(); // -> "right"

getMathValue

gets the math formula specified for the cell. If no formulas are specified for the cell, the method returns the plain cell value.

Returns:

  • math_value - (string) the math formula specified for the cell
mygrid.cells("row1",2).getMathValue(); // returns the value like "=c2*c3"

getTextColor

gets the text color of the cell set by the method setTextColor. If setTextColor wasn't called for the cell, the method returns ”#000000”.

Returns:

  • text_color - (string) the text color of the cell
//colors the cell in red in 3 different ways
mygrid.cells("row1",1).setTextColor('red');
mygrid.cells("row1",2).setTextColor('rgb(255,0,0)');
mygrid.cells("row1",3).setTextColor('#ff0000');
...
mygrid.cells("row1",1).getTextColor(); // -> "red"
mygrid.cells("row1",2).getTextColor(); // -> "rgb(255,0,0)"
mygrid.cells("row1",3).getTextColor(); // -> "rgb(255,0,0)"

getTitle

gets the value of the specified cell as it's displayed in the grid

Returns:

  • value - (string) the value of the cell as it's displayed in the grid
mygrid.cells("row1",3).getTitle(); // ->"$12.99"
mygrid.cells("row1",3).getValue(); // ->"12.99"

getValue

gets the value of the specified cell

Returns:

  • value (string) - the value of the cell
mygrid.cells("row1",3).getValue(); // ->"12.99"

getWidth

gets the width of the cell in pixels

Returns:

  • width - (number) the width of the cell in pixels
mygrid.cells("row1",3).getWidth();

setAttribute

sets a custom attribute (flag) for the specified cell

Parameters:

  • name - (string) the attribute's name
  • value - (mixed) the attribute's value
mygrid.cells("row1",1).setAttribute('invalid', true);
...
mygrid.cells("row1",1).getAttribute('invalid'); // -> true

setBgColor

sets the background color for the cell

Parameters:

  • value - (string) the color's value

    Can be specified as:

    • Predefined/Cross-browser color name
    • Hexadecimal color
mygrid.cells("row1",1).setBgColor('red');      // Predefined/Cross-browser color name
mygrid.cells("row1",3).setBgColor('#ff0000');  //Hexadecimal color

setDisabled

disables/enables the cell

Parameters:

  • value - (boolean) the true value disables the cell, the false one - enables
mygrid.cells("row1",2).setDisabled(true);

setHorAlign

sets the horizontal alignment in the cell

Parameters:

  • value - (string) the horizontal alignment

    Possible values are:

    • 'r' or 'right' - the right alignment
    • 'l' or 'left' - the left alignment
    • 'c' or 'center' - the center alignment
mygrid.cells("row1",1).setHorAlign('r');

setTextColor

sets the text color for the cell

Parameters:

  • value - (string) the color value

    Can be specified as:

    • Predefined/Cross-browser color name
    • Hexadecimal color
    • RGB color
mygrid.cells("row1",1).setTextColor('red');      // Predefined/Cross-browser color name
mygrid.cells("row1",3).setTextColor('#ff0000');      // Hexadecimal color
mygrid.cells("row1",2).setTextColor('rgb(255,0,0)'); // RGB color

setValue

sets the value for the specified cell

Parameters:

  • value - (string) the value to set
mygrid.cells("row1",0).setValue("newValue");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Creating Grid on a Page DHTMLX Docs

Documentation
  • dhtmlXGrid API
  • Cell-Level API
  • Creating Grid on a Page
    • Initializing Grid on a Page
    • Initializing Grid from HTML
  • Loading and Storing Data
  • Configuring Grid
  • Managing Data in Grid
  • Styling Grid
  • Integrating with Other Components
Start Grid

Creating Grid on a Page

  • Initializing Grid on a Page
  • Initializing Grid from HTML
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing Grid on a Page DHTMLX Docs

Documentation
  • Initializing Grid on a Page
    • Step 1. A new HTML file and source files
    • Step 2. Placing dhtmlxGrid on a page
    • Step 3. Object constructor
    • Step 4. Configuring and initializing
    • Step 5. Loading data
    • Step 6. Database structure
    • Step 7. Loading data from the server
    • Step 8. Saving data
    • What's next
  • Initializing Grid from HTML
Start Grid Creating Grid on a Page

Initializing Grid on a Page

This article walks you through creating a basic application containing dhtmlxGrid. As you follow the steps, you learn how to initialize dhtmlxGrid, customize and configure its appearance, load data. The final code of the article can be used as the start point while creating applications with the help of dhtmlxGrid.

Step 1. A new HTML file and source files

To begin with, create a new HTML file and include the DHTMLX code files in it (it includes the dhtmlxGrid's functionality)

Each DHTMLX component can be used standalone or as a part of the general library. If you use dhtmlxGrid standalone you need to include its source files on the page:

  • dhtmlxgrid.js
  • dhtmlxgrid.css
<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxgrid.css">
    <script src="codebase/dhtmlxgrid.js"></script>
</head>

If you use dhtmlxGrid as a part of "dhtmlxSuite" package you need to include 2 files:

  • dhtmlx.js
  • dhtmlx.css
<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

dhtmlxGrid js/css files are parts of DHTMLX js/css correspondingly, so there is no need to include them separately.

Including source files from CDN

To include the source files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Step 2. Placing dhtmlxGrid on a page

At the next step create a div container where you will place your grid.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Quick start with dhtmlxGrid</title>
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
    <script src="../codebase/dhtmlx.js"></script>
</head>
<body>
    <div id="gridbox" style="width:300px;height:400px;"></div>      <script>
    //here you will place your JavaScript code
    </script>
</body>
</html>

Step 3. Object constructor

To create a new dhtmlxGrid object, use the dhtmlXGridObject() constructor:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Quick start with dhtmlxGrid</title>
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
    <script src="../codebase/dhtmlx.js"></script>
</head>
<body>
    <div id="gridbox" style="width:600px;height:400px;"></div>
    <script>
        mygrid = new dhtmlXGridObject('gridbox');
    </script>
</body>
</html>

The only parameter is the HTML container. We've created it at the previous step.

Step 4. Configuring and initializing

After you have created an object of dhtmlxGrid, you can move to its configuration and initialization. The grid is configured by calling the related methods.

We will make the most often used configuration settings:

Basic dhtmlxGrid configuration

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Quick start with dhtmlxGrid</title>
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
    <script src="../codebase/dhtmlx.js"></script>
</head>
<body>
    <div id="gridbox" style="width:600px;height:400px;"></div>
    <script>
        mygrid = new dhtmlXGridObject('gridbox');

        //the path to images required by grid         mygrid.setImagePath("./codebase/imgs/");                         mygrid.setHeader("Sales,Book title,Author,Price");//the headers of columns          mygrid.setInitWidths("100,250,150,100");          //the widths of columns          mygrid.setColAlign("right,left,left,left");       //the alignment of columns           mygrid.setColTypes("ro,ed,ed,ed");                //the types of columns          mygrid.setColSorting("int,str,str,int");          //the sorting types           mygrid.init();      //finishes initialization and renders the grid on the page     </script>
</body>
</html>

We have defined primary settings for the grid. To learn how to configure grid accoring to your needs, read other articles in the documentation, such as:

  • General columns configuration - a brief announcement of available column settings
  • Selection - describes different types of selection (cell, row etc.) and their use
  • Sorting, Filtering - tells about built-in means for sorting and filtering
  • Skinning - shows how to set the desired skin for the grid

Step 5. Loading data

If you run the app now, you can already see a grid on the page. But it won't contain any data. To populate the grid, we will take the data from a sample data source. We will use the easiest of the ways and specify the data source as an inline object in JSON format.

To load data from an inline object, we will use the parse method.

data={
    rows:[
        { id:1, data: ["A Time to Kill", "John Grisham", "100"]},
        { id:2, data: ["Blood and Smoke", "Stephen King", "1000"]},
        { id:3, data: ["The Rainmaker", "John Grisham", "-200"]}
    ]
};
mygrid.parse(data,"json"); //takes the name and format of the data source

For more details on the topic, read article Loading data

Step 6. Database structure

Read this and further steps if you want to load data from a database instead of from an inline object.

Now, if you have decided to load data from the server - you need to create a table in your database as in:

You can execute the following code to create the table with 3 records:

-- ----------------------------
-- Table structure for books
-- ----------------------------
CREATE TABLE `books` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(11) NOT NULL,
  `author` varchar(30) NOT NULL,
  `price` varchar(11) NOT NULL,
  PRIMARY KEY (`id`)
)
-- ----------------------------
-- Records
-- ----------------------------
INSERT INTO `books` VALUES ('1', 'A Time to Kill', 'John Grisham', '100');
INSERT INTO `books` VALUES ('2', 'Blood and Smoke', 'Stephen King', '1000');
INSERT INTO `books` VALUES ('3', 'The Rainmaker', 'John Grisham', '-200');

Note, you can create any number of fields in the db and load them to the grid.

Step 7. Loading data from the server

To load data from a database, use the load method where specify a file realizing server-side 'communication' as a parameter. You may write the full server side by yourself, but we recommend to use dhtmlxConnector, as the easiest way. So, for our task you need to call the method as shown below:

//method takes the url to the file that will process CRUD operations on the server
mygrid.load("connector.php");

The server-side script for dhtmlxGrid is the following:

'connector.php' file

<?php
require_once("codebase/connector/grid_connector.php");//includes related connector file

//connects to server containing the DB named "sampledb"
$res = new PDO("mysql:dbname=sampledb;host=localhost","root","");
$conn = new GridConnector($res,"MySQL");                     //connector initialization

$conn->render_table("books","id","title,author,sales");      //data configuration

Step 8. Saving data

If you run the app now, you will see that the grid is able to load data from the database, but unable to save it back. To 'force' the grid save data in the database, use DataProcessor. It's very easy to use DataProcessor. All you need is to initialize it and attach to the grid.

var dp = new dataProcessor("data/connector.php");
dp.init(mygrid);

That's all. A standard grid that can load data from the database and save it back is ready. Now you may configure, change and customize it further to meet all your needs.

What's next
  • check samples
  • read about possible data formats and how you can get data from database
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing Grid from HTML DHTMLX Docs

Documentation
  • Initializing Grid on a Page
  • Initializing Grid from HTML
    • Initialization through the "dhtmlxGrid" CSS class
    • Configuring the grid while loading from HTML
    • Global grid settings
    • Setting the grid's size
    • Referring to the grid's object and initialization events
Start Grid Creating Grid on a Page

Initializing Grid from HTML

dhtmlxGrid can be initialized from an HTML markup. This allows you to convert an existing HTML table (with the data in it) into a DHTMLX's grid.

To convert an HTML table into a DHTMLX grid:

  1. Include the "dhtmlx.js" and "dhtmlx.css" files on the page:
    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Initializing a grid from HTML</title>
    <link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
    <script src="../codebase/dhtmlx.js"></script>
</head>
<body>
    <script>
        // here you will place your JavaScript code
        </script>
</body>
</html>
  2. Specify an HTML table:
    <table id="books_table">     <tr>
        <td>Book title</td>
        <td>Author</td>
        <td>Price</td>
    </tr>
    <tr>
        <td>A Time to Kill</td>
        <td>John Grisham</td>
        <td>12.99</td>
    </tr>
    <tr>
        <td>Blood and Smoke</td>
        <td>Stephen King</td>
        <td>10</td>
    </tr>
</table>
  3. Convert the HTML table into a DHTMLX grid with the dhtmlXGridFromTable() method:
    var grid = dhtmlXGridFromTable("books_table");
    As a parameter, the method takes the id of an HTML table.

Initialization through the "dhtmlxGrid" CSS class

The alternative way to convert an HTML table into a DHTMLX grid is to use a special CSS class with the name "dhtmlxGrid".

Note,

  • The initialization by a CSS class will work only for those tables that are on the page at the moment of loading.
  • If the page was created dynamically or loaded by some kind of AJAX, only the direct initialization method can be used.
<table id="books_table" class="dhtmlxGrid">     <tr>
        <td>Header A</td><td>Header B</td>
    </tr>
    <tr>
        <td>Data A</td><td>Data B</td>
    </tr>
    ...
</table>

Configuring the grid while loading from HTML

You can apply some attributes to define properties of the grid's columns (all of them are optional).

Note, the 1st row of the table is always used for specifying the grid's headers. There is no way to define additional lines of the header/footer in such a case (but they can be added later by JavaScript).

<table class="dhtmlxGrid">
    <tr>
        <td width="150" align="left">Book</td>
        <td type="co" sort="str">Author</td>
        <td type="edn" format="0,000.00">Price</td>
        <td>Sales</td>
    </tr>
    ...
</table>

The following configuration attributes can be specified:

  • width - the column's width in pixels (by default, the column's width in the source table is set)
  • align - the horizontal alignment in the column
  • sort - the type of sorting in the column
  • type - the type of the column's cells (i.e. the column's type)
  • format - the data format (can be used against edn/ron/dhxCalendar/dhxCalendarA column types - mimics setNumberFormat/setDateFormat functionality).

Global grid settings

Some grid modes can be enabled directly from the HTML table's attributes:

<table class="dhtmlxGrid" dragAndDrop="true">..</table> //enables drag-and-drop in grid
<table class="dhtmlxGrid" imgpath="codebase/imgs">..</table>  //sets the path to images
<table class="dhtmlxGrid" multiline="true">..</table> //enables multi-line mode in grid
<table class="dhtmlxGrid" lightnavigation="true">..</table>//light mouse navigation mode
<table class="dhtmlxGrid" split="2">..</table>             //enables the split mode
<table class="dhtmlxGrid" unevenrow="someA" evenrow="someB">..</table>
//enables the alter CSS mode (equal to enableAlterCss() method)

Setting the grid's size

By default, the grid will take the same size as the HTML table that it was created from. But you can specify the grid's size with HTML table's attributes:

<table class="dhtmlxGrid" gridWidth="600" gridHeight="400">...</table>

The 'auto' value for the grid width/height can't be set with HTML attributes and you need to use usual grid's methods (enableAutoHeight and enableAutoWidth):

var mygrid=dhtmlXGridFromTable("some_table");
mygrid.enableAutoWidth(true);
mygrid.enableAutoHeight(true);
mygrid.setSizes();

Referring to the grid's object and initialization events

In case of using table-based initialization, the grid's object is returned by the dhtmlXGridFromTable method:

var grid = dhtmlXGridFromTable("books_table");

In case of initializing by a CSS class,you can specify the global name of the grid's object through the HTML's table attribute "name".

<table class="dhtmlxGrid" name="grid">...</table>

The object becomes available only after initialization (which occurs with onLoad event).

There are 2 initialization events you can use:

  1. onbeforeinit - fires before the grid's structure and data are initialized from HTML, so you can place any global setting there.
  2. oninit - fires when grid is being rendered on the page. It's the best place for some after-init calls - row selection, some data operation, etc.
<table name="grid" class="dhtmlxGrid" onbeforeinit="myfunc1()" oninit="myfunc2()">
    ...
<script>
    function myfunc1(){
        grid.enableMultiselect(true);
    }
    function myfunc2(){
        grid.selectRow(0);
    }
</script>

Related sample: Initialization from HTML table

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading and Storing Data DHTMLX Docs

Documentation
  • dhtmlXGrid API
  • Cell-Level API
  • Creating Grid on a Page
  • Loading and Storing Data
    • Exploring Supported Data Formats
    • Loading Data into Grid
    • Loading Big Datasets
    • Saving Data on the Server Side
    • Serializing Data to XML,CSV
    • Exporting Data to PDF,Excel
    • Loading Additional Data to Grid
  • Configuring Grid
  • Managing Data in Grid
  • Styling Grid
  • Integrating with Other Components
Start Grid

Loading and Storing Data

  • Exploring Supported Data Formats
  • Loading Data into Grid
  • Loading Big Datasets
  • Saving Data on the Server Side
  • Serializing Data to XML,CSV
  • Exporting Data to PDF,Excel
  • Loading Additional Data to Grid
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Exploring Supported Data Formats DHTMLX Docs

Documentation
  • Exploring Supported Data Formats
    • XML format
    • JSON format
    • CSV format
    • JSArray format
    • Custom data format
    • Handling error response
  • Loading Data into Grid
  • Loading Big Datasets
  • Saving Data on the Server Side
  • Serializing Data to XML,CSV
  • Exporting Data to PDF,Excel
  • Loading Additional Data to Grid
Start Grid Loading and Storing Data

Exploring Supported Data Formats

dhtmlxGrid can be populated with data of 4 formats:

  • XML.
  • JSON.
  • CSV.
  • JSArray.
  • + you can define a custom data format.

Let's take a collection of books as a data source and present it in different formats.

XML format

In the XML format the data source will be presented as in:

data.xml file

<?xml version='1.0' encoding='iso-8859-1'?>
<rows>
    <row id="1">
        <cell>A Time to Kill</cell>
        <cell>John Grisham</cell>
        <cell>12.99</cell>
    </row>
    <row id="2">
        <cell>Blood and Smoke</cell>
        <cell>Stephen King</cell>
        <cell>10</cell>
    </row>
    <row id="3">
        <userdata name="lowprice"></userdata>
        <cell>The Rainmaker</cell>
        <cell>Stephen King</cell>
        <cell><![CDATA[<font color="red">7.99</font>]]></cell>
    </row>
</rows>

'index.html' file

mygrid.load("data.xml", "xml");

Please note that the row id shouldn't be set to the 0 value

Related sample: Loading from XML

Available tags

afterInit groups all command calls which will be executed after grid structure is initialized.
A command from this block will be executed even if no data structure tags (column) are defined in the header
beforeInit groups all command calls which will be executed before grid structure is initialized.
A command from this block will be executed only if full grid structure is defined in XML (column tags)
call represents the call of grid command, must be placed in afterInit or beforeInit section.

The attribute is:
  • command - name of the grid method which will be called
cell represents a cell of grid, the value of the tag will be used as the value of a cell in grid.

The attributes are:
  • class - css class which will be attached to a cell;
  • colspan - a few cells can be grouped in a rowspan, please pay attention that other cells which will be included in colspan still need to be present in XML. The support of the attribute must be enabled by API call;
  • rowspan - a few cells can be grouped in a rowspan, this feature is a mutual exclusion of a colspan (a cell can have both colspan and rowspan at the same time). Please note that a multiple rowspan will slow grid down. _rowspan.js extension is required to activate the feature;
  • style - a css style string, a value mapped to the style attribute of an HTML cell;
  • type - the type of a used cell defined per column ( setColTypes ), but each cell in grid can have independent settings, so even if you have an editable column, you can define specified cells as readonly or checkboxes or some other control, by using this attribute.
column in case of configuration from XML it represents a column of grid; the value of the tag is used as a column label

The attributes are:
  • align - horizontal align of a column (left, right, center; equal to setColAlign);
  • color - color of a column (equal to setColumnColor);
  • format - for "edn" and "calendar" excells format can be specified (equal to calling setNumberFormat or setDateFormat against the related column);
    will not affect any other column types;
  • id - each column has its ID, it makes sense when you are using movable columns and a column index isn't consistent enough. While grid API uses indexes for all operations, it provides API to convert IDs to indexes and back (getColumnId, getColIndexById);
  • sort - allows setting a sorting type (equal to setColSotring command - str,int,date). If you need to set a custom routine, just set the name of a javascript function which will be used for such a task here. (This name must have more than 4 chars);
  • type - the default column type (equal to setColTypes - ro,ed,co and etc.);
  • width - the width of column in percents or pixels, needs to be specified as a pure int, without ending px. By default is treated as width in pixels, can be switched to percents by using the "setting/colwidth" tag.
colwidth allows specifying the way of treating column width specified in "column@width".

The tag's value can be:
  • px - width will be set as pixels (default value, tag may be skipped in such a case);
  • % - width will be set as percents.
head | an optional tag used for grouping configuration tags (necessary only if you want to define configuration in XML); no attributes are supported
option allows defining a list of options for excell which can work with such a conception (co, coro, clist, in theory any custom excell which has an inner combo property). The content of the tag is used as an option's label. The "value" attribute is mandatory.

The attribute is:
  • value - a value for the related option inside of combobox
param | represents a parameter of the method's call, there must be as many param tags as necessary
row the tag represents a row of grid, one tag for each row

The attributes are:
  • bgColor - the color of a row, it is highly recommended to use this parameter to set color of row (all other ways will override the colors' selection);
  • class - the name of the css class which will be attached to row;
  • id - a unique identificator, a combination of chars/numbers. It shouldn't be set to 0;
  • locked - a row will be locked - switched to the read-only state, can be reverted by JS API;
  • selected - after data loading, a row will be pre-selected;
  • call - makes sense only with the enabled "selected" attribute, if both attributes set to true - a row will be selected and the onSelectRow event will be called;
  • style - a string with css definitions which will be set as a style attribute of the related row.
rows just the top xml tag, has no special meaning

The attributes are:
  • pos - in case of dynamic smart rendering XML is fetched from server by chunks, the "pos" attribute shows in which place of grid the data from incoming XML must be inserted.
    In most cases (the exceptions are pretty specific) this value will be equal to the url parameter "posStart" (which is automatically added to all calls in SRND mode).
    The attribute makes sense only in SRND mode and will be ignored in any other one;
  • total - both dynamic paging and dynamic rendering modes require specifying the maximum expected count of rows (paging can work without such a limit, but it will not show all available pages from the start in such a case).
    As the hardcoding count or rows in javascript code is rare possible, it can be specified directly in XML.
    If the value is skipped in SRND mode, the total count is set to the size of incoming XML (basically, the dynamic smart rendering switches to the static smart rendering).
    If the value is skipped in paging mode, the grid will request additional data from server until an empty XML set is returned.
    The attribute makes no sense in non-dynamic modes.
settings | groups a grid's configuration settings, has no individual meaning
splitat | executes the splitAt command in the required position, functionality is kind of deprecated, and it's recommended to use afterInit/call to initiate splitting
userdata to store some additional data which doesn't need to be displayed, but may be useful for some client-side operations, userdata sections can be used.

The attribute is:
  • name - as there may be many userdata tags per row/grid, they differ by the name attribute. The value of the name attribute is used on the client side to get the related value

Additional XML formats

There are also 2 additional XML formats that are based on columns' ids:

  1. "xmlA"
  2. "xmlB"

To use "xmla", "xmlb" formats you need to include the "ext/dhtxmlgrid_data.js" file on the page.

Both formats can be customized in the same manner as the default XML format.

xmlA format

grid.setColumnIds("first,second,third");
grid.load(url,"xmlA");
<rows>
    <row id="some1" first="11" second="12" third="13" />
    <row id="some2" first="21" second="22" third="23" />
    <row id="some3" first="31" second="32" third="33" />
</rows>

If the user uses MSSQL, he can use SELECT * FROM Some FOR XML AUTO to get data exactly in the necessary format.

xmlB format

grid.setColumnIds("first,second,third");
grid.load(url,"xmlB");
<rows>
    <row id="some1"><first>11</first><second>12</second><third>13</third></row>
    <row id="some2"><first>21</first><second>22</second><third>23</third></row>
    <row id="some3"><first>31</first><second>32</second><third>33</third></row>
</rows>

Related sample: Different XML formats

JSON format

There are 2 JSON formats you can use for specifying data for dhtmlxGrid

  • Basic (dhtmlxGrid-oriented) JSON format.
  • Native JSON format.

Basic JSON format

The basic dhtmlxGrid-oriented JSON format allows you to:

  • specify data of the grid
  • set additional configuration parameters
{
    rows:[
        { id:1, data: ["A Time to Kill", "John Grisham", "100"]},
        { id:2, data: ["Blood and Smoke", "Stephen King", "1000"]},
        { id:3, data: ["The Rainmaker", "John Grisham", "-200"]}
    ]
};

Please note that the row id shouldn't be set to the 0 value

Related sample: Loading from JSON

Row-related settings

  1. id - (string|number) the row's id. Note, that is shouldn't be set to 0.
  2. bgColor - (string) the row's color. It's strongly recommended to use this property to set the row's color (all other ways will override selection colors)
  3. class - (string) the name of a CSS class that will be applied to the row
  4. style - (string) a string with CSS definitions which will be set as the 'style' attribute of the row
  5. locked - (boolean) specifies whether the row should be read-only (true) or editable (false)
  6. selected -(boolean) selects the row initially
  7. call -(boolean) makes sense only with the "selected" property enabled. If both properties set to true - the row will be selected and the onRowSelect event will be called
  8. userdata - (object) key-value pairs of row's userdata

In Native JSON format attributes of the extended dhtmlxGrid-oriented JSON format, such as 'style', 'selected' are not available.

{
    rows:[
       {  id:1,
          selected:true,
          bgColor: "red",
          userdata:{"priority":"normal"},        // sets the row userdata
          data:[
            "A Time to Kill",
            "John Grisham",
            {"value":"100","type":"ed"}          // changes the cell type
          ]
       },
       {  id:2,
          style:"font-weight:bold;",
          userdata:{"priority":"High","hotdeal":"yes"}, // sets the row userdata
          data:[
            "Blood and Smoke",
            "Stephen King",
            "1000"/
          ]
       }
]}

Native JSON format

Using the native JSON format you can set just row values and that's it.
Attributes of the extended dhtmlxGrid-oriented JSON format, such as 'style', 'selected', are not available.

{
    "total_count":50000, "pos":0, "data":[
        {
            "col1": "A Time to Kill",
            "col2": "John Grisham",
            "col3": "100"
        },
        {
            "col1": "Blood and Smoke",
            "col2": "Stephen King",
            "col3": "1000"
        },
        {
            "col1": "The Rainmaker",
            "col2": "John Grisham",
            "col3": "-200"
        }
    ]
};

where 'col1', 'col2', 'col3' are colums ids set with the setColumnIds method:

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setColumnIds("col1,col2,col3");

Note, to set the standard JSON format for data call the method load with the value 'js' as the second parameter:

myGrid.load(url,"js");

Dynamic loading

Available properties:

  1. total_count - sets the maximum number of rows retrieved from the server. Used in the dynamic "Paging" and dynamic "Smart Rendering" modes only.
    • If ommited in the "Smart Rendering" mode - the total number of rows is set to the size of the incoming data and "Smart Rendering" is switched from the dynamic to the static mode.
    • If ommited in the "Paging" mode - paging will work but won't show all available pages from the start. Also, the grid will request additional data from the server until gets an empty data set.
  2. pos - in case of dynamic "Smart Rendering", data is fetched from the server by chunks and the "pos" attribute shows which place of the grid the incoming data must be inserted in. Used in the dynamic "Smart Rendering" mode only
  3. userdata - (object) key-value pairs of grid's userdata
{
    total_count:50000,
    pos:0,
    rows:[
        { id:1, data: ["A Time to Kill", "John Grisham", "100"]},
        { id:2, data: ["Blood and Smoke", "Stephen King", "1000"]},
        { id:3, data: ["The Rainmaker", "John Grisham", "-200"]}
    ]
]}

Related sample: Configuration from JSON - Common JSON

CSV format

var  csvstr="A Time to Kill,John Grisham,100"
            +"\nBlood and Smoke,Stephen King,1000"
            +"\nThe Rainmaker,John Grisham,-200";
grid.parse(csvstr,"csv");

Setting row/cell delimiter

By default, dhtmlxGrid uses:

  • \n - as the row delimiter.
  • , - as the cell delimiter.

You can set your custom delimiters using the csv.row and csv.cell properties:

grid.csv.row = "your custom row delimiter";
grid.csv.cell = "your custom cell delimiter";

Note, for backward compatibility you can also use the setCSVDelimiter() method.

Related sample: Import/export from/to CSV

JSArray format

In the JSArray format, the data source will be presented as in:

var data = [
    ["A Time to Kill","John Grisham","100"],
    ["Blood and Smoke", "Stephen King", "1000"],
    ["The Rainmaker","John Grisham","-200"]
];

Related sample: Loading from JS array

Custom data format

Generally, to create a custom data format you need to:

  1. Set the name for the new format.
  2. Define the row-level parser.
  3. Define the cell-level parser.

Let's assume, you have data specified as in:

"data.xml" file

<data>
    <item name="my item A">
        <size>15</size>
        <mode step="2" online="off">active</mode>
    </item>
    <item name="my item B">
        <size>15</size>
        <mode step="2" online="on">active</mode>
    </item>
</data>

The format of this data doesn't fit the predefined grid's formats. As a possible solution, you can add XSLT transformation that will convert data to the format acceptable by the grid, but if you have a big dataset -
creating a custom data format is a much more preffered way.

Step 1. Choose a name for your custom data format

The names "xml","xmla","xmlb", "json","js", "jsarray","csv" are already taken, so any other name is valid. For example, you can use "custom_xml" as the name for your new data format.

Step 2. Defining the row-level parser

To specify a new data format you will need to use 3 methods:

  1. grid.process[formatName] - the row parser function. Processes the incoming stream of data and separates it in rows.
  2. grid.process[formatName]_row - the cell parser method. Takes the data related to rows and processes it.
  3. grid.get[formatName]_data - the data locator method. Provides the way to locate the value of a column inside a data row. The method is required only if you are planning to use the smart rendering mode (it locates the data inside unparsed chunks). In other cases, the method shouldn't be used.

The row parser function must separate incoming data in rows and assign IDs to them. As our data source is XML, we will use XPath to parse it into rows:

grid._process_custom_xml=function(xml){
    this._parsing=true;
    var rows = xml.doXPath("//item");       //gets all row elements from XML
    for (var i = 0; i < rows.length; i++){
        var id = this.getUID();      //XML has no native ids,so custom ids are generated
        this.rowsBuffer[i]={                //stores references to each row element
            idd: id,
            data: rows[i],
            _parser: this._process_custom_xml_row, //cell parser method
            _locator: this._get_custom_xml_data    //data locator method
        };

        this.rowsAr[id]=rows[i];             //stores id reference
    }
    this.render_dataset();            //forces update of grid's view after data loading
    this._parsing=false;
};

Step 3. Define cell-level parser

The cell parser must take the data for each column of the grid from the row related XML. Before starting to implement cell parser, you need to specify what data will be mapped for which column.

grid._process_custom_xml_row=function(r, xml){
    var size = this.xmlLoader.doXPath("./size", xml)[0]; //gets size sub-tag
    var mode = this.xmlLoader.doXPath("./mode", xml)[0]; //gets mode sub-tag
    var strAr = [
        xml.getAttribute("name"),
        size.firstChild.data,
        mode.firstChild.data,
        mode.getAttribute("online")
    ];
    //sets just a plain array as no custom attributes are needed
    r._attrs={};
    for (j=0; j < r.childNodes.length; j++) r.childNodes[j]._attrs={};

    //finishes data loading
    this._fillRow(r, strAr);
    return r;
}

That's all. Now you can load data in the custom format as in:

grid.load("data.xml","custom_xml");

Handling error response

Starting from version 4.1, to handle error response from server, use the onLoadXMLError event instead of the dhtmlxError.catchError.

window.dhx.attachEvent("onLoadXMLError", function(request object){
    // your code here
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading Data into Grid DHTMLX Docs

Documentation
  • Exploring Supported Data Formats
  • Loading Data into Grid
    • Loading from an inline dataset
    • Loading from a static file
    • Loading from the server side
  • Loading Big Datasets
  • Saving Data on the Server Side
  • Serializing Data to XML,CSV
  • Exporting Data to PDF,Excel
  • Loading Additional Data to Grid
Start Grid Loading and Storing Data

Loading Data into Grid

You can load data of 4 formats into dhtmlxGrid:

  • XML.
  • JSON.
  • CSV.
  • JSArray.
  • + you can define a custom data format.

Learn more about formats supported by dhtmlxGrid in article Exploring Supported Data Formats.

Loading from an inline dataset

The easiest way to load data to a grid is to use an inline object in JSON format.
To load data from an inline object, use the parse method.

data={
    rows:[
        { id:1, data: ["A Time to Kill", "John Grisham", "100"]},
        { id:2, data: ["Blood and Smoke", "Stephen King", "1000"]},
        { id:3, data: ["The Rainmaker", "John Grisham", "-200"]}
    ]
};
mygrid.parse(data,"json"); // takes the name and format of the data source

Related sample: Loading from JSON

Loading from a static file

If you put data into a individual file, use the load method to load data from this file to the grid:

mygrid.load("data/books.json","json");
//or
mygrid.load("data/books.json",function(){alert("Data has been loaded.")},"json");

The load method can take 3 parameters:

  1. The relative path to the data file (relative according to your HTML file).
  2. A callback function that will be called just after the data is completely loaded and processed. The parameter is optional and can be omitted.
  3. The format of data to load. By default, "xml". Available values: "xml", "json", "js", "jsarray", "csv".

Related sample: Loading from JSON

Loading from the server side

To load data from the server, use the load method on the client side (as a parameter, the method takes the path to the server-side script):

//method takes the URL to the file that will process CRUD operations on the server
mygrid.load("data.php");

For example, for the data source described above, you need to create a table in your database as in:

You can execute the following code to create the table:

CREATE TABLE `events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `author` varchar(255) NULL,
  `sales` int(11) NOT NULL,
  PRIMARY KEY (`id`)
)

Note, you can create any number of fields in the db and load them to the grid.

Using dhtmlxConnector as a server-side solution

To implement server-side logic for dhtmlxGrid, we recommend you to use dhtmlxConnector library as the easiest way. You can learn more about the library from the related chapter of the documentation.

The server-side script in case of using dhtmlxConnector will look something like this:

Using dhtmlxConnector for implementing server-side logic

//"connector.php" file
<?php
require_once("codebase/connector/grid_connector.php"); // includes the connector file

// connects to a server with a desired DB (named "sampledb")
$res = new PDO("mysql:dbname=sampledb;host=localhost","root","");
$conn = new GridConnector($res,"MySQL");                // connector initialization

$conn->render_table("books","id","title,author,sales"); // data configuration

and on the client-side:

//"index.html" file
mygrid.load("connector.php");

All available samples of the dhtmlxGrid +connector you can find in the dhtmlxConnector package which can be downloaded here.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading Big Datasets DHTMLX Docs

Documentation
  • Exploring Supported Data Formats
  • Loading Data into Grid
  • Loading Big Datasets
    • Smart Rendering
    • Paging
    • Dynamic Loading
  • Saving Data on the Server Side
  • Serializing Data to XML,CSV
  • Exporting Data to PDF,Excel
  • Loading Additional Data to Grid
Start Grid Loading and Storing Data

Loading Big Datasets

Smart Rendering

The first thing you need to try if your grid loads too slow - to enable the "Smart Rendering" mode. In most cases any other changes won't be required.

To enable the "Smart Rendering" mode, call the enableSmartRendering method:

mygrid.enableSmartRendering(true); // false to disable

The mode works fine for datasets with less than 10k of rows.

In most cases, no other changes will be required. Read more on "Smart Rendering" mode here.

Static smart rendering mode is compatible with nearly any other functionality of grid except for rowspans and grouping functionality.

Related sample: Smart Rendering (static)

Paging

If you don't like the live-scroll behavior, you can try to use the "Paging" mode which provides the same loading time boost.

The mode works fine for datasets with less than 10k of rows. Read more details on the "Paging" mode here.

Related sample: Paginal Output

Dynamic Smart Rendering or Paging

If the amount of rows is even bigger, you can try to use the dynamic mode. In such a mode data will be loaded from server by parts, which allows fast initialization.

You can read more details here.

Distributed Parsing

To decrease time before the grid appears on page, the user can enable Distributed Parsing. In this case, the grid will be shown right after the first portion of data is parsed, although it continues parsing other portions in async mode. By changing the number of records per portion and delay (in milliseconds), the user can change the speed of loading.

mygrid.enableDistributedParsing(mode,count,time);

The parameters of the method are:

  • mode (true/false) - enable or disable distributed parsing;
  • count - the count of nodes parsed at one step (10 by default);
  • time - the time between parsing counts in milliseconds (the 250 by default).

Related sample: Distributed parsing

"FAST" Mode

The "FAST" mode enables completing grid's operations much faster because of skipping the rendering stage for each operation and moving it to the end of chain. The following methods should be used:

grid.startFastOperations();  //starts "FAST" mode

//make grid operations between start and stop commands

grid.stopFastOperations();//stops "FAST" mode(all events skipped between start and stop)

Related sample: Fast row adding

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Smart Rendering DHTMLX Docs

Documentation
  • Smart Rendering
  • Paging
  • Dynamic Loading
Start Grid Loading and Storing Data Loading Big Datasets

Smart Rendering

Smart Rendering is a basic technique to load and render data on demand. This way must be used when you are dealing with big datasets to increase the performance speed of the app. As soon as you start to notice that the grid slows down, move from general loading to Smart Rendering.

The stated functionality requires PRO version of the dhtmlxGrid (or DHTMLX Suite) package and doesn't work with the Paging mode enabled.

To enable and configure the "Smart Rendering" mode, call the enableSmartRendering method:

mygrid.enableSmartRendering(true);

Related sample: Smart Rendering with dynamic loading and buffering

The parameters here are:

  • mode(true/false) - enable/disable smart rendering;
  • buffer - the count of rows requested from the server by single operation, optional parameter; makes sense only in dynamical loading mode.

Smart Rendering mode increases the overall grid performance working with big amounts of data by saving time for the render operation that is the most time-consuming one in dhtmlx. When this mode is activated, only those rows that are in the visible area are rendered. The user can apply it for the already loaded content or activate dynamical loading to fetch rows from the server each time (or activate buffering additionally to decrease the number of server requests).

To pre-render rows during the scrolling, use the enablePreRendering method:

mygrid.enablePreRendering(50); // 50 - a number of rows that will be prerendered

To enable the dynamic "Smart Rendering" mode, you need to specify the "posStart" and "count" URL parameters for the data:

  • posStart - starting position of the row in the dataset to start output with. For example, the user has 1000 records in the dataset and got posStart=200. This means that first 199 rows will be ignored and start XML with 200th row of the dataset;
  • count - the number of rows is expected in the output (the user can change it with the second parameter of script method). So, if count=100, then the output should contain 100 rows starting from the one specified with posStart.

XML also should contain two additional parameters within the <rows> tag:

  • total_count - the number of records in the dataset (in total);
  • pos - the start position of the first row in XML in the dataset (generally, it is the same as the incoming posStart parameter).

In case you've modified grid row height (for example by updating css or by setting a specific style for rows), you need to let the grid know the new height using the following command:

mygrid.setAwaitedRowHeight(25);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Paging DHTMLX Docs

Documentation
  • Smart Rendering
  • Paging
    • Setting the page
    • Skins
    • Internationalization
    • Customizing the default skin
    • Customizing the 'bricks' skin
    • Customizing the 'toolbar' skin
    • Creating a custom skin
    • Integrating a paged grid with DHTMLX containers
  • Dynamic Loading
Start Grid Loading and Storing Data Loading Big Datasets

Available only in PRO Edition

Paging

The stated functionality requires PRO version of the dhtmlxGrid (or DHTMLX Suite) package and doesn't work with the Smart Rendering mode enabled.

dhtmlxGrid supports paging through the items in the data source.

You enable and configure paging with the enablePaging() method.

mygrid = new dhtmlXGridObject("gridbox");
mygrid.enablePaging(true,15,5,"pagingbox",true,"recInfoArea");

mygrid.init();

The parameters are:

  • mode - (boolean) enable/disable paging mode
  • pageSize - (number) count of rows per page
  • pagesInGrp - (number) count of visible page selectors
  • pagingControlsContainer - (string,number) ID or container which will be used for showing paging controls
  • showRecInfo - (boolean) enable/disable showing of additional info about paging state
  • pagingStateContainer - (string,number) ID or container which will be used for showing paging state

Setting the page

To make the desired page active, call the method changePage():

mygrid.changePage(pageNum);//numbering starts at 1

You can also use the changePageRelative(ind) method to 'open' the desired page. As a parameter the method takes relative shifting (in pages) from the currently active page.

mygrid.changePageRelative(-1);

Skins

The library provides 3 skins for paging:

  • default;
  • bricks;
  • toolbar.

Default skin

mygrid.enablePaging(true,15,5,"pagingArea",true,"recInfoArea");
mygrid.init();

'Bricks'

<script>
    ...
    mygrid.enablePaging(true,15,5,"pagingbox",true);
    mygrid.setPagingSkin("bricks");
    mygrid.init();
</script>

'Toolbar'

<script>
    ...
    mygrid.enablePaging(true,15,5,"pagingbox",true);
    mygrid.setPagingSkin("toolbar", "dhx_skyblue");
    mygrid.init();
</script>

Internationalization

To localize the paging bar into some language, you should use the property i18n.paging.
The set locale is applied to all skins.

...
mygrid.i18n.paging={
      results:"Results",
      records:"Records from ",
      to:" to ",
      page:"Page ",
      perpage:"rows per page",
      first:"To first Page",
      previous:"Previous Page",
      found:"Found records",
      next:"Next Page",
      last:"To last Page",
      of:" of ",
      notfound:"No Records Found"
};
mygrid.enablePaging(true,15,5,"pagingbox",true);
mygrid.setPagingSkin("bricks");
mygrid.init();

Customizing the default skin

The default skin creates 2 information lines:

  • a line with info about the current state of paging;
  • a line with navigation controls.

Both lines can be configured through templates:

mygrid.setPagingTemplates(navigation_template,info_template);

The default definitions of the lines templates are shown below:

//navigation_template
[prevpages:<: ] [currentpages:, ] [nextpages:>: ]

//info_template
Results <b>[from]-[to]</b> of <b>[total]</b>

In templates you can use the following markers:

  • [from] - the index of the first row in the grid;
  • [to] - the index of the last row in the grid;
  • [total] - the total count of rows in the grid;
  • [current] - a link to the current page (or next / prev - the relative position can be used);
  • [prevpages] - a link to the previous set of pages;
  • [nextpages] - a link to the next set of pages;
  • [currentpages] - renders the current set of pages.

Any of the markers allows you to specify text for it as: [marker:text_in_normal_state:text_in_disabled_state]

[prevpages:<:No Previous Pages]

You can use any combination of markers and static text/HTML inside the templates:

...
mygrid.enablePaging(true,15,5,"pagingbox",true);
mygrid.init();
mygrid.setPagingTemplates("Pages - [current:0]
     [current:+1] [current:+2] , from [total] rows","");

Customizing the 'bricks' skin

The user can adjust the necessary class in order to change the look and feel of controls:

  • .dhx_pbox - a border line around navigation controls;
  • .dhx_pline - an area with page buttons;
  • .dhx_page - a navigation button;
  • .dhx_pager_info - an area with information about the current position inside paging;
  • .dhx_page_active - an active page button.

There are also different styles for different grid skins:

  • .dhx_pbox_skyblue - default skin;
  • .dhx_pbox_web - web skin;
  • .dhx_pbox_terrace - terrace skin;
  • etc.

Customizing the 'toolbar' skin

The toolbar skin is based on dhtmlxToolbar. To get the toolbar object you should use the aToolBar property. Note, the property is available only after all rows are loaded.

mygrid.load(url,function(){
   var myToolbar=grid.aToolBar;
});

Now you can apply to the myToolbar object any of the dhtmlxToolbar methods.

In addition to that, the users can also configure which buttons (among the default ones) they expect to see in the toolbar:

mygrid.setPagingWTMode(navButtons,navLabel,pageSelect,perPageSelect);

Each of the above mentioned parameters can be set either to true or false:

  • navButtons - the first, prev, next, last buttons;
  • navLabel - the label with information about the currently shown pages;
  • pageSelect - the selectbox that allows choosing the current page;
  • perPageSelect - the selectbox that allows choosing the count of rows per page.

The user can change the style of the "tooblar" paging skin using the 2nd parameter of the setPagingSkin() method:

mygrid.setPagingSkin("toolbar","dhx_terrace");

Creating a custom skin

If none of the built-in skins meets your needs, you can easily create a custom one. Basically, some custom code can be attached to events of the grid, but paging provides more simple way to define custom skins. Just define a grid method with the name:

mygrid._pgn_[NAME]

And call the following method:

mygrid.setSkin("[NAME]");

As a result, this new grid method will be called each time when some paging information is changed and needs to be updated.

For example, creating a group of paging controls like this:

<input type="button" value="Previous">
<span>Current page: NN</span>
<input type="button" value="Next">

This can be done in the following way:

mygrid._pgn_custom=function(page,start,end){
    /* page - the current page
        start - the first visible row
        last - the last visible row */
    var html='<input type="button" value="Previos"><span>Current page: '+page
      +'</span><input type="button" value="Next">';
    mygrid._pgn_parentObj.innerHTML=html;
    mygrid._pgn_parentObj.childNodes[0].onclick=function() { // the previous button logic
    mygrid.changePageRelative(-1);
    }
    mygrid._pgn_parentObj.childNodes[2].onclick=function() { // the next button logic
    mygrid.changePageRelative(1);
    }
}
mygrid.setPagingSkin("custom");

Integrating a paged grid with DHTMLX containers

It's possible to add paging in Status Bar of the container components.

For example, let's assume that you already have an initialized component with a cell.

First, you should attach Status Bar. For this purpose, you have to set the paging param to true:

var pagingId = "pagingArea_"+window.dhx.newId();
cell.attachStatusBar({
    text: "<div id='"+pagingId+"'></div>",
    paging: true
});

Then you need to enable paging in the grid:

var myGrid = cell.attachGrid();
// more config here if needed
myGrid.enablePaging(true, 9, 3, pagingId);
myGrid.setPagingSkin("toolbar");

You can have a look at the related samples by this link.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Dynamic Loading DHTMLX Docs

Documentation
  • Smart Rendering
  • Paging
  • Dynamic Loading
    • Setting the Task
    • Smart Rendering Options in Grid
    • Step 1. Include Script and CSS Files
    • Step 2. Initialize Grid with Smart Rendering
    • Step 3. Load Data. Server-side Support for Smart Rendering
    • Step 4. Filter data. Pass extra parameters to the server
    • Step 5. Sort data
Start Grid Loading and Storing Data Loading Big Datasets

Dynamic Loading

Keeping thousands of records in the grid is a common requirement for most business applications. These records can be goods, names of employees, invoices, etc.

This step-by-step tutorial will let you load 50,000 records into your grid and still have it working fast.

Setting the Task

Firstly, let's outline a problem.

For example, you load a dataset with 10,000 records. Let's make some calculations. It takes a second to load this dataset from the server to your browser, half a second to convert it to the grid internal format, and 0.01 second to draw each row in the grid (all these figures are approximate, but you get the idea, we hope). The result of our calculation is 1+0.5+0.01*10000 = 101,5 seconds - more than a minute.

But why do you need to wait for 10,000 records to be rendered? We think that you don't! You just need the first 100 rows to start working with as this is the number of rows that is visible in the grid's frame.

So we added some ingenious code to the grid and called this new possibility "Smart Rendering", as our grid now needs to be smart enough to know which records to render and which of them should be put off.

Smart Rendering Options in Grid

There are 2 variants of Smart Rendering in dhtmlxGrid:

  1. You just turn Smart Rendering on and load the entire dataset with the load method. This way is easy and doesn't require any server side support but... (as there are always some "buts"). If you load 100,000 records at once, they will take some memory of your computer. Not a big deal, but still it can affect the performance. What is more, this variant is available only for Grid Professional Edition users.
  2. You put the dataset into your browser by portions (dynamic loading). Grid will tell you what portion it needs (start and end record index).

Thus, for the first variant the format of XML remains the same as in a common grid, and it generally can be a static XML file:

<rows>
    <row id="xx">
        <cell>
        ...
        </cell>
    </row>
</rows>

For the variant with dynamic loading it gets 2 additional parameters: total_count, pos and (as far as we should process some incoming arguments) needs to be created dynamically with some server side programming language:

<rows total_count="x" pos="y">
    <row id="xx">
        <cell>
        ...
        </cell>
    </row>
</rows>

Thus, this tutorial is not just about JavaScript, but also about server side a little bit. We'll show you the server-side code for PHP, JSP, ColdFusion. But let's do everything in its turn. By the way, if some of the readers can send us the necessary code for some other languages/technologies, we'll definitely put it here and will be very grateful to the author.

Step 1. Include Script and CSS Files

Once again we start with including external JavaScript and CSS files into the page.

<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
<script src="codebase/dhtmlx.js"></script>
<script>
var gridQString = "";//we'll save here last url with query string we used for loading grid
    //we'll use this script block for functions
    //(see step 5 for details)
</script>

Step 2. Initialize Grid with Smart Rendering

Depending on the data structure you'll need a grid with different columns set. In our example, we have 4 columns in the database table: unique ID (id), some name (nm), related alphanumeric code (code) and numeric value (num_val).

This is an abstract sample, but we can think about those names as the names of some pharmaceuticals. The codes will be their internal product codes, and numeric values will be the prices. So the initialization code for such kind of a grid will be as follows:

<div id="products_grid" style="width:500px;height:200px;"></div>
var mygrid = new dhtmlXGridObject('products_grid');
mygrid.setImagePath("codebase/imgs/");
mygrid.setHeader("Product Name,Internal Code,Price");
mygrid.setInitWidths("*,150,150");
mygrid.setColAlign("left,left,right");
mygrid.setSkin("modern");
mygrid.init();
mygrid.enableSmartRendering(true);

As you probably remember from the previous chapter, we used body "onload" event to call grid initialization function. The above mentioned code is another case, as it calls script methods on the page, placing them after the DIV container we want to place our grid into. The goal here is the same: to call the grid constructor after the DIV container was initialized.

So what is new in this script? A new line of code was added to enable the Smart Rendering mode. As you can see, it is quite simple: just one command and you are ready to load thousands of records. It's very simple, indeed.

So here is what we have now:

Step 3. Load Data. Server-side Support for Smart Rendering

As you already know from the introduction, there are two variants of Smart Rendering in dhtmlxGrid. We'll concentrate on the more complex one, which allows you working with much bigger datasets - Smart Rendering with Dynamic Loading.

Below there are samples of server side code for creating an output XML based on incoming arguments and MySQL database for 4 most popular technologies. Load your variant of file with the following command (put it into script block right after mygrid.enableSmartRendering):

gridQString = "getGridRecords.php"; // save query string to global variable (see step 5)
mygrid.load(gridQString );

By sending the request to the URL you specify in the load() method, grid adds two properties:

  • posStart - the starting record position in the dataset (if this property was skipped, the load() method returns records starting from the beginning of the dataset);
  • count - the number of records to be returned with response.

Thus GET request which comes to the server will look like this: getGridRecords.php?posStart=199&count=100.

Sample of Server-Side Code. PHP

    <?php
        //set content type and xml tag
        header("Content-type:text/xml");
        print("<?xml version="1.0"?>");

        //define variables from incoming values
        if(isset($_GET["posStart"]))
            $posStart = $_GET['posStart'];
        else
            $posStart = 0;
        if(isset($_GET["count"]))
            $count = $_GET['count'];
        else
            $count = 100;

        //connect to database
        $db = new PDO("mysql:dbname=sampleDB;host=localhost","root","user","pwd");

        //create query to products table
        $sql = "SELECT  * FROM products";

        //if this is the first query - get total number of records in the query result
        if($posStart==0){
            $sqlCount = "Select count(*) as cnt from ($sql) as tbl";
            $resCount = $db->query($sqlCount);
            $rowCount = $resCount->fetch();
            $totalCount = $rowCount["cnt"];
        }

        //add limits to query to get only rows necessary for the output
        $sql.= " LIMIT ".$posStart.",".$count;

        //query database to retrieve necessary block of data
        $res = $db->query($sql);

        //output data in XML format
        print("<rows total_count='".$totalCount."' pos='".$posStart."'>");
        while($row=$res->fetch()){
            print("<row id='".$row['id']."'>");
                print("<cell>");
                    print($row['nm']);  //value for product name
                print("</cell>");
                print("<cell>");
                    print($row['code']);  //value for internal code
                print("</cell>");
                print("<cell>");
                    print($row['num_val']);    //value for price
                print("</cell>");
             print("</row>");
        }
        print("</rows>");
    ?>

The sample code was simplified to concentrate you on the main commands. Some necessary error handlers, etc. were omitted.

Sample of Server Side Code. JSP.

  <%@ page import = "java.sql.*" %>
  <%
      String db_ipp_addr = "localhost";
      String db_username = "root";
      String db_password = "1";
      String db_name = "sampleDB";

      // set content type and xml tag
      response.setContentType("text/xml");
      out.println("<?xml version="1.0" encoding="UTF-8"?>");

      // define variables from incoming values
      String posStart = "";
      if (request.getParameter("posStart") != null){
          posStart = request.getParameter("posStart");
      }else{
          posStart = "0";
      }

      String count = "";
      if (request.getParameter("count") != null){
          count = request.getParameter("count");
      }else{
          count = "100";
      }

      // connect to database
      Connection connection = null;
      Statement statement = null;
      ResultSet rs = null;
      String connectionURL = "jdbc:mysql://" + db_ipp_addr + ":3306/" + db_name;

      Class.forName("com.mysql.jdbc.Driver").newInstance();
      connection = DriverManager.getConnection(connectionURL,db_username,db_password);

      // query to products table
      String sql = "SELECT  * FROM products";

      // if this is the first query - get total number of records in the query result
      String totalCount = "";
      if (posStart.equals("0")){
          String sqlCount = "Select count(*) as cnt from (" + sql + ") as tbl";
          statement = connection.createStatement();
          rs = statement.executeQuery(sqlCount);
          rs.next();
          totalCount = rs.getString("cnt");
          rs.close();
      } else {
          totalCount = "";
      }

      // add limits to query to get only rows necessary for output
      sql += " LIMIT " + posStart + "," + count;

      // Execute the query
      statement = connection.createStatement();
      rs = statement.executeQuery(sql);

      // output data in XML format
      out.println("<rows total_count='" + totalCount + "' pos='" + posStart + "'>");
      while (rs.next()) {
          out.println("<row id='" + rs.getString("id") + "'>");
              out.println("<cell>");
                  out.println(rs.getString("nm"));  // value for product name
              out.println("</cell>");
              out.println("<cell>");
                  out.println(rs.getString("code")); // value for internal code
              out.println("</cell>");
              out.println("<cell>");
                  out.println(rs.getString("num_val"));   // value for price
              out.println("</cell>");
          out.println("</row>");
      }
      out.write("</rows>");
      rs.close();
  %>

Sample of Server Side Code. ASP

  <%@ LANGUAGE = VBScript %>
  <% option explicit %>

  <%
      Dim db_ipp_addr, db_username, db_password, db_name
      db_ipp_addr = "localhost"
      db_username = "root"
      db_password = "1"
      db_name = "sampleDB"

      ' set content type and xml tag
      Response.ContentType = "text/xml"
      Response.write("<?xml version=""1.0"" encoding=""UTF-8""?>")

      ' define variables from incoming values
      Dim posStart, count
      If not isEmpty(Request.QueryString("posStart")) Then
          posStart = Request.QueryString("posStart")
      Else
          posStart = 0
      End If

      If not isEmpty(Request.QueryString("count")) Then
          count = Request.QueryString("count")
      Else
          count = 100
      End If

      ' connect to database
      Dim objConnection, rs, connString, sql
      Set objConnection = Server.CreateObject("ADODB.Connection")
      Set rs = Server.CreateObject("ADODB.Recordset")
      connString = "DRIVERMySQL ODBC 3.51 Driver};
        SERVER=" &amp; db_ipp_addr &amp; ";
        DATABASE=" &amp; db_name &amp; ";
        UID=" &amp; db_username &amp; ";
        PWD=" &amp; db_password
      objConnection.Open connString

      ' query to products table
      sql = "SELECT  * FROM products"

      ' if this is the first query - get total number of records in the query result
      Dim sqlCount, totalCount
      If posStart = 0 Then
          sqlCount = "Select count(*) as cnt from (" &amp; sql &amp; ") as tbl"
          rs.Open sqlCount, objConnection
          totalCount = rs("cnt")
          rs.Close
      Else
          totalCount = ""
      End If

      ' add limits to query to get only rows necessary for output
      sql = sql &amp; " LIMIT " &amp; posStart &amp; "," &amp; count

      ' Execute the query
      rs.Open sql, objConnection

      ' output data in XML format
      Response.write("<rows total_count='" &amp; totalCount &amp; "'
                            pos='" &amp; posStart &amp; "'>")
      Do while not rs.EOF
          Response.write("<row id='" &amp; rs("id") &amp; "'>")
              Response.write("<cell>")
                  Response.write(rs("nm"))  ' value for product name
              Response.write("</cell>")
              Response.write("<cell>")
                  Response.write(rs("code"))  ' value for internal code
              Response.write("</cell>")
              Response.write("<cell>")
                  Response.write(rs("num_val"))    ' value for price
              Response.write("</cell>")
          Response.write("</row>")
          rs.MoveNext
      Loop
      Response.write("</rows>")
      rs.Close
      Set rs = Nothing
      objConnection.Close
      Set objConnection = Nothing
  %>

Sample of Server Side Code. Cold Fusion.

  <cfset dsn = "sampleDB">
  <cfsetting  enablecfoutputonly="yes">

  <!--- set content type and xml tag --->
  <cfcontent reset="yes" type="text/xml; charset=UTF-8">
    <cfoutput><?xml version="1.0"?></cfoutput>

      <!---    define variables from incoming values --->
      <cfif isDefined("url.posStart")>
          <cfset posStart = url.posStart>
      <cfelse>
          <cfset posStart = 0>
      </cfif>

      <cfif isDefined("url.count")>
          <cfset count = url.count>
      <cfelse>
          <cfset count = 100>
      </cfif>

    <!--- if it's the first query, get total number of records in the query result --->
      <cfif posStart eq 0>
          <cfquery datasource="#dsn#" name="getCount">
              Select count(*) as cnt
              FROM products
          </cfquery>
          <cfset totalCount = getCount.cnt>
      <cfelse>
          <Cfset totalCount = "">
      </cfif>

      <!--- query to products table --->
      <cfquery datasource="#dsn#" name="getRecords">
          SELECT  *
          FROM products
          <!--- add limits to query to get only rows necessary for output --->
          LIMIT #posStart#, #count#
      </cfquery>

      <!--- output data in XML format   --->
      <cfoutput><rows total_count="#totalCount#" pos="#posStart#"></cfoutput>
      <cfloop query="getRecords">
          <cfoutput><row id="#getRecords.id#"></cfoutput>
              <!--- value for product name --->
              <cfoutput><cell>#getRecords.nm#</cell></cfoutput>
              <!--- value for internal code --->
              <cfoutput><cell>#getRecords.code#</cell></cfoutput>
              <!--- value for price --->
              <cfoutput><cell>#getRecords.num_val#</cell></cfoutput>
          <cfoutput></row></cfoutput>
      </cfloop>
      <cfoutput></rows></cfoutput>

After loading the file the grid will look like in the picture below. When you stop scrolling, the grid will load and render a new portion of records.

Step 4. Filter data. Pass extra parameters to the server

Why do you think you need additional parameters and why are we talking about them together with Smart Rendering? There are two possible situations:

  • Filtering data;
  • Server side sorting (the client-side sorting kills all the advantages of Smart Rendering, so you'd better move sorting to the server side. We'll tell you how to do this in Step 5).

Let's add the possibility to filter grid data by the product name mask. Put the following code right before the DIV container we've used for grid initialization:

<input type="Text" id="nm_mask">
<input type="Button" value="Filter" onclick="applyFilter()">

As you see, by clicking the "Filter" button we call the applyFilter function, which doesn't exist as we haven't created it yet.

Let's do it now. It will contain the magic of getting the content for grid based on additional parameter.

function applyFilter(){
    mygrid.clearAll(); //remove all data
    //save query string in global variable (see step 5 for details)
    gridQString = "getGridRecords.php?name_mask="
      +document.getElementById("nm_mask").value;
    mygrid.load(gridQString); // load new dataset from sever with additional param
}

Put it into the script block we left for functions (or any other - it doesn't matter). Now the getGridRecords file gets an additional parameter named "name_mask", which you can add to the query to filter the results by name. For example (PHP):

//query to products table
$sql = "SELECT  * FROM products";
if(isset($_GET["name_mask"]))
    $sql.=" Where nm like '".$_GET["name_mask"]."%'";

Step 5. Sort data

When we have 50,000 records in the grid or just going to have but do not really have (as we work with Smart Rendering with Dynamic Loading) the client-side sorting will not help a lot. Our grid just doesn't know all the values yet. So we need to move sorting to the server side. It is really simple.

There will be 3 stages of the plan:

  • Cancel the client-side sorting;
  • Clear the grid and load the data sorted on the server side;
  • Set the position and direction of the marker in the grid header that shows sorting direction.

To cancel the client-side sorting we need to enable sorting for the columns first. As it was described in the previous tutorial, you can do this with the setColSorting method, but the sorting type for all the three columns will be "server":

mygrid.setColSorting("server,server,server");

The "server" sorting type means nothing for the sorting routine of the grid, so it'll just ignore it. This information is mostly needed for us, as column sorting was moved to the server side. Put this command somewhere before mygrid.init().

Now we are ready to execute the stages 1 and 2 of the plan. We'll do this with the onBeforeSorting event handler. Firstly, let's define the handler function, it gets 3 incoming arguments:

  • Column index;
  • Grid object;
  • Sorting direction (asc for ASC, des for DESC).

And this function will work IN PROFESSIONAL EDITION of the grid only. Sorry, from now on only those who "got the tickets" go further... OK, if you are still reading, here is the complete code for the event handler function. Put it into the script block we've left for functions (or in some other one):

function sortGridOnServer(ind,gridObj,direct){
    mygrid.clearAll();
    mygrid.load(gridQString+(gridQString.indexOf("?")>=0?"&amp;":"?")
     +"orderby="+ind+"&amp;direct="+direct);
    mygrid.setSortImgState(true,ind,direct);
    return false;
}

The above mentioned code does the following:

  • Removes all rows from grid;
  • Loads a new content passing column index as the orderby parameter and the order direction (asc for ASC or des for DESC) as the direct parameter. Here it becomes clear why we needed to save gridQString at the previous steps - because we need to sort exactly the same content which we got last time we loaded the grid.
  • Sets Sort Image visible for the column we sort and with the direction we need.
  • Cancels the client-side sorting by returning "false" from the event handler function for the onBeforeSortingevent. This is what we meant in the point 1 of the plan.

Now when we have the sortGridOnServer function, we can add the following command to set the event handler to the grid initialization script:

mygrid.attachEvent("onBeforeSorting",sortGridOnServer);

The server-side changes are simple, as we just add the Order by statement to the field in the table that corresponds to a column of the grid, and set the direction: ASC if asc, DESC if des. Here is a code sample for PHP:

//order by
$columns = array("nm","code","num_val");
if(isset($_GET["orderby"])){
    if($_GET["direct"]=='des')
        $direct = "DESC";
    else
        $direct = "ASC";
    $sql.=" Order by ".$columns[$_GET["orderby"]]." ".$direct;
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Saving Data on the Server Side DHTMLX Docs

Documentation
  • Exploring Supported Data Formats
  • Loading Data into Grid
  • Loading Big Datasets
  • Saving Data on the Server Side
    • Integration with HTML form
  • Serializing Data to XML,CSV
  • Exporting Data to PDF,Excel
  • Loading Additional Data to Grid
Start Grid Loading and Storing Data

Saving Data on the Server Side

To provide updating data on the server we recommend you to use the DataProcessor library.

It's very easy to use dataProcessor. All you need to do is to initialize it and attach to the grid.

//the consructor takes the path to the server-side script as a parameter
var dp = new dataProcessor("data/connector.php");
dp.init(mygrid);

Once the dhtmlxDataProcessor's object is initialized and attached to the grid, all the changes made in the grid are automatically saved to the DB. Each time the user adds/edits/deletes records in the grid, the appropriate records are added/edited/deleted on the server.

dataProcessor provides a special support for dhtmlxGrid for managing the process of updating data on the server side.

Main Features:

  • An updated/inserted row is marked with a bold text, a deleted one is marked with a strikethrough text;
  • The user can set validation functions on any column. By default, the validation checks whether the specified cell has a value. If validation failed, a cell is marked with a red border;
  • The mode for data processing can be defined in the following way:
    • cell – when cell editing is finished, it checks whether all mandatory cells in the row got their values, whether these values have passed the validation, and if they have, the mode sends data to the server;
    • row – the same as described in the previous point, but it occurs when row selection is changed or Enter button pressed;
    • off – means that there is no automatic data sending, all updated/deleted data is sent to the server on calling the script method (the user can assign it to a button, so he can choose when to save);
  • The updated/deleted rows data is sent to the server to the URL specified by the user (it is called serverProcessor). The serverProcessor should return a simple XML of the specified format to let the grid know about successful/not successful processing. All the necessary after-save procedures will be done automatically.

You can find the detailed information about dataProcessor and use it with dhtmlxGrid in the dataProcessor documentation.

You can also be interested in the tutorials that show using dataProcessor with dhtmlxGrid:

  • Grid. Work with the Server Side
  • Binding Form to Grid
  • Your First App

Integration with HTML form

dhtmlxGrid can be used as a part of an HTML form, so that the grid's data could be sent to the server as a part of form submitting. It can be used if you don't want to use the DataProcessor library.
Read more in the article Integration with HTML Form.

Related sample: Basic init of dataprocessor

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Serializing Data to XML,CSV DHTMLX Docs

Documentation
  • Exploring Supported Data Formats
  • Loading Data into Grid
  • Loading Big Datasets
  • Saving Data on the Server Side
  • Serializing Data to XML,CSV
    • XML
    • CSV
  • Exporting Data to PDF,Excel
  • Loading Additional Data to Grid
Start Grid Loading and Storing Data

Serializing Data to XML,CSV

XML

To serialize dhtmlxGrid data into an XML string, use the serialize method:

var myXmlString = mygrid.serialize();

Related sample: Serialize Grid and Load from String

Configuration methods and properties for XML serialization:

xml.s_row

sets a custom name for row tags

mygrid.xml.s_row="myrowtag";

xml.s_cell

sets a custom name for cell tags

mygrid.xml.s_cell="mycelltag";

xml.row_attrs.push

allows you to include custom row attributes to serialization

mygrid.setRowAttribute("row3","custom1","data");
...
mygrid.xml.row_attrs.push("custom1");

xml.cell_attrs.push

allows you to include custom cell attributes to serialization

mygrid.cells(i,j).setAttribute("custom2","data");
...
mygrid.xml.cell_attrs.push("custom2");

setSerializationLevel (PRO version)

specifies whether you should:

  • serialize user data or not,
  • serialize 'selected' attribute for the rows tags,
  • serialize grid structure info,
  • serialize the 'changed' attribute for the cells tags,
  • include just changed rows to serialization,
  • serialize cell values as CDATA sections
mygrid.setSerializationLevel(true,false,true,false,true,true);

setSerializableColumns (PRO version)

sets columns that will be included to serialization

mygrid.setSerializableColumns("true,false,false,true,false,false,false");

enableMathSerialization (PRO version)

enables serialization formulas as mathematical expressions not data values

mygrid.enableMathSerialization(true);

Related sample: Serialize Grid and Load from String

CSV

To serialize dhtmlxGrid data into a CSV string, use the serializeToCSV method:

var myCSVString = mygrid.serializeToCSV();

Related sample: Import/export from/to CSV

CSV serialization related methods:

setCSVDelimiter

sets the CSV delimeter. By default, ','(comma)

mygrid.setCSVDelimiter("\t");

enableCSVAutoID (PRO version)

allows you to autogenerate IDs for rows while loading a grid from a CSV string

mygrid.enableCSVAutoID(true);

enableCSVHeader (PRO version)

'says' to recognize the first row in the CSV string as the header

mygrid.enableCSVAutoID(true);

submitSerialization

'says' to include the serialized grid as a part of form submit policy

mygrid.submitSerialization(true);

Related sample: Import/export from/to CSV

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Exporting Data to PDF,Excel DHTMLX Docs

Documentation
  • Exploring Supported Data Formats
  • Loading Data into Grid
  • Loading Big Datasets
  • Saving Data on the Server Side
  • Serializing Data to XML,CSV
  • Exporting Data to PDF,Excel
    • PDF
    • Excel
    • Configuration
    • Errors handling and logging
    • Online export services
  • Loading Additional Data to Grid
Start Grid Loading and Storing Data

Exporting Data to PDF,Excel

Pay attention to the fact that dhtmlxGrid doesn't provide full support for data export in the smart rendering or paging modes and exports just the data which is already rendered on the client (not all the data).

PDF

The latest Export packages for installation can be found here:

  • PHP package;
  • Java package;
  • ASP .NET package.

To export data from dhtmlxGrid into a pdf document:

1) Download and unpack the appropriate Export package to the root level of your web server to the folder codebase (you don't need to install anything, just unpack).

2) Call the method toPDF(path). The method takes as a parameter the path to the generate.php file resided in the Export package.

For example, if you add a button by clicking on which dhtmlxGrid will start exporting, your code can be similar to this one:

// DHTMLX Suite is used
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
<script src="codebase/dhtmlx.js"></script>

<input type="button" value="Get as PDF"
onclick="mygrid.toPDF('codebase/grid-pdf-php/generate.php');">
<div id="gridbox" style="width:399px;height:270px;"></div>

<script>
    mygrid = new dhtmlXGridObject('gridbox');
    ...
</script>

Coloring the resulting document

The toPDF() method takes the second (optional) parameter that can be used to control the color map of the resulting PDF document.

  • 'color' - full-color printing (used by default);
  • 'gray' - prints in shades of black and white;
  • 'bw' - prints in black and white only, no color options available;
  • 'custom' - prints in the custom defined colors ( colors are defined in the gridPdfGenerator.php file ).

Custom header and footer images

The toPDF() method takes the third and the fourth (optional) parameters that can be used to set custom header (footer) images for the grid.

To add a header image to the grid:

  • create an image with the name "header.png";
  • put the image to the grid-pdf-php folder;
  • set the 3rd parameter of the toPDF() method to true.
mygrid.toPDF('codebase/grid-pdf-php/generate.php','color',true);

To add a footer image to the grid:

  • create an image with the name "footer.png";
  • put the image to the grid-pdf-php folder;
  • set the 4th parameter of the toPDF() method to true.
mygrid.toPDF('codebase/grid-pdf-php/generate.php','color',false,true);

Excel

The latest packages for installation can be found here:

  • PHP package;
  • Java package;
  • ASP .NET package.

To export data from dhtmxlGrid into an Excel document:

1) Download and unpack the appropriate Export package to the root level of your web server to the folder codebase (you don't need to install anything, just unpack).

2) Call the method toExcel(path). The method takes as a parameter the path to the generate.php file resided in the Export package.

For example, if you add a button by clicking on which dhtmlxGrid will start exporting, your code can be similar to this one:

// DHTMLX Suite is used
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
<script src="codebase/dhtmlx.js"></script>

<input type="button" value="Get as Excel"
onclick="mygrid.toExcel('codebase/grid-excel-php/generate.php');">
<div id="gridbox" style="width:399px;height:270px;"></div>

<script>
    mygrid = new dhtmlXGridObject('gridbox');
    ...
</script>

Configuration

You can define what dhtmlxGrid will look like in a PDF or Excel document after it is exported, configuring the available options in the server-side code:

  • in case of exporting to PDF - the gridPdfGenerator.php file;
  • in case of exporting to Excel - the gridExcelGenerator.php file.

Errors handling and logging

If any error occurs during data exporting and the result output is failed, a log file named as 'error_report_xxxx.xml' is automatically created in the grid-pdf-php (grid-excel-php) folder .

If output isn't failed, but still there are some problems, you can edit the generate.php and change the value of the debug variable to provoke generating of another log file named as 'debug_xxxxx.xml' :

$debug = false;
//change to
$debug = true;

Online export services

In order not to download the Export package you may use online export services and call the toPDF() and toExcel() methods as:

// exporting to PDF by using the online export service
mygrid.toPDF("https://dhtmlxgrid.appspot.com/export/pdf");

// exporting to Excel by using the online export service
mygrid.toExcel("https://dhtmlxgrid.appspot.com/export/excel");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading Additional Data to Grid DHTMLX Docs

Documentation
  • Exploring Supported Data Formats
  • Loading Data into Grid
  • Loading Big Datasets
  • Saving Data on the Server Side
  • Serializing Data to XML,CSV
  • Exporting Data to PDF,Excel
  • Loading Additional Data to Grid
    • Hidden Columns
    • Userdata
    • Custom attributes
Start Grid Loading and Storing Data

Loading Additional Data to Grid

To load additional data to the grid you can use:

  • Hidden Columns.
  • Userdata.
  • Custom attributes.

Hidden Columns

To make some extra data in the grid invisible, you can hide some column(s). So, the data in such column(s) will be invisible to users but accessible by API.

To hide a column, use the setColumnHidden method:

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name, Email, Age");
grid.init();
grid.setColumnHidden(0,true); //hides the 1st column

Related sample: Hide/Show column

The data from hidden columns can be accessed in a usual way:

var value = grid.cells("row1",0).getValue();
grid.cells("row2",1).setValue(value);

In case of initialization from XML, a column can be hidden as in:

<rows>
    <head>
        <column hidden="true">Dummy</column>     </head>
</rows>

By default, data of hidden columns is included into serialization and can't be controlled by the setSerializableColumns method. Also, the data of hidden columns is available during dataProcessor calls.

Userdata

To add a userdata to the whole grid or some of its rows, use the setUserData method:

//adds userdata to the row with id="row1"
mygrid.setUserData("row1","priority","high");
var userdata = mygrid.getUserData("row1","priority");//-> "high"

//adds userdata to the whole grid
mygrid.setUserData("","priority","high");
var userdata = mygrid.getUserData("","priority");//-> "high"

Related sample: Using Grid API Methods

In case of initialization from XML, you can use a special tag - <userdata></userdata>:

<rows>
  <userdata name="somName1">some data</userdata>   //userdata related to the whole grid
    <row id="unique_rowid">
      <userdata name="someName1"> some row data </userdata> //userdata related to a row
      <userdata name="someName2"> some row data </userdata>
      <cell>cell content</cell>
      <cell><![CDATA[<font color="red">cell</font> content]]></cell>
    </row>
</rows>

Custom attributes

To add a custom attribute to a row in the grid, use the setRowAttribute method:

mygrid.setRowAttribute("row1","priority","high");
var value = mygrid.getRowAttribute("row1","priority"); //->"high"

To add a custom attribute to a cell in the grid, use the setAttribute method:

mygrid.cells("row1",0).setAttribute("priority","high");
var value = mygrid.cells("row1",0).getAttribute("priority"); //->"high"

In case of initialization from XML, you can use a special tag - <row></row>:

<rows>
    <row id="unique_rowid" priority="high">         <cell some="data">cell content</cell>
    </row>
</rows>

By default, custom attributes are not included into serialization and not available during dataProcessor calls.

In case of initialization from XML you can include a custom attribute into serialization as in:

mygrid.xml.row_attrs.push("priority");  //includes some row attribute into serialization
mygrid.xml.cell_attrs.push("priority"); //includes a cell attribute into serialization

Related sample: Setting custom attributes

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring Grid DHTMLX Docs

Documentation
  • dhtmlXGrid API
  • Cell-Level API
  • Creating Grid on a Page
  • Loading and Storing Data
  • Configuring Grid
    • Common Operations with Grid and its Elements
    • Column Types
    • Headers and Footers
    • Freezing Columns (the 'Split' Mode)
    • Enabling Keyboard Navigation
    • Managing the Selection
    • Drag-and-Drop Support
    • Saving Grid Configuration in Cookies
    • Configuring Grid from XML
    • Configuring Grid from JSON
    • Grouping Columns
  • Managing Data in Grid
  • Styling Grid
  • Integrating with Other Components
Start Grid

Configuring Grid

  • Common Operations with Grid and its Elements
  • Column Types
  • Headers and Footers
  • Freezing Columns (the 'Split' Mode)
  • Enabling Keyboard Navigation
  • Managing the Selection
  • Drag-and-Drop Support
  • Saving Grid Configuration in Cookies
  • Configuring Grid from XML
  • Configuring Grid from JSON
  • Grouping Columns
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Common Operations with Grid and its Elements DHTMLX Docs

Documentation
  • Common Operations with Grid and its Elements
    • Grid
    • Row
    • Column
    • Cell
  • Column Types
  • Headers and Footers
  • Freezing Columns (the 'Split' Mode)
  • Enabling Keyboard Navigation
  • Managing the Selection
  • Drag-and-Drop Support
  • Saving Grid Configuration in Cookies
  • Configuring Grid from XML
  • Configuring Grid from JSON
  • Grouping Columns
Start Grid Configuring Grid

Common Operations with Grid and its Elements

In this article we'll compactly list basic operations that you will often use while developing apps with dhtmlxGrid.

Learn how to:
Grid
  1. Attach the header
  2. Attach the footer
  3. Clear the grid
  4. Destruct the grid
  5. Reload the grid
  6. Set skin for the grid
Row
  1. Add/remove a row
  2. Check row existance
  3. Get the number of rows
  4. Get the row ID/index
  5. Hide a row
  6. Make the grid rows multi-line
  7. Select a row
  8. Set the row ID
  9. Scroll the grid to make the specified row visible
Column
  1. Add/remove a column
  2. Adjust the width of a column to the content
  3. Check the column visibility (hidden or visible)
  4. Get the column ID/index
  5. Get the number of cols in the grid
  6. Get/set the sorting parameters of a column
  7. Get/set the type of a column
  8. Get/set the width of a column
  9. Hide a column
  10. Set the column horizontal alignment
Cell
  1. Get/set the cell object
  2. Select a cell
  3. Merge cells
  4. Manipulate text of a cell
  5. Edit cells
  6. Manipulate marked cells
  7. Enable unique ids for cells
  8. Find a cell

Grid

Attaching the header to the grid

To attach a header row to the grid, use the attachHeader method:

Attaching the header to the grid

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Book Title,Author,Sales"); mygrid.init();

Related sample: Initialize object on page

Read more in article Headers and Footers.

To detach the header row, use the detachHeader method:

Detaching a header from the grid

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Book Title,Author,Sales"); mygrid.attachHeader("#text_filter,#text_filter,#numeric_filter");
mygrid.init();
mygrid.detachHeader(0); //detaches the 1st header row

Read more in article Headers and Footers.

Attaching the footer to the grid

To attach a footer row to the grid, use the attachFooter method:

Attaching the footer to the grid

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Book Title,Author,Sales");
mygrid.init();
mygrid.attachFooter('Total sales,#cspan,${#stat_total}');

Related sample: Numeric filtering and master checkbox

Read more in article Headers and Footers.

To detach a footer row, use the detachFooter method:

Detaching the footer from the grid

mygrid.attachFooter('Total sales,#cspan,${#stat_total}');   mygrid.attachFooter('Max sales,#cspan,{#stat_max}');
mygrid.attachFooter('Min sales,#cspan,{#stat_min}');
mygrid.detachFooter(0); //detaches the 1st footer row

Read more in article Headers and Footers.

Clearing the grid

To clear the grid from the data, use the clearAll method :

Reloading the grid's data

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Book Title,Author,Sales");
mygrid.init();
mygrid.load('data.xml',function(){
    mygrid.clearAll();                      //removes all rows });

Related sample: Refresh grid from XML

To delete all rows from the grid and clear the header therewith, use the clearAll method with the true parameter:

Reloading both the grid's structure and data

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../codebase/imgs/");
mygrid.load("gridH.xml",function(){
    mygrid.clearAll(true); //removes all rows and clears the header  });

Related sample: Reload with new structure

Destructing the grid

To destruct the grid and clear the occupied memory, use the destructor method:

Using the grid's destructor

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Book Title,Author,Sales");
mygrid.init();
mygrid.destructor();

Related sample: Decrease memory usage

Reloading the grid

To reload the grid (clear all rows and reload data), use the clearAndLoad method:

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Book Title,Author,Sales");
mygrid.init();
mygrid.clearAndLoad("data/grid.xml");

Related sample: 50,000 records in grid with paging

An alternative way to reload the grid is to use a couple of methods - clearAll and load:

Reloading the grid's data

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Book Title,Author,Sales");
mygrid.init();
mygrid.load('data.xml',function(){
    mygrid.clearAll(); //removes all rows     mygrid.load("data1.xml");                               });

//or (to reload both grid's data and header)
mygrid.clearAll(true); //removes all rows and clears the header  mygrid.load("gridH_new.xml");

Related sample: Refresh grid from XML

Related sample: Reload with new structure

Skinning the grid

To set one of predefined skins for the grid, use the setSkin method:

Setting the skin for the grid

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue"); mygrid.setHeader("Book Title,Author,Sales");
mygrid.init();

Related sample: Initialize object on page

Row

Adding/removing a row

To add a new row to the grid, use the addRow method:

Adding a new row to the grid

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Book Title,Author,Sales");
mygrid.init();
mygrid.addRow(mygrid.uid(),"The Rainmaker,John Grisham,7.99");

Related sample: Add/Delete Rows in Grid

To delete a row in the grid, use the deleteRow or deleteSelectedRows method:

Deleting a row from the grid

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Book Title,Author,Sales");
mygrid.init();
mygrid.deleteRow("row123");   //deletes the row with id="row123"  //or
mygrid.deleteSelectedRows();  //deletes all selected rows from the grid

Related sample: Add/Delete Rows in Grid

Getting the row id/index

To get the ID of a row, use the getRowId method:

Getting the id of a row

var rId = mygrid.getRowId(1); //returns the id of the 2nd row mygrid.deleteRow(rId);

Related sample: Add/Delete Rows in Grid

To get the index of a row, use the getRowIndex method:

Getting the index of a row

var selectedRow = mygrid.getSelectedId();
var rIndex = mygrid.getRowIndex(selectedRow); //gets the index of the selected row

Related sample: Auto height

Checking row existance

To check whether a row with the specified id exists, use the doesRowExist method:

Checking whether a specific row exists

var isExist = mygrid.doesRowExist("row5"); //returns true,if a row with id='row5' exists

Getting the number of rows

To get the number of rows in the grid, use the getRowsNum method:

Getting the number of rows in the grid

var count = mygrid.getRowsNum(); function sumColumn(ind){
    var out = 0;
    for(var i=0;i<count;i++){         out+= parseFloat(mygrid.cellByIndex(i,ind).getValue())
    }
    return out;
}

Related sample: Using Grid API Methods

Setting the row ID

To set a new ID for a row with the specified index, use the setRowId method:

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Book Title,Author,Sales");
mygrid.init();
mygrid.load("data.xml", function(){     mygrid.setRowId(0,"new_id") });

Related sample: Using Grid API Methods

To set a new ID for a row with the specified ID, use the changeRowId method:

mygrid.changeRowId("old_id","new_id");

Selecting a row

To select a row with the specified index, use the selectRow method:

mygrid.selectRow(0); //selects the 1st row in the grid

Related sample: Using Grid API Methods

To select a row with the specified ID, use the selectRowById method:

mygrid.selectRowById("row5");            //selects the row with the id='row5'

To select all rows in the grid, call selectAll method:

mygrid.selectAll();

Hiding a row

To hide a row with the specified ID, call the setRowHidden method:

mygrid.setRowHidden("row5",true);        //hides the row with the id='row5'

To show the row after this, call the same method but with the false parameter:

mygrid.setRowHidden("row5",false);       //shows the hidden row with the id='row5'

Related sample: Complex content in header

Programmatic scrolling the grid for making the specified row visible

To programmatically scroll the grid to make a row with the specified ID visible, call the showRow method:

mygrid.showRow("row5");      //scrolls the grid to show the row with the id='row5'

Making the grid multi-line

To enable the possibility to have multi-line rows in the grid, call the enableMultiline method:

mygrid.enableMultiline(true);            //enables the multi-line mode in the grid

Related sample: Multiline cells

Column

Adding/removing a column

To add a new column to the grid, call the insertColumn method:

mygrid.insertColumn(0);            //inserts a column in the 1st position

To remove a column, call the deleteColumn method:

mygrid.deleteColumn(0);            //deletes the 1st column

Related sample: Insert/Delete column

Adjusting the width of a column to the content

To adjust the width of a column to the content, call the adjustColumnSize method:

mygrid.adjustColumnSize(0);      //adjusts the width of the 1st column to the content

Related sample: Adjust column size

Checking visibility of a column

To check whether a column is visible or hidden, call the isColumnHidden method:

mygrid.isColumnHidden(0);        //returns 'true' if the 1st column is hidden

Related sample: Hide/Show column

Getting the column Id/Index

To get the ID of a column, call the getColumnId method:

var cId = mygrid.getColumnId(1);             //gets the id of the 2nd column

To get the index of a column, call the getColIndexById method:

var cIndex = mygrid.getColIndexById("col3"); //gets index of the column with id='col3'

Related sample: Using Grid API Methods

Getting the number of columns

To get count of columns in the grid, call the getColumnsNum method:

var count = mygrid.getColumnsNum();

Related sample: Using Grid API Methods

Getting/setting the sorting parameters of a column

To get the index of a column the grid is currently sorted by and the sorting order, call the getSortingState method:

var state = mygrid.getSortingState();
//returns [0,"des"] if the grid is sorted by the first column in descending order

To set the sorting type for the grid columns, call the setColSorting method:

mygrid.setColSorting("int,str,date,na,sortingFunction");

Getting/setting the type of a column

To get the content type of a column with the specified index, call the getColType method:

var type = mygrid.getColType(0);   //returns the type of the 1st column

To get the content type of a column with the specified ID, call the getColTypeById method:

var type = mygrid.getColTypeById("col3"); //returns type of the column with id='col3'

To set the content types for the grid columns, call the setColTypes method:

mygrid.setColTypes("dyn,ed,txt,price,ch,coro,ra,ro");

Getting/setting the width of a column

To get the width of a column, call the getColWidth method:

var type = mygrid.getColWidth(0);   //returns the width of the 1st column

To set the width for a column, call the setColWidth method:

mygrid.setColWidth(0,"150");   // sets the width of the 1st column to 150px

To set the width for all columns of the grid, call the setInitWidths method:

mygrid.setInitWidths("150,100,100,100,100");

You can use the * (asterisk) as the width value to force a specific column to fill up the remaining width. If you use * for several columns they will share out the remaining width equally.

//2 last columns equally divide the remaining width between themselves
mygrid.setInitWidths("150,100,100,*,*");

Hiding a column

To hide a column with the specified ID, call the setColumnHidden method:

mygrid.setColumnHidden(0,true);        //hides the 1st column

To show the column after this, call the same method but with the false parameter:

mygrid.setColumnHidden(0,false);       //shows the 1st column hidden before

Set the column horizontal alignment

To set the horizontal alignment for the grid columns, call the setColAlign method:

mygrid.setColAlign("right,left,center,justify");

Cell

Getting/setting the cell object

To get the object of a cell with the specified row id and column index, call the cellById method:

var cellObj = grid.cellById("row5",0); // gets object of 1st cell in row with id='row5'

To get the object of a cell with the specified row and column indices, call the cellByIndex method:

var cellObj = grid.cellByIndex(0,0); // gets the object of the 1st cell in the 1st row

Selecting a cell

To select a cell, call the selectCell method:

mygrid.selectCell(0,1);    //selects the second cell of the first row

Merging Cells

To activate the possibility of merging cells in the grid, the user can display row cells in the same way as he uses colspan or rowspan in an HTML table. Cell groups can be managed from XML or Script. In both cases rowspan and colspan must be enabled during the dhtmlxGrid initialization:

grid.enableRowspan();
grid.enableColSpan(true);

The user should include dhtmlxgrid_rowspan.js file into the page to make rowspan work. Colspan doesn't require any additional files. There are several methods responsible for grouping and ungrouping cells with colspan and rowspan.

Managing cell groups from XML

The number of cell tags in a row should not be changed. The example of a row with 3 cells, 2 of which are grouped, is presented below:

<row id="r01">
    <cell colspan="2">value</cell>
    <cell/>
    <cell>value of third cell</cell>
</row>

The same for rowspan:

<row id="r01">
    <cell rowspan="2">value0</cell>
    <cell>value1</cell>
</row>
<row id="r02">
    <cell/>
    <cell>value2</cell>
</row>

Managing cell groups from script

1) Setting colspan in a row starting from the specified column's index:

grid.setColspan(row_id, col_ind, colspan);

The parameters of this method are the following:

  • row_id - id of the row;
  • col_ind - index of the column;
  • colspan - size of the colspan (the number of cells in a group).

2) Setting rowspan with a specified length starting from the specified cell:

grid.setRowspan(rowID,colInd,length);

The parameters of this method are the following:

  • rowID - id of the row;
  • colInd - index of the first cell in the group;
  • length - length of the rowspan (number of cells in the roup).

For example:

// group two cells with colspan
grid.setColspan("r01",0,2);
// ungroup cells
grid.setColspan("r01",0,1);
// group two cells with rowspan
grid.setRowspan("r01",0,2);
// ungroup cells
grid.setRowspan("r01",0,1);

Simultaneous usage of rowspan and colspan for one cell is impossible. Also note that setColspan() and setRowspan() methods must be called only after proper rows are loaded.

Manipulating text of a cell

The user can set text style for a specified cell in the following way:

grid.setCellTextStyle(row_id, ind, styleString);

The parameters are the following:

  • row_id - id of the row;
  • ind - index of the cell;
  • styleString - style string in the common format (example: “color:red;border:1px solid gray;”).

Editing cells

The following method creates the Editor object and switches the currently selected cell to the edit mode if it is allowed:

grid.editCell();

The following method should be used to return the value from the editor (if it is present) to the cell and close the editor:

grid.editStop(mode);

Manipulating Marked Cells

There is a possibility to set marked cells support for enabled or disabled state in dhtmlxGrid. The user should include dhtmlxgrid_markers.js file into the page to work with this functionality.

grid.enableMarkedCells(state); // true/false

A cell can be marked/unmarked (selected or deselected) from script in the following way:

grid.mark(r,cInd,state);

The parameters are the following:

  • r - row object or index of the row;
  • cInd - index of the cell;
  • state(true/false) - select or deselect the cell in question.

The user can get marked cells in the following way:

grid.getMarked();

The method returns the array of marked cells (pairs of row id and column index). To unmark all cells in the grid, the user should call the following command:

grid.unmarkAll();

Enabling unique ids for cells

There is a method that is capable of enabling/disabling unique ids for cells. Ids will be automatically created using the following template: “c_[RowId]_[colIndex]”.

grid.enableCellIds(mode); // true to enable, false to disable

Finding a cell

To find a cell in the grid by its value, the user should apply the following method:

var cell = grid.findCell(value, c_ind, first);

The user shouldn't forget to include dhtmlxgrid_filter.js file into his project. The parameters of the above-mentioned method are:

  • value - search string;
  • c_ind - index of the column to search in (optional; if it is not specified, search will be held through all grid);
  • first - finds only the first occurrence (optional parameter).

The method returns an array, each member of which contains an array with row id and cell index.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Column Types DHTMLX Docs

Documentation
  • Common Operations with Grid and its Elements
  • Column Types
    • Editable column
    • Read-only column
    • "Textarea" column
    • Radio button
    • Checkbox
    • Select box
    • Date picker
    • Color picker
    • "Links" column
    • "Images" column
    • "Price" column
    • "Sales" column
    • Context Menu
    • Tree-like column
    • Grid-like column
    • Custom column types
    • Managing Select Box Collection
    • Sub-grids
    • Sub-rows
  • Headers and Footers
  • Freezing Columns (the 'Split' Mode)
  • Enabling Keyboard Navigation
  • Managing the Selection
  • Drag-and-Drop Support
  • Saving Grid Configuration in Cookies
  • Configuring Grid from XML
  • Configuring Grid from JSON
  • Grouping Columns
Start Grid Configuring Grid

Column Types

Basically, the content type is specified for the whole column with the help of the setColTypes method. As a parameter the method takes a comma-separated list of types' codes.

Setting the content type for columns

mygrid = new dhtmlXGridObject("gridbox");
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
mygrid.setColTypes("dyn,ed,ed,price,ch,coro"); mygrid.init();
  • By default, the grid assigns the "ed" type to all columns.
  • Some of the types can be assigned to any type of data in a column. However, there are types (e.g., the 'price' type ) that are assigned only to the cells with numeric values. Otherwise, data will be omitted or parsed incorrectly.
  • A comma-separated list of types' codes must go without spaces. Otherwise, an error will occur.
  • If you need, you may set the type for a specific row or cell using the setCellExcellType and setRowExcellType methods (doesn't matter which type the related column has).
  • In the Standard Edition you can set types of the columns only. In the Professional Edition you can set either the type of the whole column or the type of each cell in it.

Editable column

An editable column is presented in 3 variations:

  • ed - a simple column with editable cells;
  • edtxt - a column with editable text cells that treat data values as plain text, so HTML isn't allowed and any special char must be set without escaping;
  • edn - a column with editable numeric cells that allow formatting values through the setNumberFormat method.

Column with standard editable cells

Code: "ed"
A column with simple editable cells.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Author");
mygrid.setColTypes("ed"); mygrid.init();

Related sample: Setting cells and column properties

Column with editable cells for plain text

Code: "edtxt"
A column with editable text cells that treat data values as plain text, so HTML isn't allowed and any special char must be set without escaping.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Author");
mygrid.setColTypes("edtxt"); mygrid.init();

Related sample: Setting cells and column properties

Column with editable numeric cells

Code: "edn"
A column with editable numeric cells that allow you to specify formatting rules through the setNumberFormat method for it.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales");
mygrid.setColTypes("edn");  mygrid.setNumberFormat("0,000.00",0,".",","); mygrid.init();

Related sample: Date/Decimal format

Read-only column

A column with read-only cells is presented in 3 variations:

  1. ro - a column with simple read-only cells without the possibility to edit the content;
  2. rotxt - a column with read-only text cells that treat data values as plain text, so HTML isn't allowed and any special char must be set without escaping;
  3. ron - a column with read-only numeric cells that allow formatting values through the setNumberFormat method.

Column with standard read-only cells

Code: "ro"
A column with simple read-only cells without the possibility to edit the content.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Author");
mygrid.setColTypes("ro"); mygrid.init();

Related sample: Setting cells and column properties

Column with read-only cells for plain text

Code: "rotxt"
A column with read-only numeric cells that treat data values as plain text, so HTML isn't allowed and any special char must be set without escaping.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Author");
mygrid.setColTypes("rotxt"); mygrid.init();

Related sample: Setting cells and column properties

Column with read-only numeric cells

Code: "ron"
A column with read-only numeric cells that allow formatting values through the setNumberFormat method.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales");
mygrid.setColTypes("ron");  mygrid.setNumberFormat("0,000.00",0,".",","); mygrid.init();

Related sample: Setting cells and column properties

"Textarea" column

A column with textarea editor is presented in 2 variations:

  1. txt - a simple column with a multiline editor;
  2. txttxt - a column with a multi-line editor that treats data values as plain text, so HTML isn't allowed and any special char must be set without escaping.

Simple "textarea" column

Code: "txt"
A simple column with a multiline editor.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales");
mygrid.setColTypes("txt");  mygrid.init();

Related sample: Setting cells and column properties

"Textarea" column for plain text

Code: "txttxt"
A column with a multiline editor that treats data values as plain text, so HTML isn't allowed and any special char must be set without escaping.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Author");
mygrid.setColTypes("txttxt");  mygrid.init();

Related sample: Setting cells and column properties

Radio button

A radio-button is presented in 2 variations:

  1. ra - a column-oriented radio button;
  2. ra_str - a row-oriented radio button.

Column-oriented radio button

Code: "ra"
A column-aligned radio button.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Bestseller");
mygrid.setColTypes("ra");  mygrid.init();

Related sample: Setting cells and column properties

Row-oriented radio button

Code: "ra_str"
PRO version
A column-aligned radio button.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author");
mygrid.setColTypes("dyn,ed,ed");
mygrid.setRowExcellType("1","ra_str");  mygrid.init();

Related sample: Row-oriented radio button

Checkbox
Code: "ch"
A simple check box.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("In Store");
mygrid.setColTypes("ch");  mygrid.init();

Related sample: Setting cells and column properties

Select box

A select-box editor is presented in 3 variations:

  1. co - an editable select box;
  2. coro - a not editable select box;
  3. combo - an editable select box presented by DHTMLX combo;
  4. clist - a multi- selection select box.

Editable select box

Code: "co"
A simple editable select box.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Author");
mygrid.setColTypes("co");   mygrid.init();

Related sample: Counter eXcell

Not editable select box

Code: "coro"
A not editable select box.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Author");
mygrid.setColTypes("coro");   mygrid.init();

Related sample: Setting cells and column properties

Read more details in the article Managing Select Box Collection.

DHTMLX Combo as an editor

Code: "combo"
PRO version
An editable select box presented by DHTMLX combo.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Number");
mygrid.setColTypes("combo");   mygrid.init();

combo = mygrid.getColumnCombo(0);//takes the column index
combo.enableFilteringMode(true);
combo.load("data/combo.xml");

Related sample: Integration with dhtmlxCombo

Read more information in the article "Integration with dhtmlxCombo".

Multi-selection select box

Code: "clist"
PRO version
A not editable select box with multiple selection.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Number");
mygrid.setColTypes("clist");   // array of possible values
mygrid.registerCList(0,["1000","-200","350"]);
mygrid.init();

Related sample: Extra Excell types

Date picker

A date picker presented in 2 variations:

  • dhxCalendar - a simple date picker (presented by the DHTMLX calendar);
  • dhxCalendarA - a date picker with a possibility to input date manually (presented by the DHTMLX calendar).

Date picker

Code: "dhxCalendar"
A simple date picker presented by DHTMLX calendar.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Date");
mygrid.setColTypes("dhxCalendar");   mygrid.init();

Related sample: Calendar eXcell

Date picker with manual input

Code: "dhxCalendarA"
A date picker presented by DHTMLX calendar with a possibility to input date manually.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Date");
mygrid.setColTypes("dhxCalendarA");   mygrid.init();

Related sample: Calendar eXcell

Color picker
Code: "cp"
A simple color picker.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Color");
mygrid.setColTypes("cp");   mygrid.init();

Related sample: Colorpicker eXcell

"Links" column
Code: "link"
A column that treats data as link sources and renders them as links (analogous to the <a> HTML tag).

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Links");
mygrid.setColTypes("link");   mygrid.init();

Related sample: Link Button

In the XML configuration you can use the following attributes (specified as a '^'-delimited list):

  1. text - the link text;
  2. url - (optional) the URL of the page the link goes to (without quotes) or some javascript function(javascript:function(param1,param2){...};);
  3. target - (optional) the target attribute specifying where to open the linked document.
    • _blank - opens the link in a new window or tab (by default);
    • _self - opens the link in the same frame as it was clicked;
    • _parent - opens the link in the parent frame;
    • _top - opens the link in the full body of the window.

For example, to add a link to the DHTMLX.com site under the text 'Go to DHTMLX' and open it in the same window:

<rows>
    <row id="1">
        <cell>Go to DHTMLX^http://dhtmlx.com^_self</cell>// link to URL
        <cell>Link^javascript:alert(1);^_top</cell>// link to a function
    <row>
    ...
</rows>

"Images" column
Code: "img"
A column that treats data as the image source and renders them as images (analogous to the <img> HTML tag).

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Images");
mygrid.setColTypes("img");   mygrid.init();

Related sample: Extra Excell types

In XML configuration you can use the following attributes (specified as a '^'-delimited list):

  1. url - (mandatory) the URL of an image;
  2. alt - (optional) an alternate text for an image;
  3. link - (optional) the URL of the page you will go to after clicking on image (without quotes) or some javascript function that will be invoked;
  4. target - (optional) the target attribute specifying where to open the linked page.
    • _blank - opens the link in a new window or tab (by default);
    • _self - opens the link in the same frame as it was clicked;
    • _parent - opens the link in the parent frame;
    • _top - opens the link in the full body of the window.
<rows>
    <row id="1">
        <cell>icons/open_icon.png^DHTMLX site^http://dhtmlx.com^_self</cell>
        ...
    <row>
    ...
</rows>

"Price" column
Code: "price"
A column that treats data as price: values < 0 - rendered in green, values > 0 - rendered in red.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Price");
mygrid.setColTypes("price");   mygrid.init();

Related sample: Setting cells and column properties

"Sales" column
Code: "dyn"
A column that applies different coloring and marking based on the value. Intended for using with the sales data.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales");
mygrid.setColTypes("dyn");   mygrid.init();

Related sample: Setting cells and column properties

Context Menu
Code: "context"
An editor uses DHTMLX menu as an editor for a cell.

menu = new dhtmlXMenuObject();
menu.setIconsPath("../common/images/");
menu.renderAsContextMenu();

mygrid = new dhtmlXGridObject('gridbox');
...
mygrid.setColTypes("context");
mygrid.setSubContext(menu, 0, 0);
mygrid.init();
menu.load("data/menu.xml", function() {
    mygrid.load("data/grid.xml");
});

Related sample: Grid linked to menu

Tree-like column
Code: "stree"
A column that uses DHTMLX tree as an editor for a cell.

tree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setImagePath("../dhtmlxTree/codebase/imgs/csh_bluebooks/");
tree.load("data/tree.xml", function() {
    mygrid = new dhtmlXGridObject('gridbox');
    ...
    mygrid.setColTypes("stree");
    mygrid.setSubTree(tree, 2);
    mygrid.init();
    mygrid.load("data/linked_grid.xml");
});

Related sample: Grid linked to tree

For details on the setSubTree() method read the related API article.

Grid-like column
Code: "grid"
A column that uses DHTMLX grid as an editor for a cell.

subgrid = new dhtmlXGridObject('gridbox_sub');
    subgrid.setImagePath("../../codebase/imgs/");
    subgrid.setHeader("Name,UID,Total count");
    subgrid.setInitWidths("100,100,100")
    subgrid.enableAutoHeight(true);
    subgrid.setColTypes("ro,ro,ro");
    subgrid.init();
    subgrid.load("../common/authors.xml",function(){
        mygrid = new dhtmlXGridObject('gridbox');
        ...
        mygrid.setColTypes("grid");
        mygrid.setSubGrid(subgrid,2,0);
        mygrid.init();
        mygrid.load("../common/grid_authors.xml");
});

Related sample: Grid linked to grid

For details on the setSubGrid() method read the related API article.

Custom column types

If API doesn't allow you to provide the desired functionality, you can redefine some method of an editor or create a custom type of content.

Creating read-only editors(eXcells)

Read-only editors are used only to describe the way how the incoming data needs to be rendered.

function eXcell_ro(cell){ // the eXcell name is defined here
    if (cell){            // the default pattern, just copy it
        this.cell = cell;
        this.grid = this.cell.parentNode.grid;
    }
    this.edit = function(){} //read-only cell doesn't have edit method
    // the cell is read-only, so it's always in the disabled state
    this.isDisabled = function(){ return true; }
    this.setValue=function(val){
        // actual data processing may be placed here, for now we just set value as it is
        this.setCValue(val);
    }
}
eXcell_ro.prototype = new eXcell;// nests all other methods from the base class

This snippet contains about 10 lines of code, most of them can be copy-pasted. There are only two places you need to pay attention to:

  • The name of the type;
  • Data processing formula.

For example, the following code will create an eXcell which will render the cell value as a button with a label:

function eXcell_button(cell){ //the eXcell name is defined here
    if (cell){                // the default pattern, just copy it
        this.cell = cell;
        this.grid = this.cell.parentNode.grid;
    }
    this.edit = function(){}  //read-only cell doesn't have edit method
    // the cell is read-only, so it's always in the disabled state
    this.isDisabled = function(){ return true; }
    this.setValue=function(val){
        this.setCValue("<input type='button' value='"+val+"'>",val);
    }
}
eXcell_button.prototype = new eXcell;// nests all other methods from the base class

As you can see, the second snippet differs from the first one only in two places, but it already can automatically convert the incoming data into a button just by defining the column type:

grid.setColTypes("button,...");

You can use any kind of HTML in the process of cell code generation, which allows you to place complex elements inside the grid and style them as necessary. The code mentioned below creates a complex excell type, which will open a new window with details on pressing the button:

function eXcell_details(cell){  // the eXcell name is defined here
    if (cell){                  // the default pattern, just copy it
        this.cell = cell;
        this.grid = this.cell.parentNode.grid;
    }
    this.edit = function(){}   // read-only cell doesn't have edit method
    // the cell is read-only, so it's always in the disabled state
    this.isDisabled = function(){ return true; }
    this.setValue=function(val){
        var row_id=this.cell.parentNode.idd;     // gets the id of the related row
        this.setCValue(val+"<input type='button' onclick='window.open(
        "details.php?for="+row_id)'>",val);
    }
}
eXcell_details.prototype = new eXcell; // nests all other methods from the base class

Creating editable eXcells

The editable eXcells use the same approach as read-only editors do, but with a few additional methods.

Let's analyze the simplest case:

function eXcell_button(cell){ //the eXcell name is defined here
    if (cell){                //the default pattern, just copy it
        this.cell = cell;
        this.grid = this.cell.parentNode.grid;
        eXcell_ed.call(this); //uses methods of the "ed" type
    }
    this.setValue=function(val){
        this.setCValue("<input type='button' value='"+val+"'>",val);
    }
    this.getValue=function(){
        return this.cell.firstChild.value; // get button label
    }
}
eXcell_button.prototype = new eXcell; // nests all other methods from the base class

3 new methods were added there:

  • getValue() - returns the current cell value; it may be used by normal API, and it's necessary for a normal edit operation;
  • edit() - ( not declared explicitly, nested from the 'ed' type ) called when the grid is switched to the edit state;
  • detach() - ( not declared explicitly, nested from the 'ed' type ) called when the grid is switched back to the normal state.

In spite of the fact that we have twice as much rows in this example as we had during the creation of the read-only editor, basically, we have only one row which needs customizing. Both the edit and detach events are fully reused from the already existing excell.

The creation of an editable button is a pretty useless use-case, so let's change it into something more usable:

function eXcell_myprice(cell){ //the eXcell name is defined here
    if (cell){                 //the default pattern, just copy it
        this.cell = cell;
        this.grid = this.cell.parentNode.grid;
        eXcell_ed.call(this); //uses methods of the "ed" type
    }
    this.setValue=function(val){
        this.setCValue("<span>"+val+"</span><span> USD</span>",val);
    }
    this.getValue=function(){
        return this.cell.childNodes[0].innerHTML; // gets the value
    }
}
eXcell_myprice.prototype = new eXcell;// nests all other methods from the base class

As you can see, only the text marked in bold was changed, and now, instead of a useless button we have a value formatted with some postfix. This value can be edited as an Integer value.

In the most complex cases you may need to create an eXcell with a custom editor. Let's have a look at a sample code of an excell which can be used for an hour selecting instead of a simple text input. In addition to the default input the cell editor will have an extra time selector:

function eXcell_mytime(cell){                  // excell name is defined here
    if (cell){                                 // default pattern, just copy it
        this.cell = cell;
        this.grid = this.cell.parentNode.grid;
    }
    this.setValue=function(val){
        this.setCValue(val);
    }
    this.getValue=function(){
        return this.cell.innerHTML; // get value
    }
    this.edit=function(){
        this.val = this.getValue(); // save current value
        this.cell.innerHTML = "<input type='text' style='width:50px;'>"
        + "<select style='width:50px;'><option value='AM'>AM"
        + "<option value='PM'>PM</select>"; // editor's html
        this.cell.firstChild.value=parseInt(val); // set the first part of data
        if (val.indexOf("PM")!=-1) this.cell.childNodes[1].value="PM";
          // blocks onclick event
          this.cell.childNodes[0].onclick=function(e){ (e||event).cancelBubble=true;}
          // blocks onclick event
          this.cell.childNodes[1].onclick=function(e){ (e||event).cancelBubble=true;}
    }
    this.detach=function(){
          // sets the new value
          this.setValue(this.cell.childNodes[0].value+" "+this.cell.childNodes[1].value);
          return this.val!=this.getValue(); // compares the new and the old values
    }
}
eXcell_mytime.prototype = new eXcell;    // nests all other methods from base class

As you can see, this sample contains some additional code, but there is still nothing really complex.

HTML code of the editor is defined inside of the edit() method. Thus, the editor is filled with the current values.

Values from the editor are combined to get a new cell value inside the detach() method.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Managing Select Box Collection DHTMLX Docs

Documentation
  • Managing Select Box Collection
    • Initialization by script
    • Initialization from XML
  • Sub-grids
  • Sub-rows
Start Grid Configuring Grid Column Types

Managing Select Box Collection

The functionality described below is applicable to co, coro column types.

Initialization by script

The following method can be used to get a select box collection common for the whole column:

combo = grid.getCombo(index);

If you need the collection to be specific for a cell use:

combo = grid.getCustomCombo(rId,cIndex)

The collection supports the following API:

combo.put(value,label); // adds a new record to the collection
combo.remove(value);    // removes a record from the collection
combo.clear();          // removes all records from the collection

combo.size();           // returns the current size of the combo box
combo.get(value);       // returns the label by value
combo.getKeys();        // returns the array of all possible values

combo.save();           // saves the current state
combo.restore();        // restores the previously saved state

Initialization from XML

The list of options for combo can be defined from XML in two ways:

  • With column configuration the values will be set for all cells in a column
<rows>
    <head>
        <column type="co"> Combo column
            <option value="1"> First </option>
            <option value="2"> Second </option>
            <option value="3"> Third </option>
        </column>
  • For separate cells (pro version only)
<rows>
    <row id="some1">
        <cell> some </cell>
        <cell> some </cell>
        <cell xmlcontent="true">
            1
            <option value="1">The first</option>
            <option value="2">The second</option>
        </cell>
        <cell> some </cell>
    </row>
</rows>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Sub-grids DHTMLX Docs

Documentation
  • Managing Select Box Collection
  • Sub-grids
    • Adding a sub-grid
    • Sub-grid for a single row
    • Getting the sub-grid object
    • Related events
  • Sub-rows
Start Grid Configuring Grid Column Types

Sub-grids

You can use collapsible sub-grid to integrate 2 dhtmlxGrids together.

The stated functionality requires PRO version of the dhtmlxGrid (or DHTMLX Suite) package.

Adding a sub-grid

To create a sub-grid for a row you should create a column of the 'sub_row_grid' type and use it as any other columns to specify the related data. dhtmlxGrid will treat data values specified in that column as URLs to the XML configuration of the sub-grids.

Adding sub-grid to the grid

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setColTypes("sub_row_grid,ed,ed");
...
mygrid.init();
mygrid.load('data.xml', 'xml');

data.xml file

<?xml version="1.0"?>
<rows>
    <row id="row1">
        <cell> sub-grid.xml </cell>
        <cell> Data </cell>
        <cell> Data </cell>
    <row>
    ...
</rows>

sub-grid.xml file

<?xml version="1.0"?>
<rows>
    <head>
        <column width="80" type="ro" align="left"  sort="str">Quarter</column>
        <column width="80" type="dyn" align="right"  sort="str">Sales</column>
        <column width="110" type="price" align="right" sort="str">Price</column>
    </head>
    <row id="1">
        <cell>I</cell>
        <cell>-3500</cell>
        <cell>15.99</cell>
    </row>
    ...
</rows>

Related sample: Grid with subgrid

Sub-grid for a single row

When you specify 'sub_row_grid' columns, it's implied that each row of the grid will contain a sub-grid. In various situations you may need to add sub-grids just to the specific rows, while supplementing other rows with simple text sub-rows.

In this case you should set type 'sub_row_grid' just for the cells related to rows you want to add sub-grids to (no matter what type of a cell the column is).

The type of the cell can be set by 2 ways:

  • by the method setCellExcellType():

Adding sub-grid to a single row

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setColTypes("ed,ed,ed");
...
mygrid.init();
mygrid.load("data.xml", function() {
        mygrid.setCellExcellType('1',0,"sub_row_grid");
        }
);
  • or directly in XML configuration

data.xml file

<rows>
    <row id="row1">
        <cell type="sub_row_grid">sub-grid.xml</cell>
        <cell>Data</cell>
        <cell>Data</cell>
    <row>
    ...
</rows>

Getting the sub-grid object

To get the sub-grid instance use the method getSubGrid():

// [i,j] - index of the parent row, index of the 'sub_row' column (zero-based numbering)
grid.cells(i,j).getSubGrid();

Related events
  • onSubGridCreated - called when the sub-grid object is created, but before data is loaded from the related XML file;
  • onSubGridLoaded - called when the sub-grid has loaded the XML configuration and parsed its values.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Sub-rows DHTMLX Docs

Documentation
  • Managing Select Box Collection
  • Sub-grids
  • Sub-rows
    • Adding a sub-row
    • Programmatic expanding/collapsing
    • Related events
Start Grid Configuring Grid Column Types

Sub-rows

You can use collapsible sub-rows to present some extra data related to a row in the grid.

The stated functionality requires PRO version of the dhtmlxGrid (or DHTMLX Suite) package.

Adding a sub-row

To create a simple sub-row for a parent record, you should create a column of the type 'sub_row' and use it as any other columns to specify the related data.

Creating sub-rows in the grid

myGrid = new dhtmlXGridObject("gridbox");
myGrid.setColTypes("sub_row,ed,ed");

myGrid.init();
myGrid.load("data.xml", "xml");

data.xml file

<rows>
    <row id="row1">
        <cell> Sub-rows data </cell>
        <cell>Data </cell>
        <cell>Data </cell>
    <row>
    ...
</rows>

Related sample: Subrow excell

If the data in a sub-row is huge, you can use another appropriate column type - sub_row_ajax. In this case dhtmlxGrid will treat the data values from the column as links to external data files.

When such a sub-row is expanded, the grid loads the stated data file and shows its content as a content of a sub-row.

Loading sub-rows with AJAX

myGrid = new dhtmlXGridObject("gridbox");
myGrid.setColTypes("sub_row_ajax,ed,ed");

myGrid.init();
myGrid.load("data.xml", "xml");

data.xml file

<rows>
    <row id="row1">
        <cell>my_data.html</cell>
        <cell>Data </cell>
        <cell>Data </cell>
    <row>
    ...
</rows>

In case of adding a new row with a sub-row, the value of the row is defined in the standard manner:

myGrid.addRow(id,["sub-row data here ....","Data","Data"]);

Programmatic expanding/collapsing

To programmatically expand/collapse a sub-row, use the following commands:

//to expand a sub-row
myGrid.cellById(row_id, col_ind).open();
//to collapse a sub-row
myGrid.cellById(row_id, col_ind).close();

where the cellById method takes as parameters:

  • row_id - (string,number) the id of the parent row.
  • col_ind - (number) the index of the 'sub_row' column (zero-based numbering).

Related events
  • onSubRowOpen - invoked when sub-row is opened or closed;
  • onSubAjaxLoad - invoked when data is loaded to a sub-row (for sub_row_ajax column types).
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Headers and Footers DHTMLX Docs

Documentation
  • Common Operations with Grid and its Elements
  • Column Types
  • Headers and Footers
    • Header
    • Header alignment
    • Header menu
    • Grid without a header
    • Multi-line headers/footers
    • Footer
    • Detaching header(footer)
    • Changing header's labels
    • Getting header's labels
    • Colspans (rowspans)
    • Initialization from XML
    • Icons in the header
    • Treating header's labels as images
  • Freezing Columns (the 'Split' Mode)
  • Enabling Keyboard Navigation
  • Managing the Selection
  • Drag-and-Drop Support
  • Saving Grid Configuration in Cookies
  • Configuring Grid from XML
  • Configuring Grid from JSON
  • Grouping Columns
Start Grid Configuring Grid

Headers and Footers

Header

To set the header for the grid, use the setHeader method:

mygrid = new dhtmlXGridObject('gridbox');

mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Sales,Book title,Author,Price"); mygrid.init();

Note, the header's values are treated as HTML, so you can use any HTML tags in the setHeader method:

mygrid.setHeader("<img src='book_icon.png'>,<b>Sales</b>,Book title,Author,Price");
//the image "book_icon.png" will be used as the header of the 1st column

Header alignment

To align the header's labels, use related CSS rules in the setHeader method:

mygrid.setHeader(
    "A,B,C",
    null,
    ["text-align:right;","text-align:left;","text-align:center"]
);
//or
mygrid.setHeader("<div style='width:100%; text-align:left;'>A</div>,B,C");

Header menu

Starting from v4.1, users can enable dhtmlxMenu for setting visibility of different columns (hide/show them) right on the fly. To do this, the user just needs to call the following command:

grid.enableHeaderMenu();

Grid without a header

The setHeader method must be called anytime you initialize the grid, dhtmlxGrid detects the number of columns depending on the values specified in this method. The only way to display the grid without the header is to hide it.

To hide the grid's header, use the setNoHeader method:

mygrid.setHeader("A,B,C"); //must be called anyway as it sets the number of cols
mygrid.setNoHeader(true);  //hides the header

Multi-line headers/footers

To add one more header line, use the attachHeader method:

mygrid = new dhtmlXGridObject('gridbox');

mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Sales,Book title,Author,Price"); mygrid.attachHeader("Second header,,"); mygrid.init();

Assigning a custom style to the additional headers is quite similar:

mygrid.setHeader("Sales,Book title,Author,Price");
mygrid.attachHeader(
    "Second header,,",
    ["text-align:right;","text-align:left;","text-align:center"]
);

Related sample: Multirow header

Footer

To set the footer(or several footers) for the grid, use the attachFooter method:

There is a sibling command to attach footers (the first line and more):

mygrid = new dhtmlXGridObject('gridbox');

mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Sales,Book title,Author,Price"); mygrid.attachFooter("Sales,Book title,Author,Price");  mygrid.init();

The footer's values are treated as HTML

The CSS style for the footer is assigned through the 2nd parameter of the attachFooter method:

mygrid.attachFooter(
    "Sales,Book title,Author,Price",
    ["text-align:right;","text-align:left;","text-align:center"]
);

Detaching header(footer)

To detach some header(footer) from the grid, use the detachHeader (detachFooter) method:

mygrid = new dhtmlXGridObject('gridbox');

mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Sales,Book title,Author,Price"); mygrid.attachFooter("Sales,Book title,Author,Price");  mygrid.init();

mygrid.detachFooter(0);//detaches the 1st footer(zero-based numbering)

The 1st header can't be detached

Changing header's labels

To change the header's label of some column, use the setColumnLabel method:

//sets new label for the 1st column
mygrid.setColLabel(0,"New Column Label");
//sets new label for the 2nd header the 1st column
mygrid.setColLabel(0,"New Column Label",1);

Getting header's labels

To get the header's labels, use the getColumnLabel method:

//gets the  label of the 1st column
var colLabel=mygrid.getColLabel(0);
//gets the label of the 2nd header of the 1st column
var colLabel=mygrid.getColLabel(0,1);

Colspans (rowspans)

Multi-line headers (footers) can have colspans and rowspans. There is no special API for such a task, the functionality is based on special cell values.

To set a colspan(rowspan) you need to use special keywords in the setHeader (setFooterLabel) methods instead of the text labels:

  • #cspan - the cell will be joined with the left cell
  • #rspan - the cell will be joined with the above cell
mygrid.setHeader("A,#cspan,#cspan");
mygrid.attachHeader("A1,B1,#cspan");
mygrid.attachHeader("#rspan,B2,C2");

The same cell can't be included in both rowspan and colspan at the same time

Related sample: Footer

Initialization from XML

If you're initializing dhtmlxGrid from XML, the labels of the 1st header are set with the column tags.

Additional headers(footers) are specified with the afterInit/call tags:

<rows>
    <head>
        <column ... >A</column>
        <column ... >B</column>
        <column ... >C</column>
        <afterInit>
            <call command="attachHeader"><param>A1,B1,C1</param></call>
            <call command="attachHeader"><param>A2,B2,C2</param></call>
            <call command="attachFooter"><param>AF,BF,CF</param></call>
        </afterInit>
    </head>
    ...
</rows>

The same syntax is used to define colspans and rowspans (whitespaces around #rspan and #cspan values must be omitted).

Icons in the header

dhtmlxGrid has a special support for icons in the header. Note, the expected size of icons is 18x18 pixels.

To present an icon in the header, use the following technique:

mygrid = new dhtmlXGridObject('gridbox');

mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Without Icon,img:[path/to/icon.gif]With Icon"); mygrid.init();

If you're using XML configuration, set an icon in the header as in:

<head>
    <column width="50" type="dyn">Without Icon</column>
    <column width="150" type="ed">img:[path/to/icon.gif]With Icon</column>
   ...
</head>

Treating header's labels as images

By default, dhtmlxGrid treats the header's labels as text values. To make the grid treat labels as images files' names, use the enableHeaderImages method:

mygrid = new dhtmlXGridObject('gridbox');

mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("img_01,img_02,img_03"); mygrid.enableHeaderImages(true);
mygrid.init();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Freezing Columns (the 'Split' Mode) DHTMLX Docs

Documentation
  • Common Operations with Grid and its Elements
  • Column Types
  • Headers and Footers
  • Freezing Columns (the 'Split' Mode)
    • Activating the 'split' mode
    • Setting the 'split' mode in the XML configuration
    • Setting the 'split' mode while initializing grid from the HTML table
  • Enabling Keyboard Navigation
  • Managing the Selection
  • Drag-and-Drop Support
  • Saving Grid Configuration in Cookies
  • Configuring Grid from XML
  • Configuring Grid from JSON
  • Grouping Columns
Start Grid Configuring Grid

Freezing Columns (the 'Split' Mode)

The stated functionality requires the PRO version of dhtmlxGrid.

The 'split' mode allows you to have a grid separated into 2 parts:

  1. Frozen. The part is fixed and can contain only the first columns on the right-hand side.
  2. Scrolled. The part is movable and can be scrolled horizontally.

Activating the 'split' mode

Technique

To 'froze' columns, use the splitAt method.
Note, the method must be called after the grid has been initialized but before data is loaded to it.

Enabling the 'split' mode

mygrid.init();
mygrid.splitAt(2);//'freezes' 2 first columns mygrid.load("grid.xml");

Related sample: Grid in split mode

Important tips

  • In the split mode the grid is slower than in the normal mode. So, it's recommended to use the smart rendering or paging techniques to load data;
  • Just one split per grid is possible;
  • After the split mode has been activated, it's impossible to restore the grid's structure (i.e. to reload the grid with a different structure). Such a grid can only be destructed;
  • The split mode is incompatible with any other grid functionality, such as 'subgrid' and 'subrow' column types in the frozen part, the block selection in the frozen part and so on.

Setting the 'split' mode in the XML configuration

If you specify the grid's configuration in XML, use the following technique to activate the 'split' mode:

Using the 'split' mode in the XML configuration

<rows>
    <head>
        <column width="50"  type="dyn"   align="right" sort="int">Sales</column>
        <column width="150" type="ed"    align="left" sort="str">Book Title</column>
        <column width="120" type="ed"    align="left"  sort="str">Author</column>
        <column width="80"  type="price" align="left"  sort="str">Price</column>
        <afterInit>
            <call command="splitAt"><param>2</param></call>           </afterInit>
    </head>
    <row>
        <cell>-1500</cell>
        <cell><![CDATA[A Time to Kill]]></cell>
        <cell><![CDATA[John Grisham]]></cell>
        <cell>12.99</cell>
    </row>
</rows>

Setting the 'split' mode while initializing grid from the HTML table

If you specify the grid's configuration in HTML, use the following technique to activate the 'split' mode:

Using the 'split' mode in the HTML configuration

<table class="dhtmlxGrid" split="2">     <tr>
        <td width="150" type="dyn"   align="right" sort="str">Sales</td>
        <td width="150" type="ed"    align="left"  sort="str">Book Title</td>
        <td width="120" type="ed"    align="left"  sort="str">Author</td>
        <td width="80"  type="price" align="left"  sort="str">Price</td>
    </tr>
    <tr>
        <td>-1500</td>
        <td><![CDATA[A Time to Kill]]></td>
        <td><![CDATA[John Grisham]]></td>
        <td>12.99</td>
    </tr>
</table>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Enabling Keyboard Navigation DHTMLX Docs

Documentation
  • Common Operations with Grid and its Elements
  • Column Types
  • Headers and Footers
  • Freezing Columns (the 'Split' Mode)
  • Enabling Keyboard Navigation
    • Native keymap
    • MS Excel keymap
    • MS Access keymap
    • Specifying the tab order of the columns
    • Mouse navigation
  • Managing the Selection
  • Drag-and-Drop Support
  • Saving Grid Configuration in Cookies
  • Configuring Grid from XML
  • Configuring Grid from JSON
  • Grouping Columns
Start Grid Configuring Grid

Enabling Keyboard Navigation

The library provides support for different keyboard commands that let users to navigate through the grid.

Users have the possibility to choose between 3 keymaps:

  • Native (enabled by default)
  • MS Excel
  • MS Access

Native keymap

Initially, dhtmlxGrid has the keyboard navigation enabled.
To disable it call the enableKeyboardSupport method with the false parameter:

Disabling default navigation in the grid

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
mygrid.init();
mygrid.enableKeyboardSupport(false);

Related sample: Light mouse navigation

Table 1 Native keymap commands
Command | Description
Enter | closes the editor. Changes are saved
ESC | closes the editor for a cell. Changes aren't saved
F2 | opens the editor for a cell
Space | changes the state if the cell is a check box or a radio button
Tab | moves one cell to the right
Tab+Shift | moves one cell to the left
Up, Down arrow keys | moves one row up/down

MS Excel keymap

To switch from the native to the MS Excel keymap use the enableExcelKeyMap() command:

Activating the MS Excel keymap in the grid

<link href="../codebase/dhtmlx.css" rel="stylesheet">
<script  src="../codebase/dhtmlx.js"></script>

<script>
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
    mygrid.init();
    mygrid.enableExcelKeyMap(); </script>

Related sample: Keymap - excel

Table 2 MS Excel keymap commands
Command | Description
Enter | moves one cell down. The cell editor isn't opened
Enter + Ctrl | closes the cell editor. Doesn't move anywhere
Enter + Shift | moves one cell up. The cell editor isn't opened
Tab | moves one cell in a row to the right. The cell editor isn't opened
Tab+Shift | moves one cell to the left. The cell editor isn't opened
F2 | opens the cell editor
ESC | closes the editor for a cell. Changes aren't saved
PGUP | moves to the next page (if the paging mode is enabled and some cell is selected)
PGDN | moves to the previous page (if the paging mode is enabled and some cell is selected)
Up, Down, Left, Right arrow keys | moves one row up/down/left/right
Ctrl + Left, Right arrow keys | moves to the first/last cell in the row
Ctrl + Up, Down arrow keys | moves to the first/last cell in the column
Ctrl + Shift + Up, Down arrow keys | selects all rows from the current to the first/last row
Ctrl + Home | moves to the top left cell in the grid
Ctrl + End | moves to the bottom right cell in the grid
Shift + Up, Down arrow keys | selects a massive of rows
Home | moves to the first cell in the current row
End | moves to the last cell in the current row

MS Access keymap

To switch from the native to the MS Access keymap, use the enableAccessKeyMap() command:

Activating the MS Access keymap in the grid

<link href="../codebase/dhtmlx.css" rel="stylesheet">
<script  src="../codebase/dhtmlx.js"></script>

<script>
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
    mygrid.init();
    mygrid.enableAccessKeyMap();   </script>

Related sample: Keymap - access

Table 3 MS Access keymap commands
Command | Description
Enter | moves one cell to the right and opens the cell editor
Enter + Ctrl | closes the cell editor. Doesn't move anywhere
Enter + Shift | moves one cell to the left and opens the cell editor
Tab | moves one cell to the right and opens the cell editor
Tab+Shift | moves one cell to the left and opens the cell editor
F2 | opens the cell editor
Space | changes the state if the cell is a check box or a radio button
ESC | closes the editor for a cell. Changes aren't saved
PGUP | moves to the next page (if the paging mode is enabled and some cell is selected)
PGDN | moves to the previous page (if the paging mode is enabled and some cell is selected)
Left, Right arrow keys | if the editor for the current cell is closed, moves one cell to the left/right and opens the cell editor. If the editor for the current cell is opened - nothing happens
Up, Down arrow keys | moves one cell up/down in the current column
Ctrl + Left, Right arrow keys | if the editor for the current cell is closed, moves to the first/last cell in the row and opens the cell editor. If the editor for the current cell is opened - nothing happens
Ctrl + Up, Down arrow keys | moves to the first/last cell in the current column
Ctrl + Shift + Up, Down arrow keys | moves to the first/last cell in the current column
Ctrl + Home | moves to the top left cell in the grid and opens the cell editor
Ctrl + End | moves to the bottom right cell in the grid and opens the cell editor
Shift + Up, Down arrow keys | moves one cell up/down in the current column and opens the cell editor
Home | if the editor for the current cell is closed, moves to the first cell in the row and opens the cell editor. If the editor for the current cell is opened - nothing happens
End | if the editor for the current cell is closed, moves to the last cell in the row and opens the cell editor. If the editor for the current cell is opened - nothing happens

Specifying the tab order of the columns

You can change the standard tab order by using the setTabOrder method.

Note, that as a parameter the method takes a list of numbers which dictates the order of the columns while tabbing and NOT a list of columns' indices. See details at the method's page.

Changing the tab order of columns

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
mygrid.init();
mygrid.setTabOrder("4,3,2,1"); //the inverse tab order

Related sample: Tab Order and Readonly Cells

Excluding not editable cells from the tab order list

To prevent not editable cells from receiving the focus, call the enableEditTabOnly method with the true parameter.

Preventing not editable cells from receiving the focus

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
mygrid.init();
mygrid.enableEditTabOnly(true);

Related sample: Tab Order and Readonly Cells

Setting controls for tab-in/tab-out the grid

To specify HTML controls that will precede/succeed the grid in the tab order, use the setExternalTabOrder method:

Specifying HTML controls for tab-in/tab-out the grid

<input type="text" id="input1" />*!*/
<div id="gridbox"></div>
<input type="text" id="input3" />*!*/

<script>
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
    mygrid.init();
    mygrid.setExternalTabOrder("input1","input3"); </script>

In this case the tab order of your HTML page will look like this:
... input1, grid (first cell,..., last cell), input 3 ....

Related sample: Tab Order and Readonly Cells

Mouse navigation

Besides keyboard navigation the library provides mouse navigation.

Mouse navigation lets you to:

  • move the row selection with mouse-over;
  • open the cell editor with a single click.

To activate mouse navigation, call the enableLightMouseNavigation method with the true parameter:

Activating mouse navigation in the grid

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
mygrid.init();
mygrid.enableLightMouseNavigation(true);

Related sample: Light mouse navigation

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Managing the Selection DHTMLX Docs

Documentation
  • Common Operations with Grid and its Elements
  • Column Types
  • Headers and Footers
  • Freezing Columns (the 'Split' Mode)
  • Enabling Keyboard Navigation
  • Managing the Selection
    • Multiselection
    • Alternative selection
    • Disabling selection
  • Drag-and-Drop Support
  • Saving Grid Configuration in Cookies
  • Configuring Grid from XML
  • Configuring Grid from JSON
  • Grouping Columns
Start Grid Configuring Grid

Managing the Selection

Selection in Grid is enabled by default, and the user can select some row by a single click.

The library provides the following API to support selection in Grid:

Methods

  • selectRow - selects a row with the specified index (zero-based numbering).
  • selectCell - selects a cell with the specified index (zero-based numbering) and the row that this cell belongs to.
  • selectRowById - selects a row with the specified id.
  • selectAll - selects all rows in the grid.
  • getSelectedCellIndex - returns the column index of the currently selected cell.
  • getSelectedRowId - returns the id of the currently selected row.
  • clearSelection - clears the selection in the grid.

Events

  • onBeforeSelect - fires before a row in the grid is selected.
  • onRowSelect - fires after the user has clicked a row to select it.
  • onSelectStateChanged - fires when the selection state is changed, e.g. a new row has been selected, the selection has been cleared, etc.

Related sample: Using Grid API Methods

When a cell is being selected, the grid automatically selects the row that this cell belongs to. On the other hand, in any selected row you have such an area as the selected cell which is:

  • When the user clicks on the grid - the selected cell = the clicked cell .
  • When the selectRow or selectRowById method is called - the selected cell = 1st cell of the row .
  • When the selectCell method is called - the selected cell = the cell specified in the method.

So anytime you have a selection in the grid - you have 2 selection objects: a row and a cell.

When may you need to know the selected cell? For example, to detect which cell the user has clicked exactly or to open the editor for a specific cell.

Multiselection

To enable multiselect in the grid, call the enableMultiselect method:

Enabling multiselection

mygrid = new dhtmlXGridObject("gridbox");
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
mygrid.enableMultiselect(true);  mygrid.init();

Related sample: Operations with clipboard

Users need to use Shift and Ctrl keys to select multiple rows.

Alternative selection

The library has 2 extension modes that provide alternative types of selection in the grid.

  • Block Selection - provides the clipboard support.
  • Cell Selection - provides the multi cell selection.

Note, API related to the default selection can't be used with the alternative types (as alternative types are not really a selection, they are just marking.

Block Selection for clipboard support

The Block Selection mode is used to provide the support for clipboard operations. It allows selecting cells by blocks for copying data to the clipboard. Read more information on working with the clipboard in the Clipboard Operations article.

To enable the mode, call the enableBlockSelection method:

mygrid = new dhtmlXGridObject("gridbox");
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
mygrid.enableBlockSelection();  mygrid.init();

Related sample: Copy to clipboard

Cell selection

dhtmlxGrid provides an extension "markers" (dhtmlxgrid_markers.js) that enables the possibility to select cells instead of rows in the grid.

To enable selecting by cells in the grid, call the enableMarkedCells method:

mygrid = new dhtmlXGridObject("gridbox");
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping");
mygrid.enableMarkedCells();();  mygrid.init();

Related sample: Markers

To mark a cell, use the mark method (the method invokes the onCellMarked event):

//marks a cell
mygrid.mark('row1',0,true);

//unmarks a cell
mygrid.mark('row1',0,false);

To unmark all marked cells, use the unmarkAll method (the method invokes the onCellUnMarked event):

//marks cells
mygrid.mark('row1',0,true);
mygrid.mark('row2',0,true);

//unmarks all cells
mygrid.unmarkAll();

To get all marked cells, use the getMarked method:

mygrid.getMarked();

Disabling selection

To disable selection, return false from the onBeforeSelect event's handler:

myGrid.attachEvent("onBeforeSelect", function(row,old_row){
    return false;
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Drag-and-Drop Support DHTMLX Docs

Documentation
  • Common Operations with Grid and its Elements
  • Column Types
  • Headers and Footers
  • Freezing Columns (the 'Split' Mode)
  • Enabling Keyboard Navigation
  • Managing the Selection
  • Drag-and-Drop Support
    • Common
    • Drag-and-drop related methods
    • Advanced
  • Saving Grid Configuration in Cookies
  • Configuring Grid from XML
  • Configuring Grid from JSON
  • Grouping Columns
Start Grid Configuring Grid

Drag-and-Drop Support

The library supports drag-and-drop within a grid or several grids on the page.

Common

To enable the possibility to drag-and-drop rows in the grid, you should call method enableDragAndDrop() with the true parameter:

Enabling drag-and-drop in the grid

mygrid = new dhtmlXGridObject('gridbox');
...
mygrid.enableDragAndDrop(true);
mygrid.init();

The dragContext object

The dragContext object is available during the onDrag event and contains the following properties:

  • dragContext.source - type of the source component (“tree”,”grid”,”treeGrid”);
  • dragContext.target - type of the target component;
  • dragContext.sobj - the source object;
  • dragContext.tobj - the target object;
  • dragContext.dropmode - whether the dragged item will be a “child” or a “sibling”;
  • dragConetxt.mode - whether the dragged item will be copied or just moved: “copy” or “move”;
  • dragContext.sid - id of the dragged item;
  • dragContext.tid - id of the drag landing item.

Drag-and-drop related methods
  • enableDragAndDrop() - enables/disables drag-and-drop in the grid(s) on the page
mygrid.enableDragAndDrop(true);
  • enableDragOrder() - switches to the mode when the dragged items are dropped in the target location in the same order they were selected in the source location. Makes sense for multiple selection model only
mygrid.enableDragOrder(true);
  • enableMercyDrag() (PRO version) - enables the mode when items are dragged without removing (copying instead of moving)
mygrid.enableMercyDrag(true);
  • setDragBehavior() - sets the drag-and-drop behavior (see details in the API reference)
mygrid.setDragBehavior(sibling);
//the item is dropped as a sibling of the target item
  • enableColumnMove() (PRO version) - allows you to move columns with drag-and-drop
mygrid.enableColumnMove(true);
mygrid.attachEvent("onBeforeCMove",function(sInd,tInd){
    return confirm("Allows you to move column "+sInd+" to position "+tInd);
}); //return 'true' to allow moving, 'false' - to prohibit it

Related sample: Drag and Drop between Grids

Advanced

Information stated in the 'Common' part is enough in most cases.
The current part should be used just if you want to customize existing drag-and-drop behaviour.

The part covers the following topics:

  • Custom text of the dragging items;
  • Denying dragging of specific items;
  • Denying dropping to specific positions;
  • Switching between 'move' and 'copy' behaviors;
  • Customizing the 'Drag' action;
  • Dragging between several grids;
  • Related events.

Custom text of the dragging items

To redefine the text displaying for the dragging item(s), use the rowToDragElement property. Inside the dragged text you can use any HTML.

mygrid.rowToDragElement=function(id){
    //any custom logic here
    return text;
}

Let's consider use-cases of specifying the following content:

  • A fixed image and the value of the dragged row in the first column:
mygrid.rowToDragElement=function(id){
    var text = "<img src='some.gif'> - " + mygrid.cellById(id,0).getValue();
    return text;
}
  • The number of dragged items (in case of multiselect selection):
mygrid.rowToDragElement=function(id){
    //_dragged.length - the number of dragging items
    var text = mygrid._dragged.length + "item(s)";
    return text;
}
  • The text of the dragged items (in case of multiselect selection):
mygrid.rowToDragElement=function(id){
    var text="";
    for (var i=0; i<this._dragged.length; i++)
        text += mygrid.cellById(mygrid._dragged[i].idd,0).getValue() + "<br/>";
    return text;
}

Denying dragging of specific items

To deny dragging of specific items you can use the onBeforeDrag event.

Let's assume, you load data from an XML file and want to deny dragging of some rows. For this purpose, mark the unnecessary rows in any possible way, e.g. by user data:

<rows>
    <row id="1"><cell> data 1 </cell></row>
    <row id="2"><cell> data 2 </cell>
        <userdata name="drag">deny</userdata>
    </row>
</rows>

And then define the event handler as follows:

mygrid.attachEvent("onBeforeDrag",function(id){
    // denies dragging if user data exists
    if (grid.getUserData(id,"drag")=="deny") return false;
    // allows dragging in any other case
    return true;
}

From now on, each time d-n-d starts, user data of the dragged item will be checked, and the row can be dragged only if it isn't marked as 'denied'.

Denying dropping to specific positions

To deny dropping to some positions (e.g. to allow dragging A to B, but deny dragging A to C), you can use the onDragIn or onDrag events and return false each time you want to block the operation.

Let's assume you load data from an XML file and want to deny dropping items A to positions of items B. For this purpose mark rows based on the mentioned rule in any possible way, e.g. by userdata:

<rows>
    <row id="1"> <cell> data 1 </cell> <userdata name="drag">A</userdata> </row>
    <row id="2"> <cell> data 2 </cell> <userdata name="drag">B</userdata> </row>
</rows>

And then define event handler as follows:

mygrid.attachEvent("onDragIn",function(sid,tid){
    // nothing can be dropped in a row marked as 'B'
    if (mygrid.getUserData(tid,"drag")=="B") return false;
    // allows dropping in any other cases
    return true;
});
//or
mygrid.attachEvent("onDrag",function(sid,tid){
    if (mygrid.getUserData(tid,"drag")=="B") return false;
    return true;
});

The described scenario make more sense for TreeGrid, but it can also be used with some customization in case of a plain Grid.

Switching between 'move' and 'copy' behaviors

By default, rows are moved (not copied) during the d-n-d operation.

To add some custom rules to this behavior use the moveRowTo() method.

mygrid.attachEvent("onDrag",function(sid,tid){
    // moves an item as a sibling of some other element
    mygrid.moveRowTo(sid,someID,"copy","sibling");
    // blocks default d-n-d
    return false;
});

To enable the 'copy' behavior, set the enableMercyDrag command to true.

mygrid.enableMercyDrag(true);

You have one more way to set the 'copy' behavior - the dragContext object, available only for the onDrag event.

mygrid.attachEvent("onDrag",function(sid,tid){
    // copies an item instead of moving it
    if (!some_check(sid,tid)) mygrid.dragContext.mode="copy";
    return true;
});

In case of dhtmlxTreeGrid, you have the method setDragBehavior() to set the desired type of behavior:

mygrid.setDragBehavior("child"); // the item is dropped as a child of the target item

In order not to move or copy an item and apply just some custom logic to it, just return true within the onDrag event handler.

mygrid.attachEvent("onDrag",function(sid,tid){
    some_custom_code(sid,tid);
    return false;
});

Customizing the 'drag' action

The 'drag' action can be customized with the help of the onDragIn, onDragOut events.

Let's consider the following scenario: each time the dragged item enters the borders of any possible dropping its background is coloured in red. When the item is moved outside the dropping's borders - the background is cleared.

// sid - id of dragged item , tid - id of dropping item
mygrid.attachEvent("onDragIn",function(sid,tid,sgrid,tgrid){
    if (tid)    // tid may be null if dropping is in the grid body
        mygrid.setRowTextStyle(tid,"background-color:red;");// marks current dropping
    return true;
})

mygrid.attachEvent("onDragOut",function(tid){
    if (tid)
        mygrid.setRowTextStyle(tid,""); // clears styles set on the previous step
})

Dragging between several grids

To customize the 'drag' action between several grids, use the gridToGrid property.

//snippet just copies the data, without applying any modifications to it
mygrid.gridToGrid = function(rowId,sgrid,tgrid){
      var z=[];
      for (var i=0; i<sgrid.getColumnCount(); i++) //applies to each cell in source grid
          z[i]=sgrid.cellById(rowId,i).getValue(); // prepares data for the target grid
      return z;
}

In case when d-n-d occurs between dhtmlxTree and dhtmlxGrid, the same can be done by using the treeToGridElement and gridToTreeElement elements:

//from dhtmlxGrid to dhtmlxTree
mygrid.gridToTreeElement = function(tree,treeID,gridID){
    // takes data from 1st column as value for tree
    return this.cellById(gridId,0).getValue();
}

//from dhtmlxTree to dhtmlxGrid
mygrid.treeToGridElement = function(tree,treeID,gridID){
    // sets the tree text as a value of 1st column in the grid
    var z=[treeObj.getItemText(treeID)];
    return z;
}

Related events

The following events are generated during the d-n-d process:

  • onBeforeDrag - fires when drag operation is started; the event can be blocked;
  • onDragIn - fires when an item is dragged to another potential target; the event can be blocked;
  • onDragOut - fires when an item is dragged out from the potential target;
  • onDrag - fires when an item is dragged to another target and the mouse is released; the event can be blocked;
  • onDrop - fires when an item is already placed in its final position. It can be used to catch the moment when the operation is finished.

In the default scenario there is no need to use any of the mentioned events, because the grid will process all the operations on its own. But sometimes the default behavior needs to be customized. In this case the mentioned events can be used.

Related sample: Drag-and-drop events

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Saving Grid Configuration in Cookies DHTMLX Docs

Documentation
  • Common Operations with Grid and its Elements
  • Column Types
  • Headers and Footers
  • Freezing Columns (the 'Split' Mode)
  • Enabling Keyboard Navigation
  • Managing the Selection
  • Drag-and-Drop Support
  • Saving Grid Configuration in Cookies
    • Common
    • Some tips on automatic saving
  • Configuring Grid from XML
  • Configuring Grid from JSON
  • Grouping Columns
Start Grid Configuring Grid

Saving Grid Configuration in Cookies

Common

The library provides a number of methods to manipulate cookies. Methods can take the following parameters:

  1. name - (optional) the cookie name;
  2. param - (optional) additional parameters added to cookie.

The stated functionality requires PRO version of the dhtmlxGrid (or DHTMLX Suite) package.

Using cookies

mygrid = new dhtmlXGridObject('gridbox');
mygrid.enableAutoSaving("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");

Table 1 The cookies API
Method | Description
Automatic saving to cookie
enableAutoSaving(name,param) | enables automatic saving of the columns order (an array of ids), size and sorting type
enableAutoHiddenColumnsSaving(name,param) | enables automatic saving of the columns states (hidden/shown)
enableAutoSizeSaving(name,param) | enables automatic saving of the columns sizes
enableOrderSaving(name,param) | enables automatic saving of the columns order (an array of ids)
enableSortingSaving(name,param) | enables automatic saving of the columns sorting types
Manual saving to cookie
saveHiddenColumnsToCookie(name,param) | saves the columns states (hidden/shown)
saveOrderToCookie(name, param) | saves the columns order (an array of ids)
saveSortingToCookie(name,param) | saves the columns sorting types
saveSizeToCookie(name,param) | saves the columns sizes
Loading from cookies
loadHiddenColumnsFromCookie(name) | loads the columns states (hidden/shown) from cookie
loadOrderFromCookie(name) | loads the columns order (an array of ids) from cookie
loadSizeFromCookie(name) | loads the columns sizes from cookie
loadSortingFromCookie(name) | loads the columns sorting types from cookie
Clearing cookies
clearConfigCookie(name) | clears the specified cookie

Some tips on automatic saving

While using automatic saving remember the following rules:

  1. the 'enable' and 'load' methods are called after grid initialization but before data loading;
  2. if you need to restore several cookie data you should follow the specific calling order. The correct order is shown in the code snippet below;
  3. the 'enable' methods must be called only AFTER calling the 'load' methods.

Automatic saving to cookie. The order of calling the related methods

mygrid = new dhtmlXGridObject('gridbox');
...
mygrid.init(); // firstly, initialize the grid

mygrid.loadOrderFromCookie();  // then restore the required data
mygrid.loadSizeFromCookie();
mygrid.loadSortingFromCookie();
mygrid.loadHiddenColumnsFromCookie();

mygrid.enableAutoSizeSaving(); // enable saving cookies
mygrid.enableSortingSaving();
mygrid.enableOrderSaving();
mygrid.enableAutoHiddenColumnsSaving();

mygrid.load("data.php");   // load data to the grid

Related sample: Saving/restoring columns' states

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring Grid from XML DHTMLX Docs

Documentation
  • Common Operations with Grid and its Elements
  • Column Types
  • Headers and Footers
  • Freezing Columns (the 'Split' Mode)
  • Enabling Keyboard Navigation
  • Managing the Selection
  • Drag-and-Drop Support
  • Saving Grid Configuration in Cookies
  • Configuring Grid from XML
    • Running grid's methods from XML
  • Configuring Grid from JSON
  • Grouping Columns
Start Grid Configuring Grid

Configuring Grid from XML

Grid can be configured directly in the XML file that the data is loaded from. In this case, you will need only 2-3 script commands to get the grid up and running. Moreover, you can also run grid's methods from an XML file.
All the necessary settings, e.g. columns types, are specified inside <head></head> tag.

Do not call the init method when configuring the grid from XML.

Initializing the grid configured through XML

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../codebase/imgs/");
mygrid.load("grid.xml"); // XML containing configuration block together with data

"grid.xml" file

<rows>
 <head>
   <column width="50" type="ed" align="right" color="white" sort="str">Sales</column>
   <column width="80" type="co" align="left" sort="str">
        <option value="1">1 Day</option>
        <option value="7">1 Week</option>
        ...
   </column>

   <beforeInit>
        <call command="methodName">
            <param>string value</param>
        </call>
   </beforeInit>
   <afterInit>
        <call command="methodName">
            <param>string value</param>
        </call>
   </afterInit>

    <settings>
        <colwidth>%</colwidth> //'says' to use width in percents instead of pixels
    </settings>
 </head>
 <row>
     <cell>value1</cell>
     <cell>value2</cell>
 </row>
</rows>

Related sample: Run commands from XML

Possible attributes for the <column></column> tag:

  • width - the column's width in pixels
  • type - the column's type
  • align - the text alignment in the column
  • color - the background color of the column
  • sort - the sorting type of the column
  • id - the column's id
  • hidden - if the attribute is set, the column will be hidden.

Running grid's methods from XML

<rows>
    <head>
        <beforeInit>
            <call command="setSkin"><param>xp</param></call>
        </beforeInit>
        <afterInit>
            <call command="setColumnHidden"><param>1</param><param>true</param></call>
        </afterInit>
    </head>
</rows>

Related sample: Run commands from XML

The same but called with script:

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue")
mygrid.setHeader("Book name,Terms and Conditions,#cspan,#cspan");
mygrid.init();
mygrid.setColumnHidden(1,true);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring Grid from JSON DHTMLX Docs

Documentation
  • Common Operations with Grid and its Elements
  • Column Types
  • Headers and Footers
  • Freezing Columns (the 'Split' Mode)
  • Enabling Keyboard Navigation
  • Managing the Selection
  • Drag-and-Drop Support
  • Saving Grid Configuration in Cookies
  • Configuring Grid from XML
  • Configuring Grid from JSON
    • Header-related settings
  • Grouping Columns
Start Grid Configuring Grid

Configuring Grid from JSON

The grid can be configured directly in the JSON data source that the data is loaded from. You need only 2-3 script commands to get the grid up and running.

Configuring Grid from JSON

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../codebase/imgs/");
mygrid.setSkin("dhx_skyblue");
mygrid.load("grid.json","json");// JSON containing config block together with data

You can specify data either in the basic JSON format or in the native JSON format. To learn more about these formats, read the Exploring Supported Data Formats article.

Basic JSON format

"grid.json" file

{
    head:[
       { width:50,  type:"dyn",   align:"right",  sort:"int", value:"Sales"},
       { width:150, type:"ed",    align:"left",   sort:"str", value:"Book Title"},
       { width:100, type:"ed",    align:"left",   sort:"str", value:"Author"},
       { width:80,  type:"price", align:"right",  sort:"str", value:"Price"},
       { width:80,  type:"ch",    align:"center", sort:"str", value:"In Store"},
       { width:80,  type:"co",    align:"left",   sort:"str", value:"Shipping",
        options:[
          { id:1, value:"Fast"},
          { id:2, value:"Slow"},
        ]}
   ],
    rows:[
        {  id:1001,
          data:[
            "100",
               "A Time to Kill",
               "John Grisham",
               "12.99",
               "1",
               "05/01/1998"] },
       {  id:1002,
          data:[
               "1000",
               "Blood and Smoke",
               "Stephen King",
               "0",
               "1",
               "01/01/2000"] },
       {  id:1003,
          data:[
               "-200",
               "The Rainmaker",
               "John Grisham",
               "7.99",
               "0",
               "12/01/2001"] }
]}

Native JSON format

Please note that you need to define the columns' ids using the setColumnIds method in accordance with the keys names in the "key:value" pairs of data objects. It will ensure that values will be loaded into the right columns.

"grid.json" file

{
 head:[
  {id:"sales",  width:50,  type:"dyn",  align:"right", sort:"int", value:"Sales"},
  {id:"title",  width:150, type:"ed",   align:"left",  sort:"str", value:"Book Title"},
  {id:"author", width:100, type:"ed",   align:"left",  sort:"str", value:"Author"},
  {id:"price",  width:80,  type:"price", align:"right",  sort:"str", value:"Price"},
  {id:"instore",  width:80, type:"ch",   align:"center", sort:"str", value:"In Store"},
  {id:"shipping", width:80, type:"co",   align:"left",   sort:"str", value:"Shipping"}
 ],
 data:[
    {
      id:1001,
      sales:"100",
      title:"A Time to Kill",
      author:"John Grisham",
      price:"12.99",
      instore:"1",
      shipping:"05/01/1998"
    },
    {
      id:1002,
      sales:"1000",
      title:"Blood and Smoke",
      author:"Stephen King",
      price:"0",
      instore:"1",
      shipping:"01/01/2000"
    },
    {
      id:1003,
      sales:"-200",
      title:"The Rainmaker",
      author:"John Grisham",
      price:"7.99",
      instore:"0",
      shipping:"12/01/2001"
    }
 ]}

Header-related settings
  1. id - (string|number) the column's id
  2. width - (number) the column's width
  3. type - (string) the column's type
  4. align - (string) the column's alignment
  5. sort - (string) the sorting type
  6. value - (string) the column's title
{
 head:[
  {id:"sales",   width:50,  type:"dyn", align:"right", sort:"int", value:"Sales"},
  {id:"title",   width:150, type:"ed",  align:"left",  sort:"str", value:"Book Title"},
  {id:"author",  width:100, type:"ed",  align:"left",  sort:"str", value:"Author"},
  {id:"price",   width:80,  type:"price", align:"right",  sort:"str", value:"Price"},
  {id:"instore", width:80,  type:"ch",   align:"center", sort:"str", value:"In Store"},
  {id:"shipping", width:80, type:"co",   align:"left",   sort:"str", value:"Shipping"}
 ]}

Related sample: Loading from JSON

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Grouping Columns DHTMLX Docs

Documentation
  • Common Operations with Grid and its Elements
  • Column Types
  • Headers and Footers
  • Freezing Columns (the 'Split' Mode)
  • Enabling Keyboard Navigation
  • Managing the Selection
  • Drag-and-Drop Support
  • Saving Grid Configuration in Cookies
  • Configuring Grid from XML
  • Configuring Grid from JSON
  • Grouping Columns
    • Common technique
    • Collapsing a group
Start Grid Configuring Grid

Grouping Columns

In general, dhtmlxGrid displays data on a page without any grouping.
To change dhmlxGrid layout you can group data by columns or rows (read the article Grouping rows).

Grouping columns will produce a view where the specified number of columns can be collapsed into one.

It should be noted that dhtmlxGrid is intended to be used with a big number of rows, not columns.
In case the number of columns is more than 50, the component's performance slows down drastically. So we recommend to use the mentioned functionality only in exceptional cases.

Common technique

To group some columns in one you should use shortcut #collapse while specifying the header.

Syntax of the shortcut:

{collapse}size:titles
  • size - the number of columns in the group;
  • titles - the header titles. First n columns (specified by the size parameter) will make up a group. The title of the first specified column is the title of the group in the collapsed state.

Activating grouping columns in the grid

mygrid = new dhtmlXGridObject('gridbox');
...
mygrid.setHeader("Sales,{#collapse}2:Book Title,Author,Price");

If you want to group some sub-header columns, you should use the same technique but with the method attachHeader().

Collapsing a group

To collapse some specified group use the method collapseColumns(col). As a parameter the method takes the index of the head(first) column of the group (zero-based numbering).

grid.collapseColumns(2);

To expand a group use the expandColumns method.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Managing Data in Grid DHTMLX Docs

Documentation
  • dhtmlXGrid API
  • Cell-Level API
  • Creating Grid on a Page
  • Loading and Storing Data
  • Configuring Grid
  • Managing Data in Grid
    • Iterating Over Data
    • Sorting Data
    • Filtering Data
    • Searching in Grid
    • Grouping Data by Rows
    • Formatting Number and Date Values
    • Statistics Counters
    • Validating Data Items
    • Using Math Formulas for Data
    • Clipboard Operations
    • Providing Undo/Redo Operations
  • Styling Grid
  • Integrating with Other Components
Start Grid

Managing Data in Grid

  • Iterating Over Data
  • Sorting Data
  • Filtering Data
  • Searching in Grid
  • Grouping Data by Rows
  • Formatting Number and Date Values
  • Statistics Counters
  • Validating Data Items
  • Using Math Formulas for Data
  • Clipboard Operations
  • Providing Undo/Redo Operations
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Iterating Over Data DHTMLX Docs

Documentation
  • Iterating Over Data
    • Iterating over rows
    • Iterating over cells
  • Sorting Data
  • Filtering Data
  • Searching in Grid
  • Grouping Data by Rows
  • Formatting Number and Date Values
  • Statistics Counters
  • Validating Data Items
  • Using Math Formulas for Data
  • Clipboard Operations
  • Providing Undo/Redo Operations
Start Grid Managing Data in Grid

Iterating Over Data

In this chapter you'll find out how to implement iterators for dhtmlxGrid.

  • Iterating over rows
    • Standard for loop;
    • The forEachRow method.
    • The forEachRowInGroup method (when you apply grouping to the grid).
  • Iterating over cells
    • Standard for loop;
    • The forEachCell method.

Iterating over rows

Standard for loop

The stated below technique isn't used in the smart rendering mode.

for (var i=0; i<mygrid.getRowsNum(); i++){
    mygrid.CellByIndex(i,0).setValue(i); // i - the index of a row in the grid
};
  • The loop variable i is the row index (don't confuse with the row id). Numbering is zero-based;
  • The order of iteration is the order of rows in the grid;
  • In the paging mode only the current page is iterated;
  • If you apply filtering to the grid, only the rows that meet filtering criteria will be iterated;

Method forEachRow()

The method forEachRow iterates over all rows in the grid.

mygrid.forEachRow(function(id) {
    mygrid.CellById(row_id,0).setValue(id); //id - the row id
});
  • The loop variable is the row id;
  • Basically, the order of iteration is the order in which rows were added to the grid, but not necessarily;
  • In the paging or smart rendering mode all the already parsed rows will be iterated;
  • If you apply filtering to the grid, all the rows will be iterated, no matter if they meet filtering criteria or not;

Related sample: Multiline cells

The forEachRowInGroup() method for the grouped grid

When you apply grouping to the grid, you can use the forEachRowInGroup method to provide iteration over rows of a specific group.

mygrid.forEachRowInGroup(name,function(id){
    mygrid.CellById(row_id,col_ind).setValue(id); //id - the row id
});

where name is the key value of the group.

Iterating over cells

Standard for loop

The stated below technique isn't used in the smart rendering mode.

for (var i=0; i<mygrid.getColumnCount(); i++){
    alert(mygrid.CellById(row_id,col_ind).getValue()); //i-index of a column (zero-based numbering)
}
  • The loop variable is the column id;
  • The order of iteration is the order of columns in the grid;

Method forEachCell()

The method forEachCell iterates over all cells of the specified row.

mygrid.forEachCell(row_id,function(cellObj,col_index){
    cellObj.setValue(col_index)
);
  • The loop variable is the column id;
  • The order of iteration is the order of columns in the grid;
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Sorting Data DHTMLX Docs

Documentation
  • Iterating Over Data
  • Sorting Data
    • Sorting by a single click on the header
    • Programmatic sorting
    • Custom sorting function
    • Stable sorting
    • Sorting by multiple columns
    • Sorting events
    • Sorting combo's labels
    • Partial sorting
  • Filtering Data
  • Searching in Grid
  • Grouping Data by Rows
  • Formatting Number and Date Values
  • Statistics Counters
  • Validating Data Items
  • Using Math Formulas for Data
  • Clipboard Operations
  • Providing Undo/Redo Operations
Start Grid Managing Data in Grid

Sorting Data

The grid allows you to sort data rows on the client side (for server-side sorting, use the dhtmlxConnector library).

There are 2 ways to invoke sorting in the table:

  1. By a single click on the header of a column;
  2. By API call (can be called from some event or action, i.e. button click or page load).

Sorting by a single click on the header

When you click on the header, the grid starts displaying a special control indicating which column the grid is currently sorted by and the direction of this sorting (ascending or descending). Each next click on the same header will reverse the sorting direction.

Columns can have different type of content (numbers, strings, dates) and each type of content requires its own specific way of sorting.

There are 4 predefined sorting types:

  1. int
  2. date
  3. str (case-sensitive string)
  4. na - an unsorted column (the column won't react on the header click and the sortRows method)

To assign the desired types to columns and enable sorting for them, call the setColSorting method for the grid.

Sorting configuration

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name, Email, Age");
mygrid.setColSorting("int,str,na,str"); mygrid.init();

Related sample: Loading from JSON

Programmatic sorting

To invoke sorting on some event or action, i.e. on the button click or page load, use the sortRows method:

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name, Email, Age");
mygrid.init();

mygrid.sortRows(1,"str","asc"); //ascending sorting of the second column

Custom sorting function

If you need, you can specify your custom sorting type and apply it to a column. You should specify the related logic in a function and set this function for the required column in the setColSorting method:

The custom sorting function will be called for each pair of adjacent values, and it will return 1,-1 or 0:

  • 1 - an object with the first value in pair must go before the second one.
  • -1 - the second object goes before the first.
  • 0 - the order of both objects doesn't change.

Note, the length of the function name must be more than 5 symbols.

For example, if you want to sort some column by the number of symbols in the value, use the code as in:

Creating custom sorting type

function sort_custom(a,b,order){
    var n=a.length;
    var m=b.length;
    if(order=="asc")
        return n>m?1:-1;
    else
        return n<m?1:-1;
};
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name, Email, Age");
mygrid.setColSorting("sort_custom,str,int");mygrid.init();

Related sample: Custom sorting routine

Also, you can call the setCustomSorting method to assign a custom sorting function to a column:

function sort_custom(a,b,order){
    var n=a.length;
    var m=b.length;
    if(order=="asc")
        return n>m?1:-1;
    else
        return n<m?1:-1;
};
mygrid.setCustomSorting(sort_custom,1);

Related sample: Custom sorting routine

Samples of custom sorting functions

Case-insensitive string sorting

dhtmlxGrid sorts strings in case-sensitive order by default, i.e. takes into consideration the letters' case. To make the sorting case-insensitive use the code as in:

function str_custom(a,b,order){
    return (a.toLowerCase()>b.toLowerCase()?1:-1)*(order=="asc"?1:-1);
};

mygrid.setCustomSorting(str_custom,1);

Date sorting

This sorting function can be applied to data of the format 'dd/mm/yyyy':

function date_custom(a,b,order){
    a=a.split("/")
    b=b.split("/")
    if (a[2]==b[2]){
        if (a[1]==b[1])
            return (a[0]>b[0]?1:-1)*(order=="asc"?1:-1);
        else
            return (a[1]>b[1]?1:-1)*(order=="asc"?1:-1);
    } else
        return (a[2]>b[2]?1:-1)*(order=="asc"?1:-1);
};

mygrid.setCustomSorting(date_custom,1);

Time sorting

This sorting function can be applied to data of the format '14:56':

function time_custom(a,b,order){
    a=a.split(":")
    b=a.split(":")
    if (a[0]==b[0])
        return (a[1]>b[1]?1:-1)*(order=="asc"?1:-1);
    else
        return (a[0]>b[0]?1:-1)*(order=="asc"?1:-1);
};

mygrid.setCustomSorting(time_custom,1);

Stable sorting

The default sorting routine used by Grid is a quick sorting algorithm which is unstable (it means that rows with the same value may change their position after sorting). To enable the stable sorting algorithm in the grid use the enableStableSorting method:

grid.enableStableSorting(true);

Basically, the stable sorting is a bit slower than the default one, so enable this mode only if it's really necessary.

Sorting by multiple columns

The sorting routine is designed to sort the grid by values of a single column by default.
But there are situations when you may need to sort the grid by multiple columns, for example, to sort books by the author at first, and then by the book's rating.

To sort the grid by multiple columns use one of the following techniques:

  1. The stable sorting. In this case the rows with the same values will not change their positions, and it will help to organize sorting by multiple columns:
    grid.enableStableSorting(true);
grid.sortRows(1,"str","asc");    // sort by the sibling column
grid.sortRows(0,"str","des");    // sort by the main column
    As a result, the grid will be sorted by a column of less importance and after that - by a column of higher importance. In combination with stable sorting it will give the same result as sorting by two columns.
  2. An extended version of the custom sorting function:
    function sort_by_two(a,b,order,aid,bid){
    if (a==b){
        var a2=grid.cells(aid,1).getValue();
        var b2=grid.cells(bid,1).getValue();
        if(order=="asc") { return a2>b2?1:-1; }
        else { return a2<b2?1:-1; }
    }
    if(order=="asc") { return a>b?1:-1; }
    else { return a<b?1:-1; }
}
    where
    • a - 1st comparable value
    • b - 2nd comparable value
    • order - the sorting direction: "asc" or "des"
    • aid - the id of the row that contains the 1st comparable value
    • bid - the id of the row that contains the 2nd comparable value

Sorting events

dhtmlxGrid provides the onBeforeSorting event to add custom behaviour to default sorting.

For example, to implement server-side sorting without dhtmlxConnector or some other means you can use the onBeforeSorting event as in:

mygrid.attachEvent("onBeforeSorting",function(ind,type,direction){
    this.clearAll(); //clears grid
    this.load("some.url?dir="+dir+"&amp;ind="+ind);//loads new data from the server
                                                      //in the required order
    this.setSortImgState(true,ind,direction); //sets a correct sorting image
    return false;
});

Sorting combo's labels

dhtmlxGrid uses cells' values for sorting by default. To sort combo items by labels (which may differ from cell values), use a custom sorting function:

function custom_1(a,b,ord,a_id,b_id){
    a=mygrid2.cells(a_id,5).getText();
    b=mygrid2.cells(b_id,5).getText();
    return ord=="asc"?(a>b?1:-1):(a>b?-1:1);
};

mygrid.setCustomSorting(custom_1,5);
//5 - the index of the column that will be sorted

Partial sorting

To sort just a part of grid's rows and leave the remaming part fixed, use the following technique:

function custom_sort(a,b,ord,aid,bid) {
    var aid=aid.split("_");
    var bid=bid.split("_");
    if (aid[0]=="top") return 1;
    if (bid[0]=="top") return -1;

    return ((a>b)?1:-1)*(ord=="asc"?1:-1);
}

The above code moves rows with ID=“top_*” to the top of the grid and sorts other rows in the required order.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Filtering Data DHTMLX Docs

Documentation
  • Iterating Over Data
  • Sorting Data
  • Filtering Data
    • Filters in the header
    • HTML input as a filter for the grid
    • Programmatic Filtering
    • Redefining default filter logic
    • Filtering events
    • Adding/deleting rows in the filtered grid
  • Searching in Grid
  • Grouping Data by Rows
  • Formatting Number and Date Values
  • Statistics Counters
  • Validating Data Items
  • Using Math Formulas for Data
  • Clipboard Operations
  • Providing Undo/Redo Operations
Start Grid Managing Data in Grid

Filtering Data

The library provides a special extension for filtering dhtmlxGrid data on the client side (for server-side filtering, use the dhtmlxConnector library).

Filters in the header

You can define a built-in auto filter in the header or in the footer of a column. The following types of filters are available:

  • text_filter - a text filter. Retrieves values which contain mask defined through text field.
  • select_filter - a select filter. Retrieves values which contain mask defined through dropdown list of possible values.
  • combo_filter - a filter based on the dhtmlxCombo component. Retrieves values which contain mask defined through combo box.
  • text_search - an input box. Doesn't filter the grid but moves the selection to the nearest row containing a text input.
  • numeric_filter - a text filter that allows using comparison operators in it. Retrieves values which contain mask defined through text field.
    The possible comparison operators are:
    • '=' - equal to;
    • '>' - greater than;
    • '<' - less than;
    • '?' - less or equal to;
    • '>=' - greater or equal to;
    • 'n1..n2' - a range of values.

Built-in filters are set by the method attachHeader(). Note, when specifying a filter you should write '#' before its name.

General specifying auto filters for columns

mygrid = new dhtmlXGridObject('gridbox');

mygrid.setHeader("Book Title,Author,Price");
mygrid.attachHeader("#text_filter, #select_filter,#numeric_filter");
...

In order not to specify a filter for some of columns use the null value:

Specifying an auto filter for a particular column of the header

mygrid.setHeader("Book Title,Author,Price");
mygrid.attachHeader("#text_filter, , ,");

Note, each time you start typing text in such a filter, dhtmlxGrid invokes the filterByAll() method. Each time the method is called, all data is re-filtered (previous results aren't preserved).

AND logic

When you specify filters in several columns, dhtmlxGrid applies the AND logic to them by default, i.e. the grid will display just the records that meet all criteria at once.

OR logic

In case you want to apply OR logic (display records that meet at least one of the criteria) you should redefine the filterByAll() method. For example, it can look like this:

Implementing OR logic for filters

mygrid = new dhtmlXGridObject('gridbox');

mygrid.setHeader("Book Title,Released");
mygrid.attachHeader("#text_filter, #select_filter");
mygrid.setColumnIds("title,year");
...
mygrid.init();

mygrid.filterByAll=function(){
    //gets filter values
        var title = this.getFilterElement(0).value;
        var year = this.getFilterElement(1).value;
    //unfilters if values were not selected
        if (!title  && !year) return this.filter();
    //filters using OR logic
        this.filter(function(data){
            if (data == year) return true;
            if (data!=-1) return true;
            return false;
        });
};

In order to programmatically simulate entering specific data in a header filter you can use the following technique:

var inp = mygrid.getFilterElement(3); // '3'-index of the column (zero-based numbering)
inp.value = 12.99; // inputted value
mygrid.filterByAll();// invokes re-filtering

HTML input as a filter for the grid

An HTML input can act as an auto filter for a specific column of the grid. It's achieved with the help of the makeFilter() method.

In addition to 'input', you can use 'select' and 'div' HTML elements.

'input' and 'select' serve as text and select filters.
When you specify the id of the 'div' element, the grid creates a combo filter based on that 'div' and populated with unique values from the specified column. Note, to use 'div' as a filter you should include on the page the dhtmlxcombo.js file.

In case of the auto filter, filtering will be invoked automatically as soon as you start typing something in the input.

<input type="text" id="textFilter"></input>
<select type="text" id="selectFilter"></select>

<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setHeader("Book Title,Author,Price");
...
mygrid.init();

mygrid.makeFilter("textFilter",0);//params:input's id, column's index(0-based numbering)
//items for options list added automatically according to column the control assigned to
mygrid.makeFilter("selectFilter",1);
</script>

Programmatic Filtering

If you want to invoke filtering programmatically, you may use 2 methods:

  • filterBy() - filters the specified column by some value (string or function);
  • filterByAll() - invokes auto filters (defined in the header of set by the method makeFilter()).

Method filterBy()

The method filterBy(column, value) allows you to filter the specific column of the grid by the specified value:

The second parameter can be both a string and a function.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setHeader("Sales, Book Title,Author");
...
mygrid.filterBy(1, "John Grisham"); // filters the 2nd column by value "John Grisham"
mygrid.filterBy(0,function(a){ return (a<500);}) // true/false - shows/hides a row

Note, every next call of the filterBy() method will reset the grid to its initial state and filter it from the start. To specify several rules (of AND logic) for one and the same column you should specify an additional parameter in the method.

Programmatic filtering of the column by several criteria

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setHeader("Sales, Book Title,Author");
...

mygrid.filterBy(3,"John Grisham");// filters the 2nd column by value "John Grisham"
mygrid.filterBy(3,"Stephen King",true);//each next method's call has 3rd param - true

Method filterByAll()

The method allows you to programmatically invoke filtering by auto filters.

You can use this method to redefine the default logic of the built-in filters. For example, to define OR logic or simulate entering some data in the filter.

Redefining default filter logic

Any filter you assign to the grid (both by adding it to the header and by creating through the makeFilter() function) can use a custom logic instead of the default one.

To change the filtering logic of a filter assigned to the grid you should redefine its _filter function as in:

grid.getFilterElement(col_index)._filter = function(){
     // your custom logic
}

For example, you can use the following definition to create a filter (based on text_filter) that makes a search in all columns of the grid:

mygrid.getFilterElement(0)._filter = function(){
    var input = this.value; // gets the text of the filter input
    return function(value, id){
        for(var i=0;i<mygrid.getColumnsNum();i++){ // iterating through the columns
            var val=mygrid.cells(id,i).getValue() // gets the value of the current cell
            // checks if the value of a cell has the text from the filter
            if (val.toLowerCase().indexOf(input.toLowerCase())!==-1){
                return true;
            }
        }
        return false;
    }
}

Filtering events

The library provides the following filtering-related events:

  • onFilterStart - fires when filtering is triggered in some input (doesn't occur for direct filterBy() calls);
  • onFilterEnd - fires after filtering is finished (doesn't occur for direct filterBy() calls);
  • onCollectValues - fires when the select filter collects values for the options list.

Adding/deleting rows in the filtered grid

The grid doesn't preserve row changes (adding, deleting), which are made when the grid is filtered. After resetting back to the not-filtered state, the grid restores deleted rows and removes the newly created ones. To work around the issue you can use the following order of actions:

  1. Unfilter the grid;
  2. Add/remove the desired rows;
  3. Filter the grid back.

Adding rows in the filtered grid

mygrid.filterBy(0,""); //unfilters the grid
mygrid._f_rowsBuffer = null; //clears the cache

grid.addRow(...);// adds some row

grid.filterByAll();// filters the grid back

Related sample: Filtering

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Searching in Grid DHTMLX Docs

Documentation
  • Iterating Over Data
  • Sorting Data
  • Filtering Data
  • Searching in Grid
    • Search box in the header
    • An HTML input as a search box
    • Programmatic searching
  • Grouping Data by Rows
  • Formatting Number and Date Values
  • Statistics Counters
  • Validating Data Items
  • Using Math Formulas for Data
  • Clipboard Operations
  • Providing Undo/Redo Operations
Start Grid Managing Data in Grid

Searching in Grid

Searching is case-insensitive. If you use the dhtmlxSuite package you don't need to include additional extension files.

Search box in the header

A built-in search box is provided as a type of built-in filters - 'text_search' and set with the help of the method attachHeader. Read more about built-in filters in the article Filtering.

Searching is invoked automatically as soon as you start typing something in the input. It doesn't filter the grid but moves the selection to the nearest row containing the input text.

Specifying a search box in the header

mygrid = new dhtmlXGridObject('gridbox');

mygrid.setHeader("Book Title,Author,Price");
mygrid.attachHeader("#text_search,,");
...

Related sample: Search box

An HTML input as a search box

A standard HTML input can be used as a search box for dhtmlxGrid.

To make auto filter from an input you should use the method makeSearch():

<input
    type="text"
    title="search"
    placeholder="Search the book..."
    id="searchFilter"
></input>

<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setHeader("Sales,Book Title,Author,Price");
...
mygrid.init();

mygrid.makeSearch("searchFilter",1);// params:input id,column index (0-based numbering)
</script>

Programmatic searching

If you need to get cells that meet some criteria, you can use the method findCell() to make programmatic searching.

The method takes 3 parameters:

  • value - the search criterion;
  • index - the index of the column (zero-based numbering);
  • flag - sets whether just the first occurrence or all occurrences should be returned .
//searches the specified value throughout the grid
var searchResult=mygrid.findCell("alfa");

//searches the specified value in the second column. Returns just the first occurrence
var searchResult=mygrid.findCell("alfa",1,true);

The method returns an array of the appropriate results looking like:

The format of data returned by method findCell()

//items: the row id and the cell index
[
    ["row1","3"]
    ["row5","5"]
]
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Grouping Data by Rows DHTMLX Docs

Documentation
  • Iterating Over Data
  • Sorting Data
  • Filtering Data
  • Searching in Grid
  • Grouping Data by Rows
    • Common technique
    • Expanding/collapsing a group
    • Customizing group summary rows (built-in math)
    • Group iterator
  • Formatting Number and Date Values
  • Statistics Counters
  • Validating Data Items
  • Using Math Formulas for Data
  • Clipboard Operations
  • Providing Undo/Redo Operations
Start Grid Managing Data in Grid

Grouping Data by Rows

In general, dhtmlxGrid displays data on the page without any grouping.
To change dhmlxGrid layout, you can group data by rows or by columns (read the article Grouping columns).

Grouping can't be used with the Paging and Smart Rendering data loading modes.

Grouping rows will produce the view where rows are filtered by the values of the specified column.

  • The group summary rows shows the group key and the count of items in the group by default;
  • Grouping doesn't require specific XML formatting;
  • You can group/ungroup your grid and change the grouping parameters dynamically;
  • If data in the column (the grid was grouped by) is changed, the rows automatically rearrange to fit the group;
  • Groups can be expanded/collapsed programatically.

Common technique

Grouping is invoked by a simple command groupBy(col).

  • col is the index of a column (zero-based numbering) the grid will be grouped by;
  • The method must be invoked only when all data is loaded;
  • If the method is called several times with different parameters, data is grouped according to the last one called.

Activating grouping rows in the grid

mygrid = new dhtmlXGridObject('gridbox');
...
mygrid.load("../common/grid.xml",function(){
    mygrid.groupBy(2);// the grid is grouped by the second column
});

To ungroup a grid and bring the standard view back you should call the method unGroup().

Ungrouping the grid

mygrid = new dhtmlXGridObject('gridbox');
...
mygrid.unGroup();

Related sample: Grouping rows by column

Expanding/collapsing a group

There are 4 methods that can be used in the mentioned context:

  1. expandGroup() - expands a group with the specified key;
  2. collapseGroup() - collapses a group with the specified key;
  3. expandAllGroups() - expands all groups;
  4. collapseAllGroups() - collapses all groups.
mygrid.expandGroup('John Grisham');
mygrid.collapseGroup('Stephen King');
mygrid.expandAllGroups();
mygrid.collapseAllGroups();

Customizing group summary rows (built-in math)

You can customize the presentation of the group summary rows to meet your needs.

There are 2 ways for this:

  1. To specify the mask of a row. In this case, each cell of the related column can show some aggregate value calculated over all the column values.
  2. To define a handler function.

Row mask

The mask for the summary rows is set through the second (optional) parameter of the groupBy() method. It's an array, each item of which is mapped to the related column.

Customizing the group summary rows through the row mask

mygrid.groupBy(2,["#stat_max","#title","","#stat_total"]);

The possible aggregate shortcuts:

  • title - displayes the group key;
  • stat_total - calculates the total of values in a group;
  • stat_max - calculates the maximum value in a group;
  • stat_min - calculates the minimum value in a group;
  • stat_average - calculates the average value in a group;
  • stat_count - calculates the count of records in a group;
  • #cspan (or empty quotes '') - used to not present anything in a cell (both variants lead to one and the same effect).

Note, the stat-based values are rendered using the same data type that is used in the related column. It allows using the setNumberFormat() method against them (when the source column is of the ron/edn type).

Related sample: Custom group format

Handler function

To customize the group summary rows appearance you can define some handler function and apply it through the customGroupFormat property.

The function takes 2 parameters:

  • name - (string) the group key;
  • count - (number) the number of rows in the group.

Customizing the group summary rows through a handler function

mygrid.customGroupFormat=function(name,count){
      return name+" :: found " +count+ " records";
}
mygrid.groupBy(2);

Related sample: Custom group format

Using aggregate shortcuts in the handler function

Note, you can use the aggregation shortcuts in your handler function as well (see the list of such shortcuts in the chapter above). To use the shortcuts in the function, you should call the groupStat method that returns the result of aggregation for a column and accepts the following parameters:

  • key - the group key;
  • ind - the column index (zero-based numbering);
  • item - the aggregation shortcut.

Using aggregate shortcuts in the handler function

mygrid.customGroupFormat=function(name,count){
    return name
    +", Max sales="
    +grid.groupStat(name,3,"stat_max")
    +", total="
    +grid.groupStat(name,3,"stat_total");
}
mygrid.groupBy(2);

Related sample: Custom group format

Group iterator

The library provides a built-in iterator that can be used to iterate through all rows in some group and calculate a custom math.

Using iterator for a group

mygrid.forEachRowInGroup(name,function(id){
       do_something_with_row(id);
});

where name is the group key (e.g. 'John Grisham').

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Formatting Number and Date Values DHTMLX Docs

Documentation
  • Iterating Over Data
  • Sorting Data
  • Filtering Data
  • Searching in Grid
  • Grouping Data by Rows
  • Formatting Number and Date Values
    • Numbers
    • Dates
  • Statistics Counters
  • Validating Data Items
  • Using Math Formulas for Data
  • Clipboard Operations
  • Providing Undo/Redo Operations
Start Grid Managing Data in Grid

Formatting Number and Date Values

Numbers

Formatting is applied just to columns(cells) of types ron and edn.

To set format for a number column (or cell) you should use the method setNumberFormat().

The method takes 4 parameters:

  • mask - the numeric mask (e.g. 0,000.00). While specifying the mask you should use the default decimal and group separators ('.' and ',').
  • index - the index of a column the formatting will be applied to;
  • d_sep - (optional) the decimal separator char (by default, '.');
  • g_sep - (optional) the group separator char (by default, ',').

Setting number format for a column

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setColTypes("edn,..");
mygrid.setNumberFormat("0,000.00",0,"'",".");
...
mygrid.init();

Related sample: Date/Decimal format

Number formats in different countries:

  • USA
mygrid.setNumberFormat("0,000.00",index,".",",");

Example: 1456.789 => 1,456.79

  • UK
mygrid.setNumberFormat("0,000.00",index,",","");

Example: 1456.789 => 1456.79

  • France
mygrid.setNumberFormat("0,000.00",index,","," ");

Example: 1456.789 => 1 456.79

  • Russia
mygrid.setNumberFormat("0,000.00",index,",",".");

Example: 1456.789 => 1.456,79

  • Greece
mygrid.setNumberFormat("0,000.00",index,"."," ");

Example: 1456.789 => 1 456.79

  • Switzerland
mygrid.setNumberFormat("0,000.00",index,".","'");

Example: 1456.789 => 1'456.79

In case of XML configuration you can set format as:

<column type="edn" width="150" sort="str" format="0.00"/>

In case of HTML configuration you can set format as:

<td type="edn" format="0,000.00">Column 3</td>

Decimal and group separators can be set globally as part of grid internationalization, i.e. the specified values will be applied to all columns in the grid automatically and you won't need to specify them through the setNumberFormat() method.

Setting global values for decimal and group separators

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setColTypes("edn,ron,..");
mygrid.i18n.decimal_separator=","
mygrid.i18n.group_separator="'";
mygrid.setNumberFormat("0,000.00",0);//1456.789 => 1'456,78
mygrid.setNumberFormat("0,000.000",1);//1456.789 => 1'456,789
...

If a column(doesn't matter what type it has) has some assigned statistics counter, format specified for this column will be applied to results of calculation as well. If the type isn't 'edn'/'ron', the format will be applied just to the statistics counter.

Dates

Formatting is set for the whole grid and applied to all columns(cells) of types dhxCalendar and dhxCalendarA.

To set the desired date format you should use the method setDateFormat().
The method takes the only parameter - the date mask.

Table 1 Mask elements
Mask element | Description
%d | day as number ( with leading zero )
%j | day as number
%D | abbreviated name of the day
%l | full name of the day
%m | month as number ( with leading zero )
%n | month as number
%M | abbreviated name of the month
%F | full name of the month
%y | year as number (2 digits)
%Y | year as number (4 digits)
%H | hours (24)
%i | minutes

Related sample: Date/Decimal format

For example, if you want to set June 1, 2011 as 01.06.2011, the following format should be specified:

mygrid.setDateFormat("%d.%m.%Y");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Statistics Counters DHTMLX Docs

Documentation
  • Iterating Over Data
  • Sorting Data
  • Filtering Data
  • Searching in Grid
  • Grouping Data by Rows
  • Formatting Number and Date Values
  • Statistics Counters
    • Basic built-in counters
    • Creating custom counters
    • Setting the counter to the format of the column
    • Integrating counters into HTML
  • Validating Data Items
  • Using Math Formulas for Data
  • Clipboard Operations
  • Providing Undo/Redo Operations
Start Grid Managing Data in Grid

Statistics Counters

The library provides a list of statistics counters that can be used to get some total value in the footer of a column.

Basic built-in counters

Statistics counters are set by the method attachFooter().

General specifying a statistics counter for a column

mygrid = new dhtmlXGridObject('gridbox');

mygrid.setHeader("Sales,Book Title,Author");
mygrid.attachFooter("#stat_average,,");
mygrid.attachFooter("#stat_max,,");
...
  • While specifying a counter you should write '#' before the counter's name;
  • If you add some text directly before or after the counter, you should place the counter in curly brackets
    ('text {#stat_count } text').
Table 1 Statistics counters
Counter | Description
stat_total | calculates the sum of all values in a column
stat_multi_total | calculates the product of 2 columns totals
stat_max | presents the maximum value in the column
stat_min | presents the minimum value in the column
stat_average | calculates the average of all values in a column
stat_count | counts the number of rows in the column

If you add the counter after loading data, you need to force calculation by the following command:

Forced invoking calculation in the grid

mygrid.callEvent("onGridReconstructed",[]);

Creating custom counters

You can easily create a custom counter using the technique shown below:

The simplest custom counter

mygrid = new dhtmlXGridObject('gridbox');
...

mygrid._in_header_stat_rowcount=function(tag,index,data){//'stat_rowcount'-counter name
    var calc=function(){                       // function used for calculations
        return this.getRowsNum();
    }
    this._stat_in_header(tag,calc,index,data); // default statistics handler processor
}

mygrid.attachFooter("#stat_rowcount, , ");
mygrid.init()
  1. The _in_header_stat_rowcount() function takes 3 parameters:
    • tag - the HTML node of the footer;
    • index - the index of the column (zero-based numbering);
    • data - an array of 2 elements presenting the text before/after the counter. data[0] contains the text before, data[1] - the text after the counter.
  2. The calc() function is called each time the data is changed in the grid and the results in the footer value;
  3. The _stat_in_header() method provides automatic processing of the counter, e.g. invokes the calc() function, sets the calculated result, etc.
  4. The name of a counter must start form stat_.

Understanding the "data" parameter

mygrid = new dhtmlXGridObject('gridbox');
...
mygrid.attachFooter(" , ,text1{#stat_rowcount}text2");
mygrid.init()

// the '_in_header_stat_rowcount()' function takes parameter data=[text1,text2]

Global counters

To make the counter available for any grid initialized in the app you should specify the counter globally, on the prototype level:

dhtmlXGridObject.prototype._in_header_stat_rowcount=function(tag,index,data){
    var calc=function(){                       // function used for calculations
        return this.getRowsNum();
    }
    this._stat_in_header(tag,calc,index,data); // default statistics handler processor
}

Setting the counter to the format of the column

To set the same numeric format for the counter as the one set for the related column, you may use the inner grid function _aplNF(value,column_index). In this case, the counter will take the format set by the setNumberFormat() method.

Setting the counter to the format of the column

mygrid = new dhtmlXGridObject('gridbox');

mygrid.setHeader("Sales, Book title, Author,Price");
mygrid.setNumberFormat("0,000.00",0);// sets the format for the 'Sales' column

mygrid._in_header_stat_sum=function(tag,index,data){
    var calck=function(){
        var sum=0;
        this.forEachRow(function(id){
            sum+=this.cellById(id,index).getValue()*1;
        })
    return this._aplNF(sum,0);
    }
    this._stat_in_header(tag,calck,index,data);
}
mygrid.attachFooter("#stat_sum, , ,");
...
mygrid.init();

Integrating counters into HTML

You have the possibility to integrate the value return by any statictics counter into HTML.

Integrating a counter into HTML

<span id="average_sale"></span>
<div
    id="gridbox"
    style="margin-top:10px; width:379px;height:270px;background-color:white;"
></div>

<script>
    mygrid = new dhtmlXGridObject('gridbox');
    ...
    mygrid._in_header_stat_average(document.getElementById('total_sales'),3,
    ["<b>Average price per store: </b>","$"]);
</script>

mygrid._in_header_[name of the counter] takes the following parameters:

  1. The id of an HTML element;
  2. The index of the column which will be used in calculation;
  3. An array of 2 elements presenting the text before/after the counter. If you don't add any text, specify an empty array - ["",""]

The function can be called both before and after grid initialization.

Related sample: Numeric filtering and master checkbox

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Validating Data Items DHTMLX Docs

Documentation
  • Iterating Over Data
  • Sorting Data
  • Filtering Data
  • Searching in Grid
  • Grouping Data by Rows
  • Formatting Number and Date Values
  • Statistics Counters
  • Validating Data Items
    • Enabling validation
    • Validation rules
    • Working modes
    • Validation events
    • Styling
    • Validation and dataProcessor
  • Using Math Formulas for Data
  • Clipboard Operations
  • Providing Undo/Redo Operations
Start Grid Managing Data in Grid

Validating Data Items

The library provides a special extension to validate data in dhtmlxGrid on the client side (for server-side validation use the dhtmlxConnector library).

Enabling validation

Validation can be enabled for a whole column or for a specific cell.

Per-column validation

To validate grid's column, call the setColValidators method to assign validators to columns:

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name,Email,Age");
mygrid.setColValidators("NotEmpty,ValidEmail,ValidInteger"); mygrid.init();

After these 2 steps are performed each time when the user finishes editing validation will be triggered.

Related sample: Basic validation

To set several validators to the same column, call the setColValidators as in:

mygrid.setColValidators(["ValidInteger,ValidEmail","ValidEmail"]);
//the 1st column has 2 validators assigned: "ValidInteger" and "ValidEmail"
//the 2nd column has 1 validator assigned: "ValidEmail"

If you need to define validation rules just for some columns, set an empty or 'null' value for the columns which shouldn't be affected by validation.

mygrid.setColValidators("ValidInteger,,,ValidEmail");
//or
mygrid.setColValidators(["ValidInteger",null,null,"ValidEmail"]);

Per-cell validation

To validate a grid's cell:

  1. Call the enableValidation() method to enable the cell-level validation:
    mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name,Email,Age");
mygrid.enableValidation(true); mygrid.init();
  2. Call the setAttribute method to assign a validator to a cell:
    mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name,Email,Age");
mygrid.enableValidation(true); mygrid.init();
mygrid.load("data/grid.php");
mygrid.cells(mygrid.getSelectedId(),0).setAttribute("validate","NotEmpty");

Related sample: Per cell rules

If you configure the grid from XML, you can assign validators directly in the XML file:

Assigning validators directly in an XML file

<row id="11">
    <cell validate="NotEmpty">some</cell>
    <cell>some value</cell>
    <cell>some value</cell>
</row>

Forcing validation

To force validation for a certain cell manually use the validateCell method:

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name,Email,Age");
mygrid.enableValidation(true);
mygrid.init();
mygrid.load("data/grid.php");
mygrid.validateCell(1,1,dhtmlxValidation.isValidTime);

Related sample: Forced validation

Validation rules

There are 2 types of validation rules:

  1. Standard rules.
  2. Custom rules.

Standard rules

Standard rules are the following:

  • Empty - must be empty;
  • NotEmpty - must contain at least one symbol;
  • ValidAplhaNumeric;
  • ValidBoolean - can contain one of 4 values: 'true', 'false', 0 or 1;
  • ValidCurrency;
  • ValidDate (value from 0000-00-00 to 9999-12-31);
  • ValidDatetime (value from 0000-00-00 00:00:00 to 9999:12:31 59:59:59);
  • ValidEmail;
  • ValidInteger;
  • ValidIPv4 (value from 0.0.0.0 to 255.255.255.255);
  • ValidNumeric;
  • ValidSIN (Social Insurance Number);
  • ValidSSN (Social Security Number);
  • ValidTime (value from 00:00:00 to 59:59:59).

Custom rules

To create a custom rule define a new method for the dhtmlxValidation object and use the name of that method as the name of the rule.

Note,

  • The method's name must start from 'is'.
  • While specifying the method, the prefix 'is' must be omitted.
  • The method takes only 1 parameter - the value of the cell. Returns true if validation is successful and false, otherwise.
dhtmlxValidation.isMin4=function(data){ // data should include more than 4 symbols    return data.length>=4;};dhtmlxValidation.isMax10=function(data){// data should include less than 10 symbols    return data.length<=10;};mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setColValidators("Min4,Max10"); mygrid.init();

Related sample: Custom rule

In case you want to validate a cell just if it contains something (i.e. don't validate the cell if it's empty), use the following technique:

dhtmlxValidation.isGreater100=function(data){
    if (data=="") return true;// returns 'true' if a cell is empty
    return (data>100);
};
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name,Email,Age");
mygrid.setColValidators("Greater100,,"); mygrid.init();

Working modes

Validation can be used in 2 modes:

  1. Basic;
  2. Live.

Basic mode

The basic mode is enabled by default and invokes validation just after the user finishes editing. In the live mode validation is executed on each keystroke (during the editing process).

Live mode

To enable the live mode call the enableValidation method with two true parameters.

Enabling the live update mode

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name,Email,Age");
mygrid.enableValidation(true, true); mygrid.setColValidators("NotEmpty,ValidEmail");mygrid.init();
  • The methods and techniques used of the live mode are exactly the same as those of the basic mode.
  • When an input fails validation in the live mode, it's get marked with the dhtmlx_live_validation_error css class.
  • If a user ignores the validation mark and continues editing the incorrect value, after he finishes the editing, the logic of the basic mode will be applied to the input, i.e. dhtmlx_live_validation_error will be changed to dhtmlx_validation_error and the related events will be generated.

Related sample: Live validation

Validation events

The 'validation' extension provides the following validation-related events:

Basic mode

  • onValidationError
  • onValidationCorrect
mygrid.attachEvent("onValidationCorrect",function(id,ind,value){
    mygrid.setCellTextStyle(id,ind,"");
    document.getElementById('message').innerHTML="";
    return false;
});

Related sample: Basic custom validation

Live mode

  • onLiveValidationError
  • onLiveValidationCorrect
mygrid.attachEvent("onLiveValidationError",function(id,ind,value){
    document.getElementById('message').innerHTML="Error at cell ("+id+","+ind
    +"), value must "+(ind==0?"not be empty":"be a valid email");
    return false;
});
mygrid.attachEvent("onLiveValidationCorrect",function(id,ind,value){
    document.getElementById('message').innerHTML="";
    return false;
});

Related sample: Live custom validation

Common events

You can also use the onCellChanged and onEditCell events for validation purposes. Note, while using these events you don't need to include the source file of the 'validation' extension on your page.

Using common dhtmlxGrid events for validation

mygrid.attachEvent("onCellChanged",function(id,index,value){
     if (index == SOME && !some_check(value))
          grid.cellById(id,index).setCValue("invalid");
})
//or
mygrid.attachEvent("onEditCell",function(stage,id,index,new_value,old_value){
     if (stage == 2 && index == SOME && !some_check(new_value))
          return false; //deny edit operation
})

Styling

When an input fails validation it's get marked with a special css class.

  • For the basic mode - dhtmlx_validation_error.
  • For the live mode - dhtmlx_live_validation_error.

To set custom styling you should redefine the related css class:

<style>
.dhtmlx_validation_error{
      ... any custom marking rules here ...
}
</style>

The custom messages can be added by using validation events.

Validation and dataProcessor

The native dhtmlxGrid validation described above doesn't affect DataProcessor behaviour. What does it mean?

All changes made in the grid are sent to the server, no matter if they're correct or not. Cells that fail validation are marked with a special style but their values are saved on the server.

To block sending incorrect data to the server specify the validation rules using the API of dataProcessor, particularly the setVerificator method. dataProcessor validates data before sending it to the server and prevents saving the data that failed validation.

dp.setVerificator(1,dhtmlxValidation.isValidEmail);

Read more details on dataProcessor validation here.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Using Math Formulas for Data DHTMLX Docs

Documentation
  • Iterating Over Data
  • Sorting Data
  • Filtering Data
  • Searching in Grid
  • Grouping Data by Rows
  • Formatting Number and Date Values
  • Statistics Counters
  • Validating Data Items
  • Using Math Formulas for Data
    • Applying a formula to a column
    • Applying a formula to a cell
    • Setting the permission for editing
    • Rounding calculation results
  • Clipboard Operations
  • Providing Undo/Redo Operations
Start Grid Managing Data in Grid

Using Math Formulas for Data

You have the possibility to use mathematical expressions for data you load. dhtmlxGrid parses, evalutes such expressions and presents the result in the related cells.

Beware, cells that are supposed to contain the calculation result must be empty (don't have data to load). Otherwise, loaded data 'rewrite' the calculation result.

The stated functionality requires PRO version of the dhtmlxGrid package.

Applying a formula to a column

If you need to apply a formula to the entire column use the following technique while configuring the column:

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setColTypes("ed,ed,ed[=c2*c3]");
...

Syntax:

  1. Formula must start from the '=' sign and be placed in square brackets '[]'.

  2. Within formulas can be used:

    • basic mathematical operators, which are : +, -, /, *.
    • column referencies.

You can refer to a column as c[col_index]:

  • c - is the hardcoded abbreviation for a column.
  • col_index - the index of a column you want to get data from. Zero-based numbering.

Related sample: Math calculations

Applying a formula to a cell

To apply a mathematical expression to a certain cell you should turn to the XML configuration of this cell.

Syntax:

  1. Formula must start from the '=' sign.

  2. Within formulas can be used:

    • basic mathematical operators, which are : +, -, /, *.
    • cell referencies.

You can refer to a cell in 2 ways:

  • [[row_id,col_ind]] - takes the value of the specified cell (takes the row id and column index (zero-based numbering)).
  • c[col_index] - takes the value of a cell of the specified column within a chosen row (takes the column index (zero-based numbering)).
    Beware, you can't combine 2 variants.
<rows>
    <row id="row1">
        <cell>1500</cell>
        <cell>400</cell>
        <cell>=[[row1,0]]+[[row1,1]]</cell><!-- the result is 1900 -->
    </row>
    <row id="row2">
        <cell>1500</cell>
        <cell>400</cell>
        <cell>=c0+c1</cell> <!-- the result is 1900 -->
    </row>

Related sample: Math calculations

Setting the permission for editing

All cells containing formulas are read-only by default, no matter what type of content was specified for the column(cell) initially.

If you want to allow users to edit formulas you should call the enableMathEditing method with the true parameter:

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setColTypes("ed,ed,ed[=c0*c1]");
mygrid.enableMathEditing(true);
...
mygrid.init();

The method sets permission for editing all formulas defined in the grid at a time. You can't enable editing just for a specific column(cell).

Related sample: Math calculations

Rounding calculation results

To round calculation results and set a number of significant digits use the setMathRound method. As a parameter the method takes the number of significant digits.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setColTypes("ed,ed,ed[=c0*c1]");
mygrid.setMathRound(2);
...
mygrid.init();

Related sample: Custom output with math calculations

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Clipboard Operations DHTMLX Docs

Documentation
  • Iterating Over Data
  • Sorting Data
  • Filtering Data
  • Searching in Grid
  • Grouping Data by Rows
  • Formatting Number and Date Values
  • Statistics Counters
  • Validating Data Items
  • Using Math Formulas for Data
  • Clipboard Operations
    • Copying the entire grid
    • Copying a row
    • Copying a cell
    • Copying a block of cells
    • If clipboard operations blocked by browser
  • Providing Undo/Redo Operations
Start Grid Managing Data in Grid

Clipboard Operations

Note, data from the grid is copied in the CSV format.

You need to set a tab as the delimiter (using grid.csv.cell="\t" syntax) to have a possibility to insert copied data to MS Excel.

Copying the entire grid

To copy the entire grid's data to the clipboard (in the CSV format) call the gridToClipboard method:

mygrid.gridToClipboard();

Related sample: Operations with clipboard

To paste the copied data to the grid use the gridFromClipboard method:

mygrid.clearAll(); // clears grid
mygrid.gridFromClipboard();//copies content from clipboard(uses the specified delimiter)

Related sample: Operations with clipboard

Copying a row

To copy the data of a row to the clipboard use the rowToClipboard method:

mygrid.rowToClipboard("row1"); // "row1" - the row's id
//or
mygrid.rowToClipboard(); // copies the currently selected row

Related sample: Operations with clipboard

To update some row with the data from the clipboard use the updateRowFromClipboard method:

mygrid.updateRowFromClipboard("row1"); // "row1" - the row's id
//or
mygrid.updateRowFromClipboard(); // updates the currently selected row

Related sample: Operations with clipboard

To add a new row with the data from the clipboard use the addRowFromClipboard method:

mygrid.addRowFromClipboard(); // adds a row to the end of the grid

Related sample: Operations with clipboard

Copying a cell

To copy the value of a cell to the clipboard use the cellToClipboard method:

mygrid.cellToClipboard("row1",0); // "row1" - the row id. 0 - the col index
//or
mygrid.cellToClipboard(); // copies the currently selected cell

Related sample: Operations with clipboard

To update some cell with the value from the clipboard use the updateCellFromClipboard

mygrid.updateCellFromClipboard("row1", 0); // "row1" - the row id. 0 - the col index
//or
mygrid.cellToClipboard(); // updates the currently selected cell

Related sample: Operations with clipboard

Copying a block of cells

dhtmlxGrid provides a special copying mode "Block selection" that allows users to select a block of cells for their further copying to the clipboard.

To enable the "Block selection" mode on the page, call the enableBlockSelection method:

mygrid.enableBlockSelection(true); // false to disable

The selection color is specified by the '.dhtmlxGrid_selection' class in the the 'dhtmlxgrid.css' file. By default, the selection is set to yellow.

To copy a block of cells, use the copyBlockToClipboard method:

mygrid.copyBlockToClipboard();

To copy/paste only the visible text of cells (not values behind them), use the forceLabelSelection method:

mygrid.forseLabelSelection();

To paste the copied block of cells into the grid use the pasteBlockFromClipboard method:

mygrid.pasteBlockFromClipboard();

Related sample: Copy to clipboard

If clipboard operations blocked by browser

Clipboard operations may be blocked in some browsers. In such a case, to execute an alternative code use the dhtmlxError object as in:

dhtmlxError.catchError("Clipboard",function(){
     //any custom message here
})
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Providing Undo/Redo Operations DHTMLX Docs

Documentation
  • Iterating Over Data
  • Sorting Data
  • Filtering Data
  • Searching in Grid
  • Grouping Data by Rows
  • Formatting Number and Date Values
  • Statistics Counters
  • Validating Data Items
  • Using Math Formulas for Data
  • Clipboard Operations
  • Providing Undo/Redo Operations
Start Grid Managing Data in Grid

Providing Undo/Redo Operations

dhtmlxGrid provides users with the ability to interactively undo and redo editing operations performed on data items.
But note, modifications caused by API calls cannot be undone.

The stated functionality requires PRO version of the dhtmlxGrid (or DHTMLX Suite) package.

An operation can be undone only when a user has performed at least one edit operation. The redo command is unavailable unless you have used the undo command.

Enabling the undo/redo commands in the grid

<input type="button" name="a1" value="Back" onClick="mygrid.doUndo()">
<input type="button" name="a2" value="Forward" onClick="mygrid.doRedo()">
<div id="gridbox" style="width:400px;height:270px;"></div>

<script>
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.enableUndoRedo();
    ...
</script>

Table 1 The Undo/Redo system methods
Method | Description
enableUndoRedo() | enables the undo/redo commands in the grid
disableUndoRedo() | disables the undo/redo commands in the grid
doUndo() | undoes an editing operation
doRedo() | redoes an editing operation
getUndo().length | returns a number of the stored editing operations available for the undo command
getRedo().length | returns a number of the stored editing operations available for the redo command

Related sample: Undo/Redo

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Styling Grid DHTMLX Docs

Documentation
  • dhtmlXGrid API
  • Cell-Level API
  • Creating Grid on a Page
  • Loading and Storing Data
  • Configuring Grid
  • Managing Data in Grid
  • Styling Grid
    • Exploring Available Skins
    • Styling Grid's Elements
  • Integrating with Other Components
Start Grid

Styling Grid

  • Exploring Available Skins
  • Styling Grid's Elements
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Exploring Available Skins DHTMLX Docs

Documentation
  • Exploring Available Skins
  • Styling Grid's Elements
Start Grid Styling Grid

Exploring Available Skins

There are 4 predefined skins available:

1 . Material (default)

Related sample: Material Skin

2 . Skyblue

3 . Web

Related sample: Web Skin

4 . Terrace

Related sample: Terrace Skin

The Material skin is set by default.

To apply other skin, e.g. web skin, you should complete the following steps:

  • follow the path skins/web and copy the dhtmlx.css file to your directory with skin
  • go to the folder imgs and copy the folder "dhxgrid_web" that contains the skin images to the same directory.

Once you include a new dhtmlx.css file on the page, the web skin will be applied. If you need to change the skin, repeat the steps given above, using the folders with the corresponding names.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Styling Grid's Elements DHTMLX Docs

Documentation
  • Exploring Available Skins
  • Styling Grid's Elements
    • A whole grid
    • Column
    • Row
    • Cell
    • Header
    • Styling even/odd grid rows
Start Grid Styling Grid

Styling Grid's Elements

You can use CSS for dhtmlxGrid to achieve the desired look-and-feel. This article will help you to discover the support for cascading style sheets (CSS) in Grid.

You can adjust the style of:

  • A whole grid
  • Columns
  • Rows
  • Cells

A whole grid

To apply some style to a whole table, we recommend you to use a special tool - Skin builder. It will allow you to style the grid on the fly and see the result immediately .

All the details are given at http://dhtmlx.com/docs/products/skinBuilder/index.shtml

Also, you can use the setStyle method to set the style of main grid's aspects: header, cells, selected cell, selected row.

//grid.setStyle(ss_header, ss_grid, ss_selCell, ss_selRow);
grid.setStyle(
    "background-color:navy;color:white; font-weight:bold;", "","color:red;", ""
);

Column

To apply custom colors to grid's columns, use the setColumnColor method:

//set colors for the first 3 columns
mygrid.setColumnColor("white,#d5f1ff,#d5f1ff");

Related sample: Multirow header

Row

To apply a custom style to a row of the grid use the setRowTextStyle method:

//sets the style for the row with id="row1"
mygrid.setRowTextStyle("row1", "background-color: red; font-family: arial;");

Related sample: Using Grid API Methods

One more way to set a custom color to a grid's row is to use the setRowColor method:

//sets the 'red' color to the row with id="row1"
mygrid.setRowColor("row1","red");

There are also 2 methods that will allow you quickly set the bold and normal font weight for the row's text:

  • setRowTextBold
  • setRowTextNormal
mygrid.setRowTextBold("row1");
mygrid.setRowTextNormal("row2");

Related sample: Using Grid API Methods

Cell

To apply a custom style to a cell of the grid use the setCellTextStyle method:

mygrid.attachEvent("onValidationError",function(id,ind,value){
    mygrid.setCellTextStyle(id,ind,"font-weight:bold;");     document.getElementById('message').innerHTML="Error at cell ("+id+","+ind
    +"), value must "+(ind==0?"not be empty":"be a valid email");
    return false;
})

Related sample: Basic custom validation

Header

To style the header of the grid use the 3rd parameter of the setHeader (or attachHeader) method:

mygrid.setHeader(
    "A,B,C",
    null,
    ["text-align:right;","text-align:left;","text-align:center"]
);
mygrid.attachHeader("A,B,C,D",["","color:red;","",""]);

Also you can use the 1st parameter of the setStyle method:

//grid.setStyle(ss_header, ss_grid, ss_selCell, ss_selRow);
grid.setStyle("background-color:navy;color:white; font-weight:bold;", "","", "");

Styling even/odd grid rows

To provide different styles for the even and odd rows of the grid use the enableAlterCss method:

<style>
.even{
    background-color:#22FF44;
}
.uneven{
    background-color:#41964e;
}

</style>
mygrid.enableAlterCss("even","uneven");

Related sample: Alternative styles for even/uneven rows

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Integrating with Other Components DHTMLX Docs

Documentation
  • dhtmlXGrid API
  • Cell-Level API
  • Creating Grid on a Page
  • Loading and Storing Data
  • Configuring Grid
  • Managing Data in Grid
  • Styling Grid
  • Integrating with Other Components
    • Integration with HTML Form
    • Integration with dhtmlxTree
    • Integration with dhtmlxChart
    • Integration with dhtmlxCombo
    • Integration with dhtmlxMenu
    • Integration with dhtmlxDataStore
    • Integration with Container Components
Start Grid

Integrating with Other Components

  • HTML Form
  • Tree
  • Chart
  • Combo
  • Context Menu
  • DataStore
  • Container Components
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Integration with HTML Form DHTMLX Docs

Documentation
  • Integration with HTML Form
    • Submit Modes
    • Submitting only changed rows
    • Submitting all rows
    • Submitting selected rows' IDs
    • Submitting values of selected rows
    • Sending form values by direct submit call
  • Integration with dhtmlxTree
  • Integration with dhtmlxChart
  • Integration with dhtmlxCombo
  • Integration with dhtmlxMenu
  • Integration with dhtmlxDataStore
  • Integration with Container Components
Start Grid Integrating with Other Components

Integration with HTML Form

dhtmlxGrid can be used as a part of an HTML form, so that the grid's data could be sent to the server as a part of form submitting. It can be used to save changes in the grid, if you don't want to use the dataprocessor library.

To use the grid as a part of an HTML form, do the following:

  1. Place the grid's container into an HTML form:
    <!DOCTYPE html>
<html>
<head>
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
    <script src="../codebase/dhtmlx.js"></script>
</head>
<body>
    <form action="php/form.php" method="post" target="result">         <table width="600">
            <tr>
                <td>
                    <div id="gridbox" style="width:100%; height:270px;"></div>                </td>
            </tr>
        </table>
        <input type="submit">
    </form>
    <script>
        //here you will place your JavaScript code
        </script>
</body>
</html>
  2. Initialize dhtmlxGrid in the usual way:
    <!DOCTYPE html>
<html>
<head>
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
    <script src="../codebase/dhtmlx.js"></script>
</head>
<body>
    <form action="php/form.php" method="post" target="result">         <table width="600">
            <tr>
                <td>
                    <div id="gridbox" style="width:100%; height:270px;"></div>                </td>
            </tr>
        </table>
        <input type="submit">
    </form>
    <script>
            mygrid = new dhtmlXGridObject('gridbox');
        mygrid.setImagePath("./codebase/imgs/");
        mygrid.setHeader("Book title,Author,Price");
        mygrid.init();
        </script>
</body>
</html>

Related sample: FORM integration

Note,

  • As the names of fields contain the gridId you can include multiple grids inside one and the same form tag.
  • Pay your attention to the fact that only the rows edited by a user will be marked as changed. If you change some value by API calls, such row will not be included in the process of form submitting. You can mark any row in the grid as updated in the following way:
    grid.cells(i,j).cell.wasChanged=true;

Submit Modes

dhtmlxGrid can work in the following modes:

  • Submitting only the changed rows (the default mode)
  • Submitting all rows
  • Submitting ID's of the selected rows
  • Submitting values of the selected rows

Submitting only changed rows

This is the default mode. In this mode the grid will include only the data of the changed rows in the process of form submitting.

For each changed row a virtual input field will be added - [GRIDID][ROWID][CELLINDEX]

where

  • GRIDID - the id of the grid's container
  • ROWID - the id of the row with changed values
  • CELLINDEX - the index of the cell with the changed value

The value of the field is equal to the cell value.

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Book title,Author,Price");
mygrid.init();
mygrid.addRow("row1",["The Rainmaker", "John Grisham", "7.99"]);

For example, if the user changes the price of the added book from 7.99 to 10.99 and submits the form, you will get an input with the following name:

gridbox_row1_3=“10.99”
  • If any row was added to the grid, all values of this new row will be marked as changed. Additional to it the [GRIDID]_ROWS_ADDED virtual input will be added. It will contain the list of IDs of the added rows (so on the server side it will be possible to separate added and updated rows).
  • If any row was deleted, the [GRIDID]_ROWS_DELETED virtual input will be added. The same as for the added rows, it will contain the list of IDs of the deleted rows.

Sending the information about the added/deleted rows is enabled by default. To disable it use the submitAddedRows method:

mygrid.submitAddedRows(false);

Submitting all rows

To include into submitting all rows (changed and unchanged), call the submitOnlyChanged method with the 'false' value:

mygrid.submitOnlyChanged(false);

In this mode a virtual input field will be created for each cell in the grid.

Submitting selected rows' IDs

In this mode the grid will create a single virtual field: [GRIDID]_SELECTED. This field will contain the list of rows' IDs that are selected (in the single select mode it will be a single ID). The mode can be enabled by:

To enable the mode, use the submitOnlySelected method:

mygrid.submitOnlySelected(true)
mygrid.submitOnlyRowID(true);

Submitting values of selected rows

This mode works almost in the same way as the default one. It will send only the updated values of the selected rows:

mygrid.submitOnlySelected(true);
mygrid.submitOnlyRowID(false);

Sending form values by direct submit call

If you are sending form's values not by some submit button, but by the direct form.submit() call, the grid won't add its data automatically. To correct this call the parentFormOnSubmit() method before sending form's values to the server:

mygrid.parentFormOnSubmit();
form.submit();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Integration with dhtmlxTree DHTMLX Docs

Documentation
  • Integration with HTML Form
  • Integration with dhtmlxTree
  • Integration with dhtmlxChart
  • Integration with dhtmlxCombo
  • Integration with dhtmlxMenu
  • Integration with dhtmlxDataStore
  • Integration with Container Components
Start Grid Integrating with Other Components

Integration with dhtmlxTree

The stated functionality requires PRO version of the dhtmlxGrid (or DHTMLX Suite) package.

Both components need to have drag-n-drop enabled. The complexity of drag-and-drop between the tree and the grid lies in different structure of data in them. So, the user should define what values in the grid should go to the tree node and how to store them there, and vice versa.

There are two methods in the grid for this:

treeToGridElement(treeObj,treeNodeId,gridRowId);
gridToTreeElement(treeObj,treeNodeId,gridRowId);

All the user should do is to redefine them in the way he needs. For example:

// redefine tree-to-grid drop element
grid.treeToGridElement = function(treeObj,treeNodeId,gridRowId){
    this.cells(gridRowId,1).setValue(treeObj.getItemText(treeNodeId));
    if(treeObj.getUserData(treeNodeId,"c0")){
        this.cells(gridRowId,0).setValue(treeObj.getUserData(treeNodeId,"c0"));
        this.cells(gridRowId,1).setValue(treeObj.getUserData(treeNodeId,"c1"));
        this.cells(gridRowId,2).setValue(treeObj.getUserData(treeNodeId,"c2"));
        this.cells(gridRowId,3).setValue(treeObj.getUserData(treeNodeId,"c3"));
}
return !document.getElementById("dnd_copy").checked;
}
// redefine grid-to-tree drop element
grid.gridToTreeElement = function(treeObj,treeNodeId,gridRowId){
    treeObj.setItemText(treeNodeId,this.cells(gridRowId,1).getValue()+"/"
      +this.cells(gridRowId,2).getValue())
    treeObj.setUserData(treeNodeId,"c0",this.cells(gridRowId,0).getValue())
    treeObj.setUserData(treeNodeId,"c1",this.cells(gridRowId,1).getValue())
    treeObj.setUserData(treeNodeId,"c2",this.cells(gridRowId,2).getValue())
    treeObj.setUserData(treeNodeId,"c3",this.cells(gridRowId,3).getValue())
    return !document.getElementById("dnd_copy").checked;
}

Related sample: dhtmlxGrid & dhtmlxTree interaction

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Integration with dhtmlxChart DHTMLX Docs

Documentation
  • Integration with HTML Form
  • Integration with dhtmlxTree
  • Integration with dhtmlxChart
  • Integration with dhtmlxCombo
  • Integration with dhtmlxMenu
  • Integration with dhtmlxDataStore
  • Integration with Container Components
Start Grid Integrating with Other Components

Integration with dhtmlxChart

Pretty often, you may need to integrate your grid with a chart, i.e. to show grid's data and their changes in a chart. And this article is devoted to the grid-chart integration.

In short, the integration is implemented through only 1 code line:

myChart.parse(mygrid,"dhtmlxgrid");

In detail, to perform the integration, make the following steps:

  1. Create dhtmlxChart object:
    var myChart =  new dhtmlXChart({
    view:"bar", // sets chart's type. In our case it's a vertical bar
    color:"#66ccff", // sets the color of bars
    container:"chart_container", // an html container that will contain our chart
    value:"#data0#", // sets data the chart will present.#data0# refers to 1st col
    width:30, // sets the width of bars
    origin:0, // represents positive and negative values
    yAxis:{   // sets the vertical axis
        start:-1000,
        step: 500,
        end:2000
    },
    xAxis:{
        template:function(){
            return ""
        } // the horizontal axis without labels
    }
});
  2. Create dhtmlxGrid object:
    var mygrid = new dhtmlXGridObject('gridbox'); // creates dhtmlxGrid instance
mygrid.setSkin("dhx_skyblue"); // sets a skin for our grid
  3. Load data to the grid:
    mygrid.load("xml/gridData.xml"); // loads data to the grid from an external file
  4. Load data from the grid to the chart:
    myChart.parse(mygrid,"dhtmlxgrid") // loads grid's data to the chart
  5. Implement chart refreshing when data in the grid is changed:
    function refresh_chart(){ // the function called every time data in grid is changed
    myChart.clearAll(); // clears chart dataset
    myChart.parse(mygrid,"dhtmlxgrid"); // loads new grid data to the chart
};

mygrid.attachEvent("onEditCell",function(stage){ //fires after the editor is closed
    if (stage == 2)//sets editing stage."2" means - event fires after editor closed
        refresh_chart();// calls the function defined before
    return true;
});
  6. Put all the code into window.onload() function:
    //function ensures that our code will be performed just after page loading finishes
window.onload = function(){
    //put all the code stated above here
}

Related sample is dhtmlxChart/samples/09_integration/01_dhtmlxgrid.html

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Integration with dhtmlxCombo DHTMLX Docs

Documentation
  • Integration with HTML Form
  • Integration with dhtmlxTree
  • Integration with dhtmlxChart
  • Integration with dhtmlxCombo
    • Setting "combo" Column
    • Setting "combo" Cell
    • Getting Cell/Column Object
  • Integration with dhtmlxMenu
  • Integration with dhtmlxDataStore
  • Integration with Container Components
Start Grid Integrating with Other Components

Integration with dhtmlxCombo

This functionality is available in the PRO edition only.

Grid supports "combo" excell type that was transformed to dhtmlxCombobox component. "Combo" excell supports all modes of dhtmlxCombo.

There are two ways for combo setting definition:

  • for the whole column;
  • for a certain cell.

Combo loading and representation modes are set by special attributes in XML:

  • xmlcontent - in this case options can be defined directly in grid XML;
  • source - the source of combo XML;
  • editable - boolean, 1 by default;
  • filtering - boolean, 0 by default, enables filtering mode (the same as enableFilteringMode() for combo);
  • auto - boolean, 0 by default, enables autocomplete mode (the same as enableFilteringMode(mode,url) for combo);
  • cache - boolean, an additional parameter for the autocomplete mode; xml suggestions are cached (the same as enableFilteringMode(mode,url,cache));
  • sub - boolean, an additional parameter for the autocomplete mode; enables auto loading of additional suggestions on selecting the last loaded option (the same as enableFilteringMode(mode,url,cache,autoSubLoad).

Setting "combo" Column

Combo can be set in the <column> tag for the whole column:

<column width="150" type="combo" xmlcontent="1"…>TEXT
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    …
</column>
<column width="150" type="combo" editable="false" source="data.xml" …>TEXT</column>
<column type="combo" source="complete.php" auto="true" cache="true" sub="true"… >
    TEXT
</column>

Combo value should be set inside of the <cell> tags:

<cell>1</cell>

In case of auto complete, <cell>value^text<cell/> instruction defines the value and the text:

<cell>1^one</cell>

Setting "combo" Cell

A cell's combo is set as the column's one. The difference consists in using the <cell> tag instead of the <column> one. In this case, the xmlcontent attribute is always necessary:

<cell xmlcontent="1" editable="0">1
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    ...
</cell>
<cell xmlcontent="1" source="data.xml" filter="true">1</cell>

In case of autocomplete mode, the text should be set with the text attribute:

<cell xmlcontent="1" source="complete.php" auto="true" cache="true" text="some text">
    4
</cell>

Getting Cell/Column Object

The getCellCombo() method returns dhtmlXCombo cell object:

myCombo = grid.cells(id,index).getCellCombo();

This object allows working with dhtmlxCombo API:

myCombo.addOption(key,text);

The getColumnCombo method returns dhtmlXCombo column object:

myCombo = myGrid.getColumnCombo(column_index);

You can use dhtmlxCombo API with this object as well:

myCombo.enableFilteringMode(true);
myCombo.load("data.xml");

Related sample: Integration with dhtmlxCombo

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Integration with dhtmlxMenu DHTMLX Docs

Documentation
  • Integration with HTML Form
  • Integration with dhtmlxTree
  • Integration with dhtmlxChart
  • Integration with dhtmlxCombo
  • Integration with dhtmlxMenu
    • Related events
  • Integration with dhtmlxDataStore
  • Integration with Container Components
Start Grid Integrating with Other Components

Integration with dhtmlxMenu

The mentioned functionality requires PRO version of the dhtmlxGrid package

To create a context menu in the grid, use the technique as in:

<link type="text/css" href="../codebase/dhtmlx.css">
<script  src="../codebase/dhtmlx.js"></script>

<script>
    // Create a function for processing menu commands
    function onButtonClick(menuitemId){
        // Get array the 1st element of which is the row id, the 2nd - the cell index
        var data = myGrid.contextID.split("_"); // rowId_colInd
        // Use input data to perform any action you need
        myGrid.setRowTextStyle(data[0],"background-color:"+menuitemId.split("_")[1]);
    };

    // Create a menu
    myMenu = new dhtmlXMenuObject();
    myMenu.setIconsPath("../common/images/");
    myMenu.renderAsContextMenu();
    myMenu.attachEvent("onClick",onButtonClick);
    myMenu.loadStruct("../common/_context.xml");

    // Initialize the grid and attach the menu to it
    myGrid = new dhtmlXGridObject('gridbox');
    myGrid.setSkin("dhx_skyblue");
    myGrid.setImagePath("../codebase/imgs/");
    myGrid.setHeader("Name, Email, Age");
    myGrid.enableContextMenu(myMenu);
    myGrid.init();
</script>

Related sample: Context menu

The mygrid.contextID is a complex string consisting of the row id and the column index delimited with "_".

Related events

dhtmlxGrid supports the onBeforeContextMenu event that allows you to provide a custom behaviour for the context menu:

function my_pre_func(rowId,celInd,grid){
    if (celInd==1) return false;
    return true;
};

myGrid.attachEvent("onBeforeContextMenu", my_pre_func);

Related sample: Context menu for specific column

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Integration with dhtmlxDataStore DHTMLX Docs

Documentation
  • Integration with HTML Form
  • Integration with dhtmlxTree
  • Integration with dhtmlxChart
  • Integration with dhtmlxCombo
  • Integration with dhtmlxMenu
  • Integration with dhtmlxDataStore
    • Loading data from dataStore
    • Linking form directly via dataStore
    • Binding to other components (tree, grid, dataview etc.)
    • Binding to the server side
  • Integration with Container Components
Start Grid Integrating with Other Components

Integration with dhtmlxDataStore

When you deal with multiple DHTMLX components that use the same data, it's convenient to use one data source (specified as a DataStore object) for them and just define the rules how data in different components should be linked. So, a value changed in one component will be reflected in other linked ones.

Loading data from dataStore

To load data from the DataStore object to the grid, use the sync method as in:

mygrid.sync(myStore);

Linking form directly via dataStore

To link Form to Grid through the DataStore object, use the bind method as in:

mygrid.sync(myStore);
mygrid.attachEvent("onRowSelect", function(id){ data.setCursor(id); });
myform.bind(myStore);

Binding to other components (tree, grid, dataview etc.)

To bind Grid to other DHTMLX components use the bind method as in:

mygrid.bind(myCombo, function(data, filter){
        return myGrid.cells(data, 2).getValue() == filter.text;
});
//or
mygrid2.bind(mygrid1, function(data, filter){
        filter.name = data.cell1[0]; //the first letter of the selected author
});
//or
mygrid.bind(tree, function(data,filter){
        filter.name = data.text;
});

Binding to the server side

To bind a grid populated from the server-side to other DHTMLX component use the dataFeed and bind methods as in:

//specify here the path to the file that will get change request
//it'll help you to load new data from the server (instead of the master component)
mygrid.dataFeed("data/grid.php");
mygrid.bind(myform, function(master, data){
        if (master.Name == "") return true;
        return mygrid.cells(data, 1).getValue().toLowerCase().indexOf(master.Name)!=-1;
});
//each time some value in form is changed
//grid will be filtered, based on the defined logic
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Integration with Container Components DHTMLX Docs

Documentation
  • Integration with HTML Form
  • Integration with dhtmlxTree
  • Integration with dhtmlxChart
  • Integration with dhtmlxCombo
  • Integration with dhtmlxMenu
  • Integration with dhtmlxDataStore
  • Integration with Container Components
Start Grid Integrating with Other Components

Integration with Container Components

It's highly recommended to attach dhtmlxGrid to container components (Layout, Accordion, Tabbar, Windows) in the following way:

myGrid = dhxContainerComponent.cell(id).attachGrid();

It's necessary for correct resizing of Grid in relation to the container.

Related sample is here:

Related sample: Integration with dhtmlxGrid

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Layout DHTMLX Docs

Documentation
  • Layout
    • dhtmlXLayout API
    • dhtmlXLayoutCell API
    • Initializing Layout on a Page
    • Layout Skins
    • Layout Patterns
    • Layout Offsets
    • Cell Header
    • Sizing Cells
    • Docking/Undocking Cells
    • Expanding/Collapsing Cells
    • Iterator
    • Using Windows from Layout
    • Attaching Components
    • Attaching Menu/Status Bar
    • Attaching HTML
    • Attaching URL
    • Attaching Google Maps
    • Progress Bar
    • Different Content in the Same Cell
    • Coloring Text Selection
    • Migration from 3.6 to 4.0
Start

Layout

dhtmlxLayout is a JavaScript component that allows you to combine different DHTMLX components into a single application interface, placing different types of content on one page. It's a flexible and easy-to-use UI component.

API reference
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
Related resources
  • You may download dhtmlxLayout from dhtmlx.com
  • Check online samples for dhtmlxLayout
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Creating Layout on a Page

  • Layout source files
  • Constructor
  • Full-screen init
  • Init in an HTML element
  • Init in a window
  • Init in a cell of layout
  • Recommended init way
 Discusses the ways of initializing Layout on a page.

Configuring Layout

  • Layout Skins
  • Layout Patterns
  • Layout Offsets
 Shows the elements of Layout's appearance and rules of their customization.

Configuring Cells

  • Cell Header
  • Sizing Cells
 Describes the customization of a cell's header and sizes.

Managing Layout and Its Cells

  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
 Guides you through the possibilities of manipulating Layout and working with cells.

Operations with Content

  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
 Covers how you can integrate dhtmlxLayout with other dhtmlx components and third-party components.

Other

  • Migration from 3.6 to 4.0
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXLayout API DHTMLX Docs

Documentation
  • dhtmlXLayout API
    • Methods
    • Events
    • Others
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

dhtmlXLayout API

Methods
attachEvent | adds any user-defined handler to available events
attachFooter | attaches footer to component's bottom
attachHeader | attaches header to component's top
attachMenu | attaches dhtmlxMenu to component's top
attachRibbon | attaches dhtmlxRibbon to component's top
attachStatusBar | attaches a status bar object to component's bottom
attachToolbar | attaches dhtmlxToolbar to component's top
cells | returns the cell object by the id
detachEvent | detaches a handler from an event
detachFooter | detaches footer from component's bottom
detachHeader | detaches header from component's top
detachMenu | detaches dhtmlxMenu from component's top
detachRibbon | detaches dhtmlxRibbon from component's top
detachStatusBar | detaches status bar object from component's bottom
detachToolbar | detaches dhtmlxToolbar from component's top
dockWindow | docks content from the window to layout cell
forEachItem | iterator, calls a user-defined function for each cell
getAttachedMenu | returns dhtmlxMenu instance attached to component's top
getAttachedRibbon | returns dhtmlxRibbon instance attached to component's top
getAttachedStatusBar | returns status bar object attached to component's bottom
getAttachedToolbar | returns dhtmlxToolbar instance attached to component's top
getEffect | returns true if the effect is enabled
getIdByIndex | returns cell id by index
getIndexById | returns cell index by id
hideMenu | hides dhtmlxMenu attached to component's top
hidePanel | hides cell header
hideRibbon | hides dhtmlxRibbon attached to component's top
hideStatusBar | hides status bar object attached to component's bottom
hideToolbar | hides dhtmlxToolbar attached to component's top
isPanelVisible | returns true, if cell header is visible
listAutoSizes | returns array with autosize settings for loaded layout (depends on pattern)
listPatterns | returns array with available layout patterns
listViews | returns array with available layout patterns
progressOff | hides progress indicator for full component
progressOn | shows progress indicator for full component
setAutoSize | sets autosize for the layout
setCollapsedText | sets text for collapsed cell
setEffect | sets effect
setImagePath | sets path to images
setOffsets | sets offsets for parent container from each side
setSeparatorSize | sets the width of a separator line in pixels
setSizes | adjusts layout's outer size when parent's size changed
setSkin | sets skin
showMenu | shows dhtmlxMenu attached to component's top
showPanel | shows cell header
showRibbon | shows dhtmlxRibbon attached to component's top
showStatusBar | shows status bar object attached to component's bottom
showToolbar | shows dhtmlxToolbar attached to component's bottom
unDockWindow | undocks content from layout cell to the window
unload | destructor, unloads layout
Events
onCollapse | fires when cell collapsed
onContentLoaded | fires when content is loaded into cell via attachURL()
onDblClick | fires on header double-click
onDock | fires when cell docked to layout from window
onExpand | fires when cell expanded
onPanelResizeFinish | fires when one or several cells were resized
onResize | fires when layout resizes
onResizeFinish | fires when layout resizes
onUndock | fires when cell undocked to window
Other
dhxWins | link to dhtmlXWindows instance
items | array with cells
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • attachEvent
    • attachFooter
    • attachHeader
    • attachMenu
    • attachRibbon
    • attachStatusBar
    • attachToolbar
    • cells
    • detachEvent
    • detachFooter
    • detachHeader
    • detachMenu
    • detachRibbon
    • detachStatusBar
    • detachToolbar
    • dockWindow
    • forEachItem
    • getAttachedMenu
    • getAttachedRibbon
    • getAttachedStatusBar
    • getAttachedToolbar
    • getEffect
    • getIdByIndex
    • getIndexById
    • hideMenu
    • hidePanel
    • hideRibbon
    • hideStatusBar
    • hideToolbar
    • isPanelVisible
    • listAutoSizes
    • listPatterns
    • listViews
    • progressOff
    • progressOn
    • setAutoSize
    • setCollapsedText
    • setEffect
    • setImagePath
    • setOffsets
    • setSeparatorSize
    • setSizes
    • setSkin
    • showMenu
    • showPanel
    • showRibbon
    • showStatusBar
    • showToolbar
    • unDockWindow
    • unload
  • Events
  • Others
Start Layout dhtmlXLayout API

Methods

attachEvent | adds any user-defined handler to available events
attachFooter | attaches footer to component's bottom
attachHeader | attaches header to component's top
attachMenu | attaches dhtmlxMenu to component's top
attachRibbon | attaches dhtmlxRibbon to component's top
attachStatusBar | attaches a status bar object to component's bottom
attachToolbar | attaches dhtmlxToolbar to component's top
cells | returns the cell object by the id
detachEvent | detaches a handler from an event
detachFooter | detaches footer from component's bottom
detachHeader | detaches header from component's top
detachMenu | detaches dhtmlxMenu from component's top
detachRibbon | detaches dhtmlxRibbon from component's top
detachStatusBar | detaches status bar object from component's bottom
detachToolbar | detaches dhtmlxToolbar from component's top
dockWindow | docks content from the window to layout cell
forEachItem | iterator, calls a user-defined function for each cell
getAttachedMenu | returns dhtmlxMenu instance attached to component's top
getAttachedRibbon | returns dhtmlxRibbon instance attached to component's top
getAttachedStatusBar | returns status bar object attached to component's bottom
getAttachedToolbar | returns dhtmlxToolbar instance attached to component's top
getEffect | returns true if the effect is enabled
getIdByIndex | returns cell id by index
getIndexById | returns cell index by id
hideMenu | hides dhtmlxMenu attached to component's top
hidePanel | hides cell header
hideRibbon | hides dhtmlxRibbon attached to component's top
hideStatusBar | hides status bar object attached to component's bottom
hideToolbar | hides dhtmlxToolbar attached to component's top
isPanelVisible | returns true, if cell header is visible
listAutoSizes | returns array with autosize settings for loaded layout (depends on pattern)
listPatterns | returns array with available layout patterns
listViews | returns array with available layout patterns
progressOff | hides progress indicator for full component
progressOn | shows progress indicator for full component
setAutoSize | sets autosize for the layout
setCollapsedText | sets text for collapsed cell
setEffect | sets effect
setImagePath | sets path to images
setOffsets | sets offsets for parent container from each side
setSeparatorSize | sets the width of a separator line in pixels
setSizes | adjusts layout's outer size when parent's size changed
setSkin | sets skin
showMenu | shows dhtmlxMenu attached to component's top
showPanel | shows cell header
showRibbon | shows dhtmlxRibbon attached to component's top
showStatusBar | shows status bar object attached to component's bottom
showToolbar | shows dhtmlxToolbar attached to component's bottom
unDockWindow | undocks content from layout cell to the window
unload | destructor, unloads layout
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachFooter DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

attachFooter

attaches footer to component's bottom

void attachFooter(string|number|HTMLElement id, [number height] );

Parameters

id | string|number|HTMLElement | id or DOM element
height | number | optional, footer height

Example

dhxComponent.attachFooter("my_footer");

Details

If height is not specified, component will try to detect it automatically. In this case you'd better specify it in CSS:

#my_footer {
    padding-top: 2px;
    background-color: white;
}

#my_footer .my_footer_text {
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 10px;
    height: 70px; /* for autodetect */
    border: 1px solid #a4bed4
}
<div id="my_footer">
    <div class="my_footer_text">
        Hi! I'm footer!
    </div>
</div>

You can use visibility:hidden style for keeping your element hidden while it is not attached to a component, after attaching the style will be changed to visibility:visible.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHeader DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

attachHeader

attaches header to component's top

void attachHeader(string|number|HTMLElement id, [number height] );

Parameters

id | string|number|HTMLElement | id or DOM element
height | number | optional, header height

Example

dhxComponent.attachHeader("my_header");

Details

If height is not specified, component will try to detect it automatically. In this case you'd better specify it in CSS:

#my_header {
    padding-bottom: 2px;
    background-color: white;
}

#my_header .my_header_text {
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 10px;
    height: 70px; /* for autodetect */
    border: 1px solid #a4bed4
}
<div id="my_header">
    <div class="my_header_text">
        Hi! I'm header!
    </div>
</div>

You can use visibility:hidden style for keeping your element hidden while it is not attached to component. After attaching the style will be changed to visibility:visible.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMenu DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

attachMenu

attaches dhtmlxMenu to component's top

object attachMenu( [object conf] );

Parameters

conf object optional, menu config

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.attachMenu({
    icons_path: "imgs/menu/icons/",
    json: "data/json/menu.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachRibbon DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

attachRibbon

attaches dhtmlxRibbon to component's top

object attachRibbon( [object conf] );

Parameters

conf object optional, ribbon config

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.attachRibbon({
    icons_path: "imgs/ribbon/icons/",
    json: "data/json/ribbon.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachStatusBar DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

attachStatusBar

attaches a status bar object to component's bottom

object attachStatusBar( [object conf] );

Parameters

conf object optional, status bar init params

Returns

object status bar object

Example

/* conf param properties */
{
    text:   "Text", // status bar init text
    height: 20      // status bar init height
}

/* init/attach status bar */

// default behaviour
var sbObj = dhxComponent.attachStatusBar();

// with text
var sbObj = dhxComponent.attachStatusBar({text: "Loading..."});

// with text and custom height
var sbObj = dhxComponent.attachStatusBar({text: "Loading...", height: 30});

/* operations with status bar object */

// set text
sbObj.setText("Page was successfuly loaded");

// get text
var text = sbObj.getText();

Change log

conf param was added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToolbar DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

attachToolbar

attaches dhtmlxToolbar to component's top

object attachToolbar( [object conf] );

Parameters

conf object optional, toolbar config

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.attachToolbar({
    icons_path: "imgs/toolbar/icons/",
    json: "data/json/toolbar.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cells DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

cells

returns the cell object by the id

dhtmlXLayoutCell cells(string id);

Parameters

id string cell id

Returns

dhtmlXLayoutCell dhtmlXLayoutCell object of the specified cell

Example

var cell = myLayout.cells("a");
var myGrid = cell.attachGrid(...);

See also
  • API
    • dhtmlXLayoutCell API
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachFooter DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

detachFooter

detaches footer from component's bottom

void detachFooter();

Example

dhxComponent.detachFooter();

Details

footer DOM element will be attached to body with visibility:hidden css style

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachHeader DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

detachHeader

detaches header from component's top

void detachHeader();

Example

dhxComponent.detachHeader();

Details

header DOM element will be attached to body with visibility:hidden css style

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachMenu DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

detachMenu

detaches dhtmlxMenu from component's top

void detachMenu();

Example

var myMenu = dhxComponent.attachMenu();

// detach
dhxComponent.detachMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachRibbon DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

detachRibbon

detaches dhtmlxRibbon from component's top

void detachRibbon();

Example

var myRibbon = dhxComponent.attachRibbon();

// detach
dhxComponent.detachRibbon();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachStatusBar DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

detachStatusBar

detaches status bar object from component's bottom

void detachStatusBar();

Example

var sbObj = dhxComponent.attachStatusBar();

// detach
dhxComponent.detachStatusBar();
sbObj = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachToolbar DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

detachToolbar

detaches dhtmlxToolbar from component's top

void detachToolbar();

Example

var myToolbar = dhxComponent.attachToolbar();

// detach
dhxComponent.detachToolbar();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dockWindow DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

dockWindow

docks content from the window to layout cell

void dockWindow();

Deprecated

from version 4.0, new usage

myLayout.cells(id).dock();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachItem DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

forEachItem

iterator, calls a user-defined function for each cell

void forEachItem(function handler);

Parameters

handler function user-defined function, passed cell object as an argument

Example

myLayout.forEachItem(function(cell){
    // your code here, for example
    cell.setText(cell.getText()+" updated");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedMenu DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

getAttachedMenu

returns dhtmlxMenu instance attached to component's top

dhtmlXMenuObject getAttachedMenu();

Returns

dhtmlXMenuObject dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.attachMenu();

// somewhere in other place
var attachedMenu = dhxComponent.getAttachedMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedRibbon DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

getAttachedRibbon

returns dhtmlxRibbon instance attached to component's top

dhtmlXRibbon getAttachedRibbon();

Returns

dhtmlXRibbon dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.attachRibbon();

// somewhere in other place
var attachedRibbon = dhxComponent.getAttachedRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedStatusBar DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

getAttachedStatusBar

returns status bar object attached to component's bottom

object getAttachedStatusBar();

Returns

object StatusBar instance

Example

var myStatusBar = dhxComponent.attachStatusBar();

// somewhere in other place
var attachedStatusBar = dhxComponent.getAttachedStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedToolbar DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

getAttachedToolbar

returns dhtmlxToolbar instance attached to component's top

dhtmlXToolbarObject getAttachedToolbar();

Returns

dhtmlXToolbarObject dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.attachToolbar();

// somewhere in other place
var attachedToolbar = dhxComponent.getAttachedToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getEffect DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

getEffect

returns true if the effect is enabled

void getEffect();

Deprecated

from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getIdByIndex DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

getIdByIndex

returns cell id by index

void getIdByIndex();

Deprecated

from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getIndexById DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

getIndexById

returns cell index by id

void getIndexById();

Deprecated

from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMenu DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

hideMenu

hides dhtmlxMenu attached to component's top

void hideMenu();

Example

dhxComponent.hideMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hidePanel DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

hidePanel

hides cell header

void hidePanel();

Deprecated

from version 4.0, new usage:

myLayout.cells(id).hideHeader();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideRibbon DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

hideRibbon

hides dhtmlxRibbon attached to component's top

void hideRibbon();

Example

dhxComponent.hideRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideStatusBar DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

hideStatusBar

hides status bar object attached to component's bottom

void hideStatusBar();

Example

dhxComponent.hideStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideToolbar DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

hideToolbar

hides dhtmlxToolbar attached to component's top

void hideToolbar();

Example

dhxComponent.hideToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isPanelVisible DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

isPanelVisible

returns true, if cell header is visible

void isPanelVisible();

Deprecated

from version 4.0, new usage:

var state = myLayout.cells(id).isHeaderVisible();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


listAutoSizes DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

listAutoSizes

returns array with autosize settings for loaded layout (depends on pattern)

void listAutoSizes();

Example

var myLayout = dhtmlXLayoutObject(document.body, "5I");
var autoSizes = myLayout.listAutoSizes();

// console.log(autoSizes) =>
[
    "a;d;e",                      // current horizontal autosize
    "e",                          // current vertical autosize
    ["a;b;e", "a;c;e", "a;d;e"],  // array with available horizontal autosizes
    ["a", "b;c;d", "e"]           // array with available vertical autosizes
];

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


listPatterns DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

listPatterns

returns array with available layout patterns

void listPatterns();

Example

var patterns = myLayout.listPatterns();

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


listViews DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

listViews

returns array with available layout patterns

void listViews();

Deprecated

from version 4.0

var patterns = myLayout.listPatterns();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOff DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

progressOff

hides progress indicator for full component

void progressOff();

Example

dhxComponent.progressOff();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOn DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

progressOn

shows progress indicator for full component

void progressOn();

Example

dhxComponent.progressOn();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setAutoSize DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

setAutoSize

sets autosize for the layout

void setAutoSize(string hor,string ver);

Parameters

hor | string | cells that will be autosized horizontally
ver | string | cells that will be autosized vertically

Example

var myLayout = new dhtmlXLayoutObject(document.body, "5I");
// default autosize for "5I" pattern is ["a;d;e", "e"]
// redefine autosize
myLayout.setAutoSize("a;b;e", "a");

Details

list of available autosizes could be retrieved with listAutoSizes method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCollapsedText DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

setCollapsedText

sets text for collapsed cell

void setCollapsedText();

Deprecated

from version 4.0, new usage:

myLayout.cells(id).setCollapsedText();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setEffect DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

setEffect

sets effect

void setEffect();

Deprecated

from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setImagePath DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

setImagePath

sets path to images

void setImagePath();

Deprecated

from version 4.0, no longer used

myLayout.dhxWins.window(id).setIconCss(css);
Details

this method is used to pass imagePath value to dhtmlxWindows in case of initializing windows directly from dhtmlxLayuot

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOffsets DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

setOffsets

sets offsets for parent container from each side

void setOffsets(object conf);

Parameters

conf object offsets config

Example

// init component
var myComponent = new dhtmlXComponent(...);

// setting offsets for parent container
// this also works for document.body init
myComponent.setOffsets({
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
});

// also you can specify offset only for a single direction
myComponent.setOffsets({
    bottom: 10
});

// or for several directions
myComponent.setOffsets({
    right: 10,
    left: 10
});

Change log

added in 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSeparatorSize DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

setSeparatorSize

sets the width of a separator line in pixels

void setSeparatorSize(number index,number size);

Parameters

index | number | the separator's index
size | number | the width of a separator in pixels

Example

myLayout.setSeparatorSize(index, size);

Change log

added in 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSizes DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

setSizes

adjusts layout's outer size when parent's size changed

void setSizes();

Example

myLayout.setSizes();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

setSkin

sets skin

void setSkin(string skin);

Parameters

skin string "dhx_skyblue", "dhx_web", "dhx_terrace"

Example

myLayout.setSkin("dhx_skyblue");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMenu DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

showMenu

shows dhtmlxMenu attached to component's top

void showMenu();

Example

dhxComponent.showMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showPanel DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

showPanel

shows cell header

void showPanel();

Deprecated

from version 4.0, new usage:

myLayout.cells(id).showHeader();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRibbon DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

showRibbon

shows dhtmlxRibbon attached to component's top

void showRibbon();

Example

dhxComponent.showRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showStatusBar DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

showStatusBar

shows status bar object attached to component's bottom

void showStatusBar();

Example

dhxComponent.showStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showToolbar DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

showToolbar

shows dhtmlxToolbar attached to component's bottom

void showToolbar();

Example

dhxComponent.showToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unDockWindow DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

unDockWindow

undocks content from layout cell to the window

void unDockWindow();

Deprecated

from version 4.0, new usage:

myLayout.cells(id).undock();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dockWindow
  • forEachItem
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getEffect
  • getIdByIndex
  • getIndexById
  • hideMenu
  • hidePanel
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isPanelVisible
  • listAutoSizes
  • listPatterns
  • listViews
  • progressOff
  • progressOn
  • setAutoSize
  • setCollapsedText
  • setEffect
  • setImagePath
  • setOffsets
  • setSeparatorSize
  • setSizes
  • setSkin
  • showMenu
  • showPanel
  • showRibbon
  • showStatusBar
  • showToolbar
  • unDockWindow
  • unload
Start Layout dhtmlXLayout API Methods

unload

destructor, unloads layout

void unload();

Example

// init
var myLayout = new dhtmlXLayoutObject(...);

// unload
myLayout.unload();
myLayout = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onCollapse
    • onContentLoaded
    • onDblClick
    • onDock
    • onExpand
    • onPanelResizeFinish
    • onResize
    • onResizeFinish
    • onUndock
  • Others
Start Layout dhtmlXLayout API

Events

onCollapse | fires when cell collapsed
onContentLoaded | fires when content is loaded into cell via attachURL()
onDblClick | fires on header double-click
onDock | fires when cell docked to layout from window
onExpand | fires when cell expanded
onPanelResizeFinish | fires when one or several cells were resized
onResize | fires when layout resizes
onResizeFinish | fires when layout resizes
onUndock | fires when cell undocked to window
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCollapse DHTMLX Docs

Documentation
  • onCollapse
  • onContentLoaded
  • onDblClick
  • onDock
  • onExpand
  • onPanelResizeFinish
  • onResize
  • onResizeFinish
  • onUndock
Start Layout dhtmlXLayout API Events

onCollapse

fires when cell collapsed

void onCollapse(string name){ ... };

Parameters

name string cell name

Example

myLayout.attachEvent("onCollapse", function(name){
    // your code
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onContentLoaded DHTMLX Docs

Documentation
  • onCollapse
  • onContentLoaded
  • onDblClick
  • onDock
  • onExpand
  • onPanelResizeFinish
  • onResize
  • onResizeFinish
  • onUndock
Start Layout dhtmlXLayout API Events

onContentLoaded

fires when content is loaded into cell via attachURL()

void onContentLoaded(string id){ ... };

Parameters

id string cell name

Example

myLayout.attachEvent("onContentLoaded", function(id){
    // your code here
});

myLayout.cells("a").attachURL("test_page_1.html");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDblClick DHTMLX Docs

Documentation
  • onCollapse
  • onContentLoaded
  • onDblClick
  • onDock
  • onExpand
  • onPanelResizeFinish
  • onResize
  • onResizeFinish
  • onUndock
Start Layout dhtmlXLayout API Events

onDblClick

fires on header double-click

void onDblClick(string name){ ... };

Parameters

name string cell name

Example

myLayout.attachEvent("onDblClick", function(name){
       // your code
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDock DHTMLX Docs

Documentation
  • onCollapse
  • onContentLoaded
  • onDblClick
  • onDock
  • onExpand
  • onPanelResizeFinish
  • onResize
  • onResizeFinish
  • onUndock
Start Layout dhtmlXLayout API Events

onDock

fires when cell docked to layout from window

void onDock(string name){ ... };

Parameters

name string cell name

Example

myLayout.attachEvent("onDock", function(name){
    // your code
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onExpand DHTMLX Docs

Documentation
  • onCollapse
  • onContentLoaded
  • onDblClick
  • onDock
  • onExpand
  • onPanelResizeFinish
  • onResize
  • onResizeFinish
  • onUndock
Start Layout dhtmlXLayout API Events

onExpand

fires when cell expanded

void onExpand(string name){ ... };

Parameters

name string cell name

Example

myLayout.attachEvent("onExpand", function(name){
    // your code
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onPanelResizeFinish DHTMLX Docs

Documentation
  • onCollapse
  • onContentLoaded
  • onDblClick
  • onDock
  • onExpand
  • onPanelResizeFinish
  • onResize
  • onResizeFinish
  • onUndock
Start Layout dhtmlXLayout API Events

onPanelResizeFinish

fires when one or several cells were resized

void onPanelResizeFinish(array names){ ... };

Parameters

names array an array with cells names

Example

myLayout.attachEvent("onPanelResizeFinish", function(names){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onResize DHTMLX Docs

Documentation
  • onCollapse
  • onContentLoaded
  • onDblClick
  • onDock
  • onExpand
  • onPanelResizeFinish
  • onResize
  • onResizeFinish
  • onUndock
Start Layout dhtmlXLayout API Events

onResize

fires when layout resizes

void onResize(){ ... };

Deprecated

from version 4.0, new usage:

myLayout.attachEvent("onResizeFinish", function(){
    // your code here
});
Details

this event was called when layout was attached to dhtmlxWindow and only after the dhtmlxWindow was resized. In all other cases when something could affect the layout's external size, the event onResizeFinish was used

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onResizeFinish DHTMLX Docs

Documentation
  • onCollapse
  • onContentLoaded
  • onDblClick
  • onDock
  • onExpand
  • onPanelResizeFinish
  • onResize
  • onResizeFinish
  • onUndock
Start Layout dhtmlXLayout API Events

onResizeFinish

fires when layout resizes

void onResizeFinish(){ ... };

Example

myLayout.attachEvent("onResizeFinish", function(){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onUndock DHTMLX Docs

Documentation
  • onCollapse
  • onContentLoaded
  • onDblClick
  • onDock
  • onExpand
  • onPanelResizeFinish
  • onResize
  • onResizeFinish
  • onUndock
Start Layout dhtmlXLayout API Events

onUndock

fires when cell undocked to window

void onUndock(string name){ ... };

Parameters

name string cell name

Example

myLayout.attachEvent("onUnDock", function(name){
    // your code
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • dhxWins
    • items
Start Layout dhtmlXLayout API

Others

dhxWins | link to dhtmlXWindows instance
items | array with cells
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhxWins DHTMLX Docs

Documentation
  • dhxWins
  • items
Start Layout dhtmlXLayout API Others

dhxWins

link to dhtmlXWindows instance

dhtmlXWindows dhxWins;

Example

var myLayout = new dhtmlXLayoutObject(...);

// if windows js/css included on page,
// link to dhxWins available here,
// i.e. you can perform basic operations
myLayout.dhxWins.attachViewportTo("myViewport");

// undocking cell
myLayout.cells(id).undock();

// from this moment - you can see window
// with content detached from cell
var w1 = myLayout.dhxWins.window(id);

// now you can change window's settings
w1.setPosition(10, 10);
w1.setDimension(400, 400);

// if you need to open extra window,
// no needs to create another dhxWins instance, you can use current
// just make sure window id will not crossed with existing
// layuot cells ids
var w2 = myLayout.dhxWins.createWindow("w2", 1, 1, 100, 100);
w2.attachHTMLString("alert_message, ok/cancel buttons");
w2.button("close").hide();
w2.denyResize();
w2.denyPark();
w2.setModal(true);
w2.center();

Details
  • make sure you included corresponding windows js/css files on page
  • link to dhxWins available right after layout inited
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


items DHTMLX Docs

Documentation
  • dhxWins
  • items
Start Layout dhtmlXLayout API Others

items

array with cells

array items;

Deprecated

from version 4.0, new usage:

var cell = myLayout.cells(id);

Example

// old usage
var cell = myLayout.items[index];

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXLayoutCell API DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
    • Methods
    • Others
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

dhtmlXLayoutCell API

Methods
appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
collapse | collapses a cell
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
dock | docks content from the window to layout cell
expand | expands a cell
fixSize | fixes the size of a cell
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getCollapsedText | returns text for collapsed cell
getFrame | returns an iframe object when an URL is attached to a cell
getHeight | returns cell height
getId | returns the id of a cell
getIndex | returns cell index
getText | returns header text
getViewName | returns the name of the current view
getWidth | returns cell width
hideArrow | hides the header arrow for the specified cell
hideHeader | hides cell header
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
isArrowVisible | returns true if the header arrow is visible
isCollapsed | returns true if a cell is collapsed
isHeaderVisible | returns true if a header is visible
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
setCollapsedText | sets header text for collapsed cell
setHeight | sets cell height
setMinHeight | sets minimal height of a layout cell
setMinWidth | sets minimal width of a layout cell
setText | set header text
setWidth | sets cell width
showArrow | shows the header arrow for the specified cell
showHeader | shows the header of a cell
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
undock | undocks content from layout cell to the window
unloadView | unloads the specified view
Other
i18n defines the label of the "Expand/Collapse" button used for expanding/collapsing cells
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • appendObject
    • attachAccordion
    • attachCarousel
    • attachChart
    • attachDataView
    • attachEditor
    • attachForm
    • attachGrid
    • attachHTMLString
    • attachLayout
    • attachList
    • attachMap
    • attachMenu
    • attachObject
    • attachRibbon
    • attachScheduler
    • attachSidebar
    • attachStatusBar
    • attachTabbar
    • attachToolbar
    • attachTree
    • attachTreeView
    • attachURL
    • attachVault
    • collapse
    • detachMenu
    • detachObject
    • detachRibbon
    • detachStatusBar
    • detachToolbar
    • dock
    • expand
    • fixSize
    • getAttachedMenu
    • getAttachedObject
    • getAttachedRibbon
    • getAttachedStatusBar
    • getAttachedToolbar
    • getCollapsedText
    • getFrame
    • getHeight
    • getId
    • getIndex
    • getText
    • getViewName
    • getWidth
    • hideArrow
    • hideHeader
    • hideMenu
    • hideRibbon
    • hideStatusBar
    • hideToolbar
    • isArrowVisible
    • isCollapsed
    • isHeaderVisible
    • progressOff
    • progressOn
    • reloadURL
    • setCollapsedText
    • setHeight
    • setMinHeight
    • setMinWidth
    • setText
    • setWidth
    • showArrow
    • showHeader
    • showInnerScroll
    • showMenu
    • showRibbon
    • showStatusBar
    • showToolbar
    • showView
    • undock
    • unloadView
  • Others
Start Layout dhtmlXLayoutCell API

Methods

appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
collapse | collapses a cell
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
dock | docks content from the window to layout cell
expand | expands a cell
fixSize | fixes the size of a cell
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getCollapsedText | returns text for collapsed cell
getFrame | returns an iframe object when an URL is attached to a cell
getHeight | returns cell height
getId | returns the id of a cell
getIndex | returns cell index
getText | returns header text
getViewName | returns the name of the current view
getWidth | returns cell width
hideArrow | hides the header arrow for the specified cell
hideHeader | hides cell header
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
isArrowVisible | returns true if the header arrow is visible
isCollapsed | returns true if a cell is collapsed
isHeaderVisible | returns true if a header is visible
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
setCollapsedText | sets header text for collapsed cell
setHeight | sets cell height
setMinHeight | sets minimal height of a layout cell
setMinWidth | sets minimal width of a layout cell
setText | set header text
setWidth | sets cell width
showArrow | shows the header arrow for the specified cell
showHeader | shows the header of a cell
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
undock | undocks content from layout cell to the window
unloadView | unloads the specified view
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


appendObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

appendObject

attaches an object to a cell without clearing cell content

void appendObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

dhxComponent.cells(id).appendObject("div_a");
dhxComponent.cells(id).appendObject("div_b");
dhxComponent.cells(id).appendObject("div_c");

Details

  • style "display:none" will be removed automatically after attaching, it's useful to keep content hidden while not attached

  • for this mode a cell will add scrolls automatically, there's no need to specify width/height to the attached object (divs without specified dimension are usually stretched to 100% of width and height adjusted to content)

<div id="div_a" style="display:none;"> ... </div>
<div id="div_b"> ... </div>
<div id="div_c"> ... </div>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachAccordion DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachAccordion

attaches dhtmlxAccordion to a cell

dhtmlXAccordion attachAccordion( [object conf] );

Parameters

conf object optional, accordion config for object-api init

Returns

dhtmlXAccordion dhtmlXAccordion instance

Example

var myAcc = dhxComponent.cells(id).attachAccordion();
myAcc.addItem("a1", "First item", true);
myAcc.addItem("a2", "Second item");

// or
var myAcc = dhxComponent.cells(id).attachAccordion({
    icons_path: "icons/",
    items: [
        { id: "a1", text: "Main Page", icon: "flag_red.png" },
        { id: "a2", text: "Navigation", icon: "flag_green.png" },
        { id: "a3", text: "Feedback", icon: "flag_blue.png" }
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachCarousel DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachCarousel

attaches a carousel object to a cell

object attachCarousel(number width,number height, [object conf] );

Parameters

width | number | the width of a carousel
height | number | the height of a carousel
conf | object | optional, the config of a carousel for object-api init

Returns

object dhtmlXCarousel instance

Example

var myCarousel = dhxComponent.cells(id).attachCarousel(400, 300, conf){
    ...
});

Change log

added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachChart DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachChart

attaches dhtmlxChart to a cell

dhtmlXChart attachChart(object conf);

Parameters

conf object chart conf (please, check chart docs for details)

Returns

dhtmlXChart dhtmlXChart instance

Example

var myChart = dhxComponent.cells(id).attachChart({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachDataView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachDataView

attaches dhtmlxDataView to a cell

dhtmlXDataView attachDataView(object conf);

Parameters

conf object dataview conf (please, check DataView docs for details)

Returns

dhtmlXDataView dhtmlXDataView instance

Example

var myDataView = dhxComponent.cells(id).attachDataView({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEditor DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachEditor

attaches dhtmlxEditor to a cell

dhtmlXEditor attachEditor();

Returns

dhtmlXEditor dhtmlXEditor instance

Example

var myEditor = dhxComponent.cells(id).attachEditor({
    // editor config here
});

Details

For details about Editor initialization, read the Object Constructor article.

More info about attaching Editor to other components is given in the article Adding Editor to DHTMLX Components.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachForm DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachForm

attaches dhtmlxForm to a cell

dhtmlXForm attachForm(object conf);

Parameters

conf object form conf (please, check form docs for details)

Returns

dhtmlXForm dhtmlXForm instance

Example

var myForm = dhxComponent.cells(id).attachForm({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachGrid DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachGrid

attaches dhtmlxGrid to a cell

dhtmlXGridObject attachGrid( [object config] );

Parameters

config object optional, an object with the Grid configuration

Returns

dhtmlXGridObject dhtmlXGridObject instance

Example

// without parameters
var myGrid = dhxComponent.cells(id).attachGrid();

// passing a config object as a parameter
grid1 = myLayout.cells("a").attachGrid({
    image_path:'codebase/imgs/',
    columns: [{
        label: "Column A",
        width: 100,
        type: "ro",
        sort: "int",
        align: "right"
    },{
        label: "Column B",
        width: 250,
        type: "ed",
        sort: "str",
        align: "left"
    }],
    multiselect: true,
    xml: "grid.xml"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHTMLString DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachHTMLString

attaches HTML content to a cell

void attachHTMLString(string htmlString);

Parameters

htmlString string an HTML string to attach

Example

dhxComponent.cells(id).attachHTMLString("<div>some content</div>");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachLayout DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachLayout

attaches dhtmlxLayout to a cell

dhtmlXLayoutObject attachLayout(string|object conf);

Parameters

conf string|object layout pattern or api-init config

Returns

dhtmlXLayoutObject dhtmlXLayoutObject instance

Example

// pattern only
var myLayout = dhxComponent.cells(id).attachLayout("4H");

// api-init config
var myLayout = dhxComponent.cells(id).attachLayout({
    pattern: "4H",
    cells: [
        {id: "a", text: "Navigation", width: 100, header: false},
        {id: "b", text: "Advertisement", height: 100},
        {id: "c", text: "Main Page"},
        {id: "d", text: "Links", collapse: true}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachList DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachList

attaches dhtmlxList to a cell

dhtmlXList attachList(object conf);

Parameters

conf object list conf (please, check List docs for details)

Returns

dhtmlXList dhtmlXList instance

Example

var myList = dhxComponent.cells(id).attachList({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMap DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachMap

attaches Google Maps to a cell

object attachMap( [object opts] );

Parameters

opts object optional, map options (please, check Google docs for details)

Returns

object google.maps.Map object

Example

var GMaps = dhxLayout.cells(id).attachMap();
//or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = dhxLayout.cells(id).attachMap(mapParams);

Details

Please, check Google docs for details.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachMenu

attaches dhtmlxMenu to a cell

object attachMenu( [object conf] );

Parameters

conf object optional, menu config

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.cells(id).attachMenu({
    icons_path: "imgs/menu/icons/",
    json: "data/json/menu.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachObject

attaches an HTML object to a cell

void attachObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

dhxComponent.cells(id).attachObject("objectId");

Details
  • style "display:none" (if set) will be removed automatically after attaching, useful to keep content hidden while not attached
<div id="objectId" style="display: none;">...</div>
  • for this mode cell will not render native scrolls, so you need to use the following style: "width: 100%; height: 100%; overflow: auto;" to make attached object's scrolls appear when necessary
div#objectId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}
See also
  • API
    • detachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


attachRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachRibbon

attaches dhtmlxRibbon to a cell

object attachRibbon( [object conf] );

Parameters

conf object optional, ribbon config

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.cells(id).attachRibbon({
    icons_path: "imgs/ribbon/icons/",
    json: "data/json/ribbon.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachScheduler DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachScheduler

attaches dhtmlxScheduler to a cell

object attachScheduler( [Date day,string mode,string contId,object scheduler] );

Parameters

day | Date | (optional) js date object, initial date in scheduler, current date by default
mode | string | (optional) name of the initial mode ("month", "day", "week"), "week" by default
contId | string | (optional) extended config, please see below
scheduler | object | (optional) dhtmlxScheduler object (another instance, only PRO version of scheduler)

Returns

object dhtmlXScheduler instance

Example

var myScheduler = dhxComponent.cells(id).attachScheduler();

// or
var myScheduler = dhxComponent.cells(id).attachScheduler(null, "month");

//or
var sTabs = '<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>'+
            '<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>'+
            '<div class="dhx_cal_tab" name="month_tab" style="right:280px;"></div>'+
            '<div class="dhx_cal_tab" name="timeline_tab" style="right:76px;"></div>';

var myScheduler = dhxComponent.cells(id).attachScheduler(null, "month", sTabs);

Details

There are two possible values of the contId parameter:

  • the id of the div that specifies the entire scheduler configuration
  • a string with the tabs' divs. In this case a scheduler will be rendered with the default configuration, except for the tabs: they can be presented by the default "day", "week", "month" members or by any other tabs' collection
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachSidebar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachSidebar

attaches dhtmlxSidebar to a cell

object attachSidebar( [object conf] );

Parameters

conf object optional, sidebar config for api-init

Returns

object dhtmlxSidebar instance

Example

var mySidebar = dhxComponent.cells(id).attachSidebar({
    items: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachStatusBar

attaches a status bar to a cell

obj attachStatusBar( [object conf] );

Parameters

conf object optional, status bar init params

Returns

obj status bar object

Example

/* conf param properties */
{
    text:   "Text", // status bar init text
    height: 20,     // status bar init height
    paging: true    // (optional) true to use for grid paging
}

/* init/attach status bar */

// default behavior
var sbObj = dhxComponent.cells(id).attachStatusBar();

// with text
var sbObj = dhxComponent.cells(id).attachStatusBar({text: "Loading..."});

// with text and custom height
var sbObj = dhxComponent.cells(id).attachStatusBar({text: "Loading...", height: 30});

/* operations with status bar object */

// set text
sbObj.setText("Page was successfully loaded");

// get text
var text = sbObj.getText();

Details

Since version 4.1 toolbar can be attached into statusbar in order to be used for paging in grid:

// first attach status bar
dhxComponent.cells(id).attachStatusBar({
    text:   "<div id='pagingArea'></div>",
    paging: true
});

// then init paging in grid
myGrid.enablePaging(true, 9, 3, "pagingArea");
myGrid.setPagingSkin("toolbar");
Change log
  • conf param was added in version 4.0
  • paging:true added in 4.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTabbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachTabbar

attaches dhtmlxTabbar to a cell

object attachTabbar( [object conf] );

Parameters

conf object optional, tabbar config for API-initialization

Returns

object dhtmlXTabbar instance

Example

var myTabbar = dhxComponent.cells(id).attachTabbar({
    align: "right",
    mode: "bottom",
    tabs: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Details

The old parameter used for tabbar initialization - "mode" is deprecated since version 4.0 and is replaced with "conf".

To set the tabs mode, use conf.mode:

// old deprecated
var myTabbar = dhxComponent.cells(id).attachTabbar("bottom");
// new usage
var myTabbar = dhxComponent.cells(id).attachTabbar({mode:"bottom"});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachToolbar

attaches dhtmlxToolbar to a cell

object attachToolbar( [object conf] );

Parameters

conf object optional, toolbar config

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.cells(id).attachToolbar({
    icons_path: "imgs/toolbar/icons/",
    json: "data/json/toolbar.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTree DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachTree

attaches dhtmlxTree to a cell

object attachTree( [string|number rootId] );

Parameters

rootId string|number (optional) tree root id (check Tree docs for details)

Returns

object dhtmlXTreeObject instance

Example

var myTree = dhxComponent.cells(id).attachTree();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTreeView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachTreeView

attaches dhtmlxTreeView to a cell

object attachTreeView( [object conf] );

Parameters

conf object optional, treeview config

Returns

object dhtmlXTreeViewObject instance

Example

var myTreeView = dhxComponent.cells(id).attachTreeView({
    items: [
        {id: 1, text: "Books", open: 1, items: [
            {id: 2, text: "Turned at Dark / C. C. Hunter"},
            {id: 3, text: "Daire Meets Ever / Alyson Noël"}
        ]}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachURL DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachURL

attaches the specified URL to a cell

void attachURL(string url, [boolean ajax,boolean|object postData] );

Parameters

url | string | URL to attach
ajax | boolean | (optional) if set to true, the URL will be loaded by AJAX (async GET), false by default
postData | boolean|object | (optional) performs POST request (true for a simple post or an object with params)

Example

/* iframe */
// GET
dhxComponent.cells(id).attachURL("page.html");
// POST
dhxComponent.cells(id).attachURL("page.html", null, true);
// POST with params
dhxComponent.cells(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

/* by ajax */
// GET
dhxComponent.cells(id).attachURL("page.html", true);
// POST
dhxComponent.cells(id).attachURL("page.html", true, true);
// POST with params
dhxComponent.cells(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Details

important notes:

  • to prevent caching in some browsers, an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • loading is async, so to proceed with content, you need onContentLoaded event
  • learn how to control attached content here
Change log

postData param and the ability to perform POST request are added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachVault DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

attachVault

attaches dhtmlxVault to a cell

dhtmlXVaultObject attachVault(object conf);

Parameters

conf object Vault config for object-api initialization

Returns

dhtmlXVaultObject dhtmlxVault instance

Example

var myVault = dhxComponent.cells(id).attachVault({
    uploadUrl:      "http://my_mega_server/upload_handler.php",
    swfUrl:         "http://my_mega_server/upload_handler.php",
    slUrl:          "http://my_mega_server/upload_handler.php",
    swfPath:        "dhxvault.swf",
    slXap:          "dhxvault.xap"
});

Details

if separate component files are used - dhtmlxvault.js should be included after dhtmlxcontainer.js

Change log

added in 3.6.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


collapse DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

collapse

collapses a cell

void collapse();

Example

myLayout.cells(id).collapse();

See also
  • API
    • expand
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


detachMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

detachMenu

detaches dhtmlxMenu from a cell

void detachMenu();

Example

var myMenu = dhxComponent.cells(id).attachMenu();

// detach
dhxComponent.cells(id).detachMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

detachObject

detaches any attached content from a cell

void detachObject( [boolean remove,string|number|HTMLElement moveTo] );

Parameters

remove | boolean | (optional) set to true to remove the content permanently, false by default
moveTo | string|number|HTMLElement | (optional) the object's id or the object itself to move content to (if the "remove" parameter is set to false)
Details

Let's consider possible behavior, depending on which we pass particular parameters to the method.

Assuming that we have attached Grid to the component's cell:

var myGrid = dhxComponent.cells(id).attachGrid();

In case we need to detach Grid later, there are several possible options:

1) calling the detachObject() method without parameters:

dhxComponent.cells(id).detachObject();

The Grid object won't be completely removed. It will be attached to the document.body outside the component's container and hidden with the display:none property.

2) calling the detachObject() method with the "remove" parameter set to true:

dhxComponent.cells(id).detachObject(true);

The cell will be cleared. You need to clear the Grid object to remove it permanently.

myGrid = null;

3) calling the detachObject() method with the "remove" parameter set to false and passing an object (object's id) as the second parameter:

// assuming that a node with the id="tempNode" exists
dhxComponent.cells(id).detachObject(false, "tempNode");

The Grid object won't be completely removed. It will be moved to the "tempNode" container and hidden with the display:none property.

Note also that if you call dhxComponent.unload(), the attached content will be removed permanently.

See also
  • API
    • attachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


detachRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

detachRibbon

detaches dhtmlxRibbon from a cell

void detachRibbon();

Example

var myRibbon = dhxComponent.cells(id).attachRibbon();

// detach
dhxComponent.cells(id).detachRibbon();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

detachStatusBar

detaches status bar from a cell

void detachStatusBar();

Example

var sbObj = dhxComponent.cells(id).attachStatusBar();

// detach
dhxComponent.cells(id).detachStatusBar();
sbObj = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

detachToolbar

detaches dhtmlxToolbar from a cell

void detachToolbar();

Example

var myToolbar = dhxComponent.cells(id).attachToolbar();

// detach
dhxComponent.cells(id).detachToolbar();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dock DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

dock

docks content from the window to layout cell

void dock();

Example

myLayout.cells(id).dock();

See also
  • API
    • undock
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


expand DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

expand

expands a cell

void expand();

Example

myLayout.cells(id).expand();

See also
  • API
    • collapse
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


fixSize DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

fixSize

fixes the size of a cell

void fixSize( [boolean width,boolean height] );

Parameters

width | boolean | 'says' to fix the width of the cell (optional)
height | boolean | 'says' to fix the height of the cell (optional)

Example

myLayout.cells(id).fixSize(true, false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

getAttachedMenu

returns dhtmlxMenu instance attached to a cell

object getAttachedMenu();

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.cells(id).attachMenu();

// somewhere in a different place
var attachedMenu = dhxComponent.cells(id).getAttachedMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

getAttachedObject

returns the object attached to a cell

string|object getAttachedObject();

Returns

string|object attached object

Example

var myGrid = dhxComponent.cells(id).attachGrid({...});

// somewhere in other place
var obj = dhxComponent.cells(id).getAttachedObject();
if (typeof(window.dhtmlXGridObject) == "function" && obj instanceof dhtmlXGridObject) {
    // code related to grid
} else {
    // some other code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

getAttachedRibbon

returns dhtmlxRibbon instance attached to a cell

object getAttachedRibbon();

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.cells(id).attachRibbon();

// somewhere in other place
var attachedRibbon = dhxComponent.cells(id).getAttachedRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

getAttachedStatusBar

returns status bar object attached to a cell

object getAttachedStatusBar();

Returns

object status bar instance

Example

var myStatusBar = dhxComponent.cells(id).attachStatusBar();

// somewhere in a different place
var attachedStatusBar = dhxComponent.cells(id).getAttachedStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

getAttachedToolbar

returns dhtmlxToolbar instance attached to a cell

object getAttachedToolbar();

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.cells(id).attachToolbar();

// somewhere in a different  place
var attachedToolbar = dhxComponent.cells(id).getAttachedToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCollapsedText DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

getCollapsedText

returns text for collapsed cell

void getCollapsedText();

Example

var collapsedText = myLayout.cells(id).getCollapsedText();

Details

if collapsed text not set earlier, i.e. myLayout.cells(id).setCollapsedText() wans't called, default text will returned

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFrame DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

getFrame

returns an iframe object when an URL is attached to a cell

HTMLElement getFrame();

Returns

HTMLElement an iframe object

Example

// as loading is async, you need to do it through an event
dhxComponent.attachEvent("onContentLoaded", function(id){

    // get frame
    var ifr = dhxComponent.cells(id).getFrame();

    // access to iframe's element
    var elem = ifr.contentWindow.document.getElementById("someId");
    elem.innerHTML = "some text";

    // access to iframe's function
    // make sure that the function is in the iframe's window scope
    ifr.contentWindow.someFunc();

});

// and then attach an URL
dhxComponent.cells(id).attachURL("server/page.php?param=value");

Details

You can learn how to manage the attached content from the article Attaching URL.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getHeight DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

getHeight

returns cell height

number getHeight();

Returns

number cell height

Example

var h = myLayout.cells(id).getHeight();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getId DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

getId

returns the id of a cell

string|number getId();

Returns

string|number the cell's id

Example

dhxComponent.forEachCell(function(cell){
    var id = cell.getId();
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getIndex DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

getIndex

returns cell index

number getIndex();

Deprecated

from version 4.0

Returns

number cell index

Example

var index = myLayout.cells(id).getIndex();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getText DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

getText

returns header text

string getText();

Returns

string header text

Example

var text = myLayout.cells(id).getText();

See also
  • API
    • setText
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


getViewName DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

getViewName

returns the name of the current view

string getViewName();

Returns

string view name

Example

var name = dhxComponent.cells(id).getViewName();

Details

The default view name is "def", it is created automatically when a cell is created

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getWidth DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

getWidth

returns cell width

number getWidth();

Returns

number cell width

Example

var w = myLayout.cells(id).getWidth();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideArrow DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

hideArrow

hides the header arrow for the specified cell

void hideArrow();

Example

myLayout.cells(id).hideArrow();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideHeader DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

hideHeader

hides cell header

void hideHeader();

Example

myLayout.cells(id).hideHeader();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

hideMenu

hides dhtmlxMenu attached to a cell

void hideMenu();

Example

dhxComponent.cells(id).hideMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

hideRibbon

hides dhtmlxRibbon attached to a cell

void hideRibbon();

Example

dhxComponent.cells(id).hideRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

hideStatusBar

hides status bar object attached to a cell

void hideStatusBar();

Example

dhxComponent.cells(id).hideStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

hideToolbar

hides dhtmlxToolbar attached to a cell

void hideToolbar();

Example

dhxComponent.cells(id).hideToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isArrowVisible DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

isArrowVisible

returns true if the header arrow is visible

boolean isArrowVisible();

Returns

boolean true if arrow is visible

Example

var state = myLayout.cells(id).isArrowVisible();

Change log

addeed in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isCollapsed DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

isCollapsed

returns true if a cell is collapsed

boolean isCollapsed();

Returns

boolean true if a cell is collapsed

Example

var state = myLayout.cells(id).isCollapsed();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isHeaderVisible DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

isHeaderVisible

returns true if a header is visible

boolean isHeaderVisible();

Returns

boolean true if header is visible

Example

var state = myLayout.cells(id).isHeaderVisible();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOff DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

progressOff

hides the progress indicator in a cell

void progressOff();

Example

dhxComponent.cells(id).progressOff();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOn DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

progressOn

shows the progress indicator in a cell

void progressOn();

Example

dhxComponent.cells(id).progressOn();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


reloadURL DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

reloadURL

reloads the attached URL in a cell

void reloadURL();

Example

dhxComponent.cells(id).reloadURL();

Details

reloads both iFrame/AJAX attached, keeps postData and params, if any

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCollapsedText DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

setCollapsedText

sets header text for collapsed cell

void setCollapsedText(string text);

Parameters

text string text for collapsed cell (html allowed)

Example

myLayout.cells(id).setCollapsedText("Collapsed cell");
// or
myLayout.cells(id).setCollapsedText("<span style='color:red;'>Important!</span>");

Details

You can specify the 2nd parameter as an image. It can be used for correct representation when you deal with vertical cells.

var collText = dhxLayout.cells("a").setCollapsedText("<img src='../common/labels/1.gif'
width='18px' height='81px' border='0'>");
Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setHeight DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

setHeight

sets cell height

void setHeight(number height);

Parameters

height number cell height

Example

myLayout.cells(id).setHeight(200);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setMinHeight DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

setMinHeight

sets minimal height of a layout cell

void setMinHeight(number min_height);

Parameters

min_height number the minimal height of a cell

Example

myLayout.cells(id).setMinHeight(min_height);

Change log

added in version 4.1.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setMinWidth DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

setMinWidth

sets minimal width of a layout cell

void setMinWidth(number min_width);

Parameters

min_width number the minimal width of a cell

Example

myLayout.cells(id).setMinWidth(min_width);

Change log

added in version 4.1.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setText DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

setText

set header text

void setText(string text);

Parameters

text string header text (html allowed)

Example

myLayout.cells(id).setText("New Text");
// or
myLayout.cells(id).setText("<span style='color:red;'>Important!</span>");

See also
  • API
    • getText
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setWidth DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

setWidth

sets cell width

void setWidth(number width);

Parameters

width number cell width

Example

myLayout.cells(id).setWidth(200);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showArrow DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

showArrow

shows the header arrow for the specified cell

void showArrow();

Example

myLayout.cells(id).showArrow();

Change log

addeed in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showHeader DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

showHeader

shows the header of a cell

void showHeader();

Example

myLayout.cells(id).showHeader();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showInnerScroll DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

showInnerScroll

shows inner cell scrolls

void showInnerScroll();

Example

dhxComponent.cells(id).showInnerScroll();

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

showMenu

shows dhtmlxMenu attached to a cell

void showMenu();

Example

dhxComponent.cells(id).showMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

showRibbon

shows dhtmlxRibbon attached to a cell

void showRibbon();

Example

dhxComponent.cells(id).showRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

showStatusBar

shows status bar object attached to a cell

void showStatusBar();

Example

dhxComponent.cells(id).showStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

showToolbar

shows dhtmlxToolbar attached to a cell

void showToolbar();

Example

dhxComponent.cells(id).showToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

showView

shows the specified view, creates a new one if it doesn't exist

boolean showView(string name);

Parameters

name string view name

Returns

boolean true if view was accessed first time, false otherwise

Example

// here is an example how to initialize content
// in several views on demand inside of a cell

// 1) for the default view "def" we will simply attach an URL
// 2) for the "grid" view  we will attach menu and grid
// 3) and for the "tree" view we will attach toolbar and tree

var myMenu;
var myGrid;
var myToolbar;
var myTree;

// the default view is ready right after component initialization
dhxComponent.cells(id).attachURL("http://somedomain.com/page.html");

function initView(name) {
    // assuming that this function will be called after some user action
    // like a button click or some other
    var state = dhxComponent.cells(id).showView(name);
    if (state == true) {
        // first call, initializes corresponding components
        if (name == "grid") {
            myMenu = dhxComponent.cells(id).attachMenu();
            myGrid = dhxComponent.cells(id).attachGrid();
        } else if (name == "tree") {
            myToolbar = dhxComponent.cells(id).attachToolbar();
            myTree = dhxComponent.cells(id).attachTree();
        }
    }
}

Details

The default view name is "def", it is created automatically when a cell is created

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


undock DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

undock

undocks content from layout cell to the window

void undock(number x,number y,number width,number height);

Parameters

x | number | optional, window x-position
y | number | optional, window y-position
width | number | optional, window width
height | number | optional, window height

Example

myLayout.cells(id).undock();
// or
myLayout.cells(id).undock(10, 10, 320, 200);

Details

Note, to use the method you need to have dhtmlxWindows's source files included on the page.

Change log

params: x, y, width, height - added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unloadView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • collapse
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • dock
  • expand
  • fixSize
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getCollapsedText
  • getFrame
  • getHeight
  • getId
  • getIndex
  • getText
  • getViewName
  • getWidth
  • hideArrow
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isArrowVisible
  • isCollapsed
  • isHeaderVisible
  • progressOff
  • progressOn
  • reloadURL
  • setCollapsedText
  • setHeight
  • setMinHeight
  • setMinWidth
  • setText
  • setWidth
  • showArrow
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • undock
  • unloadView
Start Layout dhtmlXLayoutCell API Methods

unloadView

unloads the specified view

void unloadView(string name);

Parameters

name string view name

Example

// create test view and switch to it
var state = dhxComponent.cells(id).showView("test_view");
console.log(state); // true

// attach some content
dhxComponent.cells(id).attachMenu();
dhxComponent.cells(id).attachGrid();

// go back to default view
var state = dhxComponent.cells(id).showView("def");
console.log(state); // false

// unload test_view
dhxComponent.cells(id).unloadView("test_view");

// open test_view again
var state = dhxComponent.cells(id).showView("test_view");
console.log(state); // true

// attach some content
dhxComponent.cells(id).attachMenu();
dhxComponent.cells(id).attachGrid();

// unload test_view
dhxComponent.cells(id).unloadView("test_view");

// check active view
var name = dhxComponent.cells(id).getViewName();
console.log(name); // "test_view"

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Others
    • i18n
Start Layout dhtmlXLayoutCell API

Others

i18n defines the label of the "Expand/Collapse" button used for expanding/collapsing cells
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


i18n DHTMLX Docs

Documentation
  • i18n
Start Layout dhtmlXLayoutCell API Others

i18n

defines the label of the "Expand/Collapse" button used for expanding/collapsing cells

object i18n;

Example

dhtmlXLayoutCell.prototype.i18n.expand = "Expand/Collapse";

See also
  • Articles
    • Expanding/Collapsing Cells
    • Change log

    added in version 5.1

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


Initializing Layout on a Page DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
    • Layout Source Files
    • Constructor
    • Full-screen Initialization
    • Initialization in HTML Element
    • Initialization in Window
    • Initialization in Layout Cell
    • Recommended Way of Initialization
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Initializing Layout on a Page

Layout Source Files

To start working with dhtmlxLayout, you need to include layout js/css files on a page.

In order to use dhtmlxLayout as a separate component, you need to include its source files on the page. There are two of them:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxlayout.css">
    <script src="codebase/dhtmlxlayout.js"></script>
</head>

If you use dhtmlxLayout as a part of "dhtmlxSuite" package, you need to have 2 files included:

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

dhtmlxlayout.js/.css files are part of dhtmlx.js/.css, so there is no need to include them separately.

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="https://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="https://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="https://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="https://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Constructor

After you've included the necessary source files, you can initialize Layout object.

var myLayout = new dhtmlXLayoutObject({

    parent:     "layoutObj",    // id/object, parent container for layout
    pattern:    "3L",           // string, layout's pattern
    skin:       "dhx_skyblue",  // optional,"dhx_skyblue"/"dhx_web"/"dhx_terrace"

    offsets: {          // optional, offsets for fullscreen init
        top:    10,     // you can specify all four sides
        right:  10,     // or only the side where you want to have an offset
        bottom: 10,
        left:   10
    },

    cells: [    // optional, cells configuration according to the pattern
                // you can specify only the cells you want to configure
                // all params are optional
        {
            id:             "a",        // id of the cell you want to configure
            text:           "Text",     // header text
            collapsed_text: "Text 2",   // header text for a collapsed cell
            header:         false,      // hide header on init
            width:          100,        // cell init width
            height:         100,        // cell init height
            collapse:       true        // collapse on init
            fix_size:       [true,null] // fix cell's size, [width,height]
        },
        {}, // other cell if any
        ...
    ]
});

// old way
var myLayout = new dhtmlXLayoutObject(parentId, pattern, skin);

// where:
parentId    // id/object, parent container where the layout will be located
pattern     // string, layout's pattern
skin        // string, optional, "dhx_skyblue", "dhx_web", "dhx_terrace"

Full-screen Initialization

Generally, to create a full-screen layout on the page, use the code as in:

<html>
<head>
<style>
    /* it's important to set width/height to 100% for full-screen init */
    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        overflow: hidden;
    }

</style>
<script>
    var myLayout;
    function doOnLoad() {
        myLayout = new dhtmlXLayoutObject({
            parent: document.body,  // parent container
            pattern: "3E"           // layout's pattern
        });
    }
</script>
</head>
<body onload="doOnLoad();">

</body>
</html>

It's also possible to set offsets for Layout in the full screen mode.

Initialization in HTML Element

To initialize dhtmlxLayout in an HTML element, do the following:

1) create an HTML element where the layout will be placed later, don't forget to specify its width and height:

<div id="layoutObj" style="position: relative; width: 600px; height: 400px;"></div>

The height and width of the container can't be set in percentage, they are specified in pixels only.

2) create a dhtmlXLayoutObject object and place it into the HTML object that you've just created:

var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",    // id or object for parent container
    pattern: "3L",          // layout's pattern
    skin: "dhx_skyblue"     // optional, layout's skin
});
//or
var myLayout = new dhtmlXLayoutObject({
    parent: document.getElementById("layoutObj"),
    pattern: "3L"
});
// the old way still works
var myLayout = new dhtmlXLayoutObject("layoutObj", "3L", "dhx_skyblue");

Initialization in Window

To create a layout in a window, do the following:

1) create a dhtmlxWindows object:

var dhxWins = new dhtmlXWindows();
var layoutWin = dhxWins.createWindow("w1", 20, 20, 600, 400);

The following parameters are passed to dhxWins.createWindow():

  • w1 - the id of the window;
  • 20, 20 - the left and the top positions of the window;
  • 600, 400 - the width and the height of the window.

2) call the attachLayout method to render a layout in the window:

var myLayout = new layoutWin.attachLayout("3L");
// or using a more extended config
var myLayout = new layoutWin.attachLayout({
    pattern: "3L",
    cells: [...]
});

Initialization in Layout Cell

This way allows you to build any page structure and create a complex layout. To create a new layout in a cell of the existing one, do the following:

1) create a dhtmlXLayoutObject object:

var layout1 = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L"
});

2) attach it to a cell of the other layout by means of the attachLayout method:

var layout2 = layout1.cells("a").attachLayout("3E");
// or using more extended config
var layout2 = new layout1.attachLayout({
    pattern: "3L",
    cells: [...]
});

Recommended Way of Initialization

<html>
<head>
<script>
    var myLayout;
    function doOnLoad() {
        myLayout = new dhtmlXLayoutObject({
            // config here
        });
    }
</script>
</head>
<body onload="doOnLoad();">

</body>
</html>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Layout Skins DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Layout Skins

The following predefined skins are available:

  • "material"

  • "dhx_skyblue"

  • "dhx_web"

  • "dhx_terrace"

<!-- here we will place the layout --->
<div id="layoutObj" style="position: relative; width: 600px; height: 400px;"></div>

The "material" skin is used by default. Depending on the attached CSS skin-file, layout will try to detect the skin automatically, just initialize the layout:

var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L"
});

In order to set skin manually use the following code:

var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L",
    skin: "dhx_web"
});

You can also specify a skin as the 3rd param in the old style initialization:

var myLayout = new dhtmlXLayoutObject("layoutObj", "3L", "dhx_web");

One more way to set a skin is to use the setSkin method:

var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L"
});
myLayout.setSkin("dhx_web");

If the predefined skins don't fit you, try to create your own one with the help of the SkinBuilder tool. Read the details here.

It's impossible to remove/hide cells' separators. Layout's separators are hardcoded. They are inseparable visual and functional elements of layout's structure.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Layout Patterns DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
    • Built-in patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Layout Patterns

A pattern is a way to place cells inside of a layout. It is set on the init stage and there is no possibility to change it on-the-fly.

// api-init
var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L"   // <-- pattern
});

// old init way
var myLayout = new dhtmlXLayoutObject("layoutObj", "3L");

// when attaching to a container component
var myLayout = dhxComponent.cells(id).attachLayout("3L");
// or
var myLayout = dhxComponent.cells(id).attachLayout({
    pattern: "3L",
    other_conf: ...
});

Built-in patterns

dhtmlxLayout provides the following predefined patterns:

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Layout Offsets DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Layout Offsets

dhtmlxLayout supports offsets that can be useful in full-screen init. For example, to add a logo to the header or company's info to the footer.

1) you can set offset on init:

var myLayout = new dhtmlXLayoutObject({
    parent: document.body,
    pattern: "3L",
    offsets: {
        top: 10,
        right: 20,
        bottom: 30,
        left: 40
    }
});

2) or you can set it from JS code:

myLayout.setOffsets({
    top: 10,
    right: 20,
    bottom: 30,
    left: 40
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Cell Header DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
    • Header visibility
    • Header text
    • Collapsed header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Cell Header

A header is the top of a cell. It displays functional buttons that are used to manipulate items, as well as the titles of items.

Header visibility

To show the header, use the showHeader method:

myLayout.cells("a").showHeader();

To hide the header, use the hideHeader method:

myLayout.cells("a").hideHeader();

To check whether the header of a layout's cell is currently visible or hidden, use the isHeaderVisible method. If the method returns "true" - the header is visible:

var isVisible = myLayout.cells("a").isHeaderVisible(); // returns true or false;

Header text

By default, the header's label is set to the id of the related cell. To specify some other label - use the setText method:

myLayout.cells("a").setText("New Text");

Also you can use any HTML while specifying the header's label:

myLayout.cells("a").setText('<input type="button" value="Click me!">');

To get the header's label, use the getText method:

var text = myLayout.cells("a").getText();

In all the above methods, the cells method takes the id of a cell.

Collapsed header

To specify the header's label for the collapsed state, use the setCollapsedText method:

var collText = myLayout.cells("a").setCollapsedText("Main Page");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Sizing Cells DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
    • Common principles
    • Fixed size
    • Autosizing
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Sizing Cells

dhtmlxLayout provides several sizing options. These are:

  • Common assignment
  • Fixed size
  • Autosize

Common principles

There is a possibility to resize any item in the layout. However, there are some limitations in item sizing you need to know:

  • If there is only one item in a row, the width for this item can't be set.
  • If there is only one item in a column, the height for this item can't be set.
  • The system checks all width/height values. If any invalid value is detected it will be ignored.

There are separate methods to set item's width and height:

myLayout.cells("a").setWidth(200);
myLayout.cells("a").setHeight(200);

To get width and height of the current item use the following code:

var width = myLayout.cells("a").getWidth();
var height = myLayout.cells("a").getHeight();

Fixed size

If you need to fix size of a certain layout's cell, use the fixSize method:

myLayout.cells("a").fixSize(true, false);
  • The 1st parameter is responsible for resizing cell's width
  • The 2nd parameter is responsible for resizing cell's height.

If you set both parameters to 'true', the user won't be able to resize the item horizontally and vertically.

Autosizing

Autosize means the ability of layout's items to adjust automatically to the changes of layout's dimensions.

Different patterns have different autosize settings. First of all, to configure autosize you need to define the pattern you are going to use.

For example let's use the pattern "3L". We'll write the minimal init code and call the listAutoSizes function.

To test autosize we need to change layout's parent container. Windows will help us to do this:

var dhxWins = new dhtmlXWindows();
var w1 = dhxWins.createWindow("w1", 1, 1, 400, 350);

Now init layout:

var myLayout = w1.attachLayout("3L");
var autoSizes = myLayout.listAutoSizes();

// console.log(autoSizes) =>
    [
        "b;c",          // current horizontal autosize
        "a;c",          // current vertical autosize
        ["a", "b;c"],   // array with available horizontal autosizes
        ["a;b", "a;c"]  // array with available vertical autosizes
    ]

Current horizontal and vertical autosizes are "b;c" and "a;c". It means that when you will resize window horizontally (i.e. change layout's parent width) - cells "b" and "c" will be resized. It works the same for vertical direction - in this case cells "a" and "c" will be resized.

Available autosizes tell you what other properties can be set.

The following screenshots will demonstrate the changes:

1) Initial window

2) Now let's resize the window horizontally and check how it works

3) The default autosize settings were applied. As you can see, cells "b" and "c" were resized

4) Now we will change horizontal autosize and repeat all the above steps again to see how it works. Available horizontal autosizes include "a" and "b;c" properties. We've already tested the "b;c" property, let's test the cell "a". For vertical autosize we will use the default value - "a;c".

myLayout.setAutoSize("a", "a;c");

Hit F5 to restore the initial window's settings

5) Resize the window again in the same way

6) Cell "a" was changed

The vertical dimension can be configured in the same way.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Docking/Undocking Cells DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Docking/Undocking Cells

Each cell of the layout can be docked or undocked.

If the last visible cell in a row/column becomes collapsed, and there is at least one undocked item in the layout, one of the undocked items will be docked and expanded.

What do the "docked/undocked" states mean?

All cells in the layout are docked by default.

The undocked cells are those cells which were taken out of the layout and displayed in a separate window. Note, to undock a cell you need to have dhtmlxWindows's source files included on the page.

Docked cell

Undocked cell

To undock a cell, use the undock method:

myLayout.cells(id).undock();

To dock a cell back, use the dock method:

myLayout.cells(id).dock();

When a cell is undocked you can operate with the window, for this purpose use:

myLayout.dhxWins.window(id).doSome(...);

The window's id is the same as the cell's id.

Related sample: Dock/undock cells

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Expanding/Collapsing Cells DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Expanding/Collapsing Cells

Overview

Expanded state is the state when a cell is open, i.e. the user can see both header and body of the cell.
Collapsed state is the state when a cell is closed, i.e. the user can see only the header of the cell.

Common logic

If the last visible cell in a row/column becomes collapsed, the nearest collapsed cell will be expanded instead. The component expands either the nearest left cell or the nearest right cell (if there is no nearest left one).

In other words, if there are two or more cells in a row/column, at least one of them will always be expanded.

Localization

You can localize the tooltip of the "Expand/Collapse" button into the desired language by using the following technique:

dhtmlXLayoutCell.prototype.i18n.expand = "Expand/Collapse";

API

To expand an item, use the expand method:

myLayout.cells("a").expand();

To collapse an item, use the collapse method:

myLayout.cells("a").collapse();

Related sample: Expanding/collapsing cells

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Iterator DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Iterator

Pretty often developers need to use iterators in their code. It's useful when you need to apply the same operation to all items. So we decided to give this subject individual consideration.

The forEachItem method calls a user-defined function for every existing item and passes an item's object into it. For example, you can use the hideHeader method to hide headers of all items in the layout:

// calling iterator
myLayout.forEachItem(function(cell){
    // actions, for example:
    cell.hideHeader();
});

//or
function doItemAction(cell) {
    // actions, for example:
    cell.hideHeader();
}
// calling iterator
myLayout.forEachItem(doItemAction);

Related sample: Iterator

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Using Windows from Layout DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Using Windows from Layout

Sometimes using layout, you may need to show a pop-up window. If windows .js/.css files are included on the page, there is no need to create an extra windows instance, as the layout has one already (it was used for the "dock/undock" functionality)

// creating a layout instance
var myLayout = new dhtmlXLayoutObject("3L");
...
// creating a pop-up window from the layout's windows instance
var popupWindow = myLayout.dhxWins.createWindow("popupWindow", ...);

If you're using the "dock/undock" functionality at the same time, you need to make sure your windows ids and the layout's windows ids will not overwrite each other.

Remember: layout uses the same ids for windows and for its cells, i.e. "a", "b", "c" (depending on the pattern).

You'll find more details here.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Components DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
    • Getting the attached component
    • Detaching components
    • Scheduler specificity
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Attaching Components

Almost all DHTMLX components can be attached directly to a cell by the corresponding method.

Accordion
dhxComponent.cells(id).attachAccordion();
Carousel
dhxComponent.cells(id).attachCarousel();
Chart
dhxComponent.cells(id).attachChart();
DataView
dhxComponent.cells(id).attachDataView();
Editor
dhxComponent.cells(id).attachEditor();
Form
dhxComponent.cells(id).attachForm();
Grid
dhxComponent.cells(id).attachGrid();
Layout
dhxComponent.cells(id).attachLayout();
List
dhxComponent.cells(id).attachList();
Menu
dhxComponent.cells(id).attachMenu();
Ribbon
dhxComponent.cells(id).attachRibbon();
Scheduler
dhxComponent.cells(id).attachScheduler();
Sidebar
dhxComponent.cells(id).attachSidebar();
StatusBar
dhxComponent.cells(id).attachStatusBar();
Tabbar
dhxComponent.cells(id).attachTabbar();
Toolbar
dhxComponent.cells(id).attachToolbar();
Tree
dhxComponent.cells(id).attachTree();
TreeView
dhxComponent.cells(id).attachTreeView();

We highly recommend you to follow this way of attaching components, as it guarantees proper rendering and correct resizing of embedded components in relation to their parent container.

Please note that attaching of Menu, Ribbon, Toolbar and StatusBar into a cell has some peculiarities. For details check the article Attaching Menu/Status Bar.

Make sure you've included the corresponding .js/.css files of the related component on a page, for example:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxgrid.css">
    <script src="dhtmlxgrid.js"></script>
</head>

Getting the attached component

There is a possibility to get link to the attached component:

var attached = dhxComponent.cells(id).getAttachedObject();
if (window.dhtmlXGridObject != null && attached instanceof window.dhtmlXGridObject) {
    console.log("An attached grid detected");
}

Detaching components

// attach
var myAcc = dhxComponent.cells(id).attachAccordion({...});

// detach later
dhxComponent.cells(id).detachObject(true);
myAcc = null;

Scheduler specificity

Please note, the attachScheduler method differs from other attaching methods. The difference is that attachScheduler not only attaches the component but also initializes it - creates an instance with the predefined structure.

Therefore:

  • The attachScheduler method doesn't return a component object;
  • The attachScheduler method can be called only once;
  • If you need to set some configuration options for the scheduler, set them before attaching scheduler to the layout.
var myLayout = new dhtmlXLayoutObject(document.body, "3L");
myLayout.cells("a").setWidth(800);

// configure scheduler if needed
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
// then attach it to layout
myLayout.cells("a").attachScheduler(new Date(), "month");
// load some data
scheduler.load("../common/events.xml");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Menu/Status Bar DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
    • Attaching Menu
    • Attaching Toolbar
    • Attaching Ribbon
    • Attaching StatusBar
    • What else?
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Attaching Menu/Status Bar

You can use Menu, Toolbar and Ribbon components as a menu bar and attach them to the top of a cell. A cell can also have a simple status bar at the bottom added with the help of the StatusBar component.

You can attach several of these components at a time together with other content of a Layout-based component.

Attaching Menu

1) Include dhtmlxMenu source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxmenu.css">
    <script src="dhtmlxmenu.js"></script>
</head>

2) Call the corresponding function:

var myMenu = dhxComponent.cells(id).attachMenu({
    // menu conf here
});

3) Learn more about dhtmlxMenu from the related documentation.

Attaching Toolbar

1) Include dhtmlxToolbar source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxtoolbar.css">
    <script src="dhtmlxtoolbar.js"></script>
</head>

2) Call the corresponding function:

var myToolbar = dhxComponent.cells(id).attachToolbar({
    // toolbar conf here
});

3) Learn more about dhtmlxToolbar from the related documentation.

Attaching Ribbon

1) Include dhtmlxRibbon source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxribbon.css">
    <script src="dhtmlxribbon.js"></script>
</head>

2) Call the corresponding function:

var myRibbon = dhxComponent.cells(id).attachRibbon({
    // ribbon conf here
});

3) Learn more about dhtmlxRibbon from the related documentation.

Attaching StatusBar

1) There's no need to include extra .js/.css files.

2) Call the corresponding function:

var sbObj = dhxComponent.cells(id).attachStatusBar({
    // status bar config here, optional
    text:   "some text here",   // status bar text
    height: 35                  // custom height
});

// set status bar text
sbObj.setText("New text");

// get status bar text
var text = sbObj.getText();

What else?

1) You can show/hide any attached control without unloading it from memory, for example:

dhxComponent.cells(id).showMenu();
dhxComponent.cells(id).hideMenu();

2) You can detach and unload the attached control completely, for example:

// init
var myMenu = dhxComponent.cells(id).attachMenu({...});

// detach later
dhxComponent.cells(id).detachMenu();
myMenu = null;

3) You can get link to the component's instance:

var myMenu = dhxComponent.cells(id).getAttachedMenu();
if (myMenu == null) {
    // not inited
    myMenu = dhxComponent.cells(id).attachMenu({...});
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching HTML DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
    • Attaching HTML object
    • Appending HTML object
    • Attaching HTML string
    • Detaching object
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Attaching HTML

There is a possibility to attach HTML objects and HTML strings to a cell. Several HTML objects can be attached at a time.

Attaching HTML object

<div id="objId">Some text</div>
// attach by id
dhxComponent.cells(id).attachObject("objId");
// or attach by link
var obj = document.getElementById("objId");
dhxComponent.cells(id).attachObject(obj);

in this mode a cell doesn't render scrolls by default, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Appending HTML object

This way is the same as attaching an object, but the current cell's content isn't removed:

dhxComponent.cells(id).appendObject("otherObjId");

in this mode a cell will add scrolls automatically, so there's no need to specify width/height to the attached object.

Attaching HTML string

dhxComponent.cells(id).attachHTMLString('<div id="objId">Some text</div>');

in this mode scrolls aren't rendered by default as well, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Detaching object

Any attached object or HTML string can be detached from a cell with the help of the detachObject() method:

// attach
dhxComponent.cells(id).attachObject("objId");

// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to "true", the object will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching URL DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
    • Attaching via iFrame
    • Attaching via AJAX
    • Using onContentLoaded event
    • Accessing the attached content
    • Accessing parent from attached page
    • Detaching URLs
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Attaching URL

A cell has a possibility to attach URLs. It can be done by using iFrames and AJAX calls.

In the case of iFrames call, an iFrame will be created inside of a cell, and your URL will be attached as a separate page (it will have access to your code as you will have control over the content inside of the iFrame).

In the case of AJAX call, the content returned by the server will be placed inside of a div.

  • a common function used for both methods is attachURL(), the only difference is that the 2nd argument is set to true for AJAX call
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
  • loading is async, so to proceed with content, you need to use the "onContentLoaded" event

Attaching via iFrame

GET request

dhxComponent.cells(id).attachURL("page.html");

POST request without params

dhxComponent.cells(id).attachURL("page.html", null, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

Attaching via AJAX

GET request

dhxComponent.cells(id).attachURL("page.html", true);

POST request without params

dhxComponent.cells(id).attachURL("page.html", true, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Using onContentLoaded event

As it was said above, loading is async, so to proceed with content, you need to use the "onContentLoaded" event:

// firstly add the event
dhxComponent.attachEvent("onContentLoaded", function(id){
    // page.html id loaded, your code here
});

// now attach a URL
dhxComponent.cells(id).attachURL("page.html");

Accessing the attached content

This part is related to the iFrame-mode only.

Assuming the code below has been attached:

<html>
<head>
    <script>
        function myFunc() {
            console.log("I'm attached function");
        }
    </script>
</head>
<body>
    <div id="attachedObject">
        Some text here
    </div>
</body>
</html>

Firstly, you need to get an iFrame object from the cell where the attached content is located:

var ifr = dhxComponent.cells(id).getFrame();

Now you can access the elements:

// make sure an element exists
var elem = ifr.contentWindow.document.getElementById("attachedObject");
elem.innerHTML = "Some new text here";

and call some JS code:

// make sure function exists and located in the iFrame's window scope
ifr.contentWindow.someFunc();

Accessing parent from attached page

This part is related to the iFrame-mode only.

If you need to make some actions with a cell from the attached page (for example, hide the window by clicking some button on the page or collapse a layout's cell) this can be done in the following way:

<!-- this attached page.html -->
<script>
    function controlParent() {
        parent.myLayout.cells(id).collapse();   // collapse layout's cell
        parent.myWins.window(id).hide();        // hiding a window
    }
</script>

Any variable or function can be acccessed but make sure it is declared in a global window scope.

Detaching URLs

Any attached URL can be detached from a cell by using the detachObject() method:

// attach
dhxComponent.cells(id).attachURL("page.html");

// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to true, the object (iFrame or a div with AJAX content) will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Google Maps DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Attaching Google Maps

There's a possibility to attach Google Maps to a cell.

Firstly, include the corresponding .js file on your page:

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>

And then initialize a cell with a map inside on the page:

var GMaps = myLayout.cells("b").attachMap(); // applies default parameters

// or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = myLayout.cells(id).attachMap(mapParams);

Related sample: Integration with Google Maps

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Progress Bar DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Progress Bar

A progress control is a state indicator. It can be used to indicate content loading or updating. While the cell is visually disabled and not accessible for user actions the progress is enabled.

This functionality will not start automatically when some content is loaded into a cell, it needs to be triggered by calling the appropriate API method.

Here is the code for a cell's progress control:

// turning progress on
dhxComponent.cells(id).progressOn();

// turning progress off
dhxComponent.cells(id).progressOff();

In practical scenario, you can place the progressOn() call before loading data in some component, and progressOff() in data loading callback, for example:

var myLayout;
var myGrid;

// init layout and attach grid
function initControls() {
    myLayout = new dhtmlXLayoutObject({
        parent: "layoutObj",
        pattern: "2U"
    });
    myGrid = myLayout.cells("a").attachGrid();
    loadGridData(true);
}

// load/reload grid data
function loadGridData(firstLoad) {
    myLayout.cells("a").progressOn();
    if (firstLoad == true) {
        myGrid.load("server.php", doOnGridLoaded);
    } else {
        myGrid.updateFromXML("server.php", true, false, doOnGridLoaded);
    }
}

// grid dataload callback
function doOnGridLoaded() {
    myLayout.cells("a").progressOff();
}
<body onload="initControls();">
    <div id="layoutObj" style="width: 600px; height: 400px;"></div>
    <input type="button" value="refresh grid" onclick="loadGridData();"></div>
</body>

Each time you will click the button, the loadGridData() method will be called and you will see the progress of loading over the cell with grid.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Different Content in the Same Cell DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Different Content in the Same Cell

Cells have a possibility to show different content in the same cell. This feature is called "views". Each cell shows the view "def" by default. You can easily switch to the other view and init different content.

Let's see how it works. We will create a "3L" layout and attach some components to the cell "b".

var myLayout = new dhtmlXLayoutObject("layoutObj", "3L");

Currently, the view "def" is selected. There's no need to call any extra commands to make it active, just attach the content you need:

var myMenu = myLayout.cells("b").attachMenu();
var myGrid = myLayout.cells("b").attachGrid();

Now let's show another view and attach some other content to it:

myLayout.cells("b").showView("tree");

At this moment the cell hides the currently active views ("def" in our case) and shows the requested one. You can name the view as you wish, it's necessary just to determine which view to show. As we haven't attached any components, the "tree" view looks like an empty cell.

Now let's attach some content to the view "tree":

myTree = myLayout.cells("b").attachTree();
myToolbar = myLayout.cells("b").attachToolbar();

Now let's go back to the view "def" and see what happens:

myLayout.cells("b").showView("def");

As you can see, now the view "tree" becomes hidden and the view "def" is restored and active.

In the above example we're using layout just to show you how the described functionality works. Views are the feature of a cell, so they are enabled in all the components that use cells: accordion, layout, tabbar and windows.

Related sample: Views

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Coloring Text Selection DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Coloring Text Selection

Sometimes you need to make the selected text look like a common skin. To set a custom color for the selection, use the following technique:

1) Define a CSS class with ::selection and ::-moz-selection pseudo-elements inside:

.my_style::selection {
    color: #454544;
    background-color: #fffcda;
}
.my_style::-moz-selection {
    color: #454544;
    background-color: #fffcda;
}

2) Set the above specified CSS class for the required object:

<div id="layoutObj"></div>
<div id="objId">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
<div id="objId2" class="my_style">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "2U",
    cells: [
        {id: "a", text: "Default selection"},
        {id: "b", text: "Custom selection"}
    ]
});

myLayout.cells("a").attachObject("objId");
myLayout.cells("b").attachObject("objId2");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration from 3.6 to 4.0 DHTMLX Docs

Documentation
  • dhtmlXLayout API
  • dhtmlXLayoutCell API
  • Initializing Layout on a Page
  • Layout Skins
  • Layout Patterns
  • Layout Offsets
  • Cell Header
  • Sizing Cells
  • Docking/Undocking Cells
  • Expanding/Collapsing Cells
  • Iterator
  • Using Windows from Layout
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Layout

Migration from 3.6 to 4.0

1) In the new version of DHTMLX Library the names of some methods were changed. We've made these changes as the previous names of the methods under question didn't reflect their functionality precisely, which could cause ambiguity or misunderstanding.

2) Since the release of the latest version of DHTMLX library some functionality has been removed. It was made as this functionality is no longer needed and therefore isn't supported.

3) Functionality moved from object to object

There were changes in the methods of layout components (Layout, Windows, Accordion, Tabbar). It concerns the methods that don't operate on the components in whole, but affect their cells (windows, tabs) directly.

Such methods have earlier been called through myLayout object and now they are called through myLayout.cells() object. Be careful, as the names of these methods are also changed to more logical ones.

4) Access to cells by index removed

Layout has a possibility to access cells by id - myLayout.cells(id) or by index - myLayout.items[]. Until 3.6 both methods had used to get cell object, since version 4.0 we've kept only accessing cells by id. The access to cells by index still works if the file "dhtmlxlayout_deprecated.js" is included on the page.

Up to version 3.6 | From version 4.0
Functions' names changed
myLayout.listViews() | myLayout.listPatterns()
Functionality was removed
myLayout.setEffect() | Since 4.0 effects are enabled for modern browsers by default
myLayout.getEffect()
myLayout.setImagePath() | Used for windows, since 4.0 windows don't use imagePath, icons can be set in css
Functionality moved from object to object
myLayout.dockWindow(id) | myLayout.cells(id).dock()
myLayout.unDockWindow(id) | myLayout.cells(id).undock()
myLayout.setCollapsedText(id, text) | myLayout.cells(id).setCollapsedText(text)
myLayout.showPanel(id) | myLayout.cells(id).showHeader()
myLayout.hidePanel(id) | myLayout.cells(id).hideHeader()
myLayout.isPanelVisible(id) | myLayout.cells(id).isHeaderVisible()
Access to cells by index
myLayout.cells(id).getIndex() |
myLayout.getIdByIndex(index) |
myLayout.getIndexById(id) |
myLayout.items[] (array) |

5) Offsets (margins)

In all layout versions there is a possibility to set offsets (margins). They are mostly used in full-screen init type. We haven't removed this functionality but updated the used techniques.

Old techniques (all versions up to 3.6):

// init
var myLayout = new dhtmlXLayoutObject(document.body, "3L");

// modify some private properties
myLayout.cont.obj._offsetTop = 10; // top margin
myLayout.cont.obj._offsetLeft = 10; // left margin
myLayout.cont.obj._offsetHeight = -20; // bottom margin
myLayout.cont.obj._offsetWidth = -20; // right margin

// adjust size
myLayout.setSizes();

New techniques (from version 4.0):

// on init stage
var myLayout = new dhtmlXLayoutObject({
    parent: document.body,
    pattern: "3L",
    offsets: {
        top: 10,
        right: 20,
        bottom: 30,
        left: 40
    }
});

// at any place in the code
myLayout.setOffsets({
    top: 10,
    right: 20,
    bottom: 30,
    left: 40
});

6) Events

Until the version 3.6 layout had the event onResize. If layout was attached to a window, this event was called after the window was resized. Starting from the version 4.0 the event onResizeFinish should be used instead.

myLayout.attachEvent("onResizeFinish", function(){
    // your code here
});

Related sample: onResizeFinish event

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


List DHTMLX Docs

Documentation
  • List
    • dhtmlXList API
    • Initializing List
    • Object Constructor
    • Specifying Templates
    • Paging
    • Loading Data
    • Connecting to Database
    • Operating Items
    • Drag-n-Drop
    • Moving Items by API
    • Handling Events
Start

List

dhtmlxList is a client-side JavaScript component that displays a collection of objects in a list according to a user-defined template. It allows you to arrange multiple objects with similar properties within a single container and make your data organized.

API reference
  • dhtmlXList API
Related resources
  • You may download dhtmlxList from dhtmlx.com
  • Check online samples for dhtmlxList
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Configuring List

  • Initializing List
  • Object Constructor
  • Specifying Templates
  • Paging
 Describes the initialization of List and the elements of its customization: types of data templates and paging.

Loading Data

  • Loading Data
  • Connecting to Database
 Guides you through the possibilities of loading data into List.

Operating Items

  • Adding Items
  • Deleting Items
  • Editing Items
  • Selection
  • Sorting
  • Filtering
  • Drag-n-Drop
  • Moving Items by API
 Covers the ways of working with data in List: adding/deleting, selecting, filtering, sorting and moving items.

Other

  • Handling Events
 Includes common info you may need while working with List.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXList API DHTMLX Docs

Documentation
  • dhtmlXList API
    • Methods
    • Events
    • Others
  • Initializing List
  • Object Constructor
  • Specifying Templates
  • Paging
  • Loading Data
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
Start List

dhtmlXList API

Methods
add | adds a data item to the dataview
attachEvent |
changeId | changes the id of an item
clearAll | removes all data from DataView and repaints the component
copy | creates a copy of an item
customize | customizes the currently active template by replacing default properties with the one from provided object
dataCount | returns the total count of items in the dataview
define | configures some mode of DataView
destructor | destructs the DataView object
detachEvent |
edit | switches the specified item to the edit state
exists | returns true if the item with the defined ID already exists
filter | filters DataView by the provided parameters
first | returns the ID of the first item (item with the index == 0)
get | gets the object of the data item with the specified id
getSelected | returns the currently selected ID
idByIndex | returns the ID of the item with the specified index
indexById | returns the index of the item with the specified ID
isEdit | gets the status of the edit operation
isSelected | returns true, if an item is selected
last | returns the ID of the last item (the item with the index == dataCount-1)
load |
locate | returns an item's ID by HTML event (checks if any item is in the area of HTML event)
move | moves an item to the defined position
moveBottom | sets an item as the last item in the view
moveDown | changes the index of an item by moving it to the end of the view by the defined count of steps
moveTop | sets an item as the first item in the view
moveUp | changes the index of an item by moving it to the start of the view by the defined count of steps
next | returns ID of the next item (item with the index == current + 1)
parse | parses an object or a string and fills the dataview with the parsed items
previous | returns ID of the previous item (item with the index == current - 1)
refresh | repaints an item or the whole dataview
remove | removes a data item from the dataview
select | marks an item as selected
selectAll | selects all items in the dataview
serialize | serializes component back to json
set | associates the hash of data with some ID
show | adjusts the scrollbars of dataview to make the item in question visible
sort | adds any user-defined handler for available events
stopEdit | if there was some item in the edit state, this command switches it back to the normal state
unselect | removes selection from a certain item
unselectAll | removes selection from all the items in the dataview
update | updates a particular item in the dataview
Events
onAfterAdd | fires when item adding is finished
onAfterDelete | fires after item deleting is finished
onAfterDrop | fires when the drag-n-drop operation is finished
onAfterEditStart | fires when the editor is ready for data input
onAfterEditStop | fires when the editor is closed
onAfterRender | called after view was repainted
onAfterSelect | fires when the selection of an item is finished
onBeforeAdd | fires before item adding is initiated
onBeforeContextMenu | called on the right mouse click
onBeforeDelete | fires before item deleting is initiated
onBeforeDrag | fires before the drag operation started
onBeforeDragIn | fires before an item is dragged to another potential target
onBeforeDrop | fires before an item is dragged to another target and the mouse button is released
onBeforeEditStart | fires before the editing process is initialized
onBeforeEditStop | fires before editor closing is initialized
onBeforeRender | fires before repainting the dataview
onBeforeSelect | fires before selection of an item is started
onDataRequest | called when component issues dynamic request for a data
onDragOut | fires when an item is dragged out of a potential target
onEditKeyPress | fires when a key is pressed while the editor is active
onItemClick | fires when an item is clicked
onItemDblClick | fires when an item is double clicked
onItemRender | fires before rendering a separate item
onMouseMove | fires when the mouse pointer is moved over an item
onMouseMoving | fires when the mouse pointer is moved over a dataview
onMouseOut | fires when the mouse pointer is moved out of the dataview, or out of some item in the dataview
onSelectChange | fires when the selection is changed
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Other
$view top html node of component
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • add
    • attachEvent
    • changeId
    • clearAll
    • copy
    • customize
    • dataCount
    • define
    • destructor
    • detachEvent
    • edit
    • exists
    • filter
    • first
    • get
    • getSelected
    • idByIndex
    • indexById
    • isEdit
    • isSelected
    • last
    • load
    • locate
    • move
    • moveBottom
    • moveDown
    • moveTop
    • moveUp
    • next
    • parse
    • previous
    • refresh
    • remove
    • select
    • selectAll
    • serialize
    • set
    • show
    • sort
    • stopEdit
    • unselect
    • unselectAll
    • update
  • Events
  • Others
Start List dhtmlXList API

Methods

add | adds a data item to the dataview
attachEvent |
changeId | changes the id of an item
clearAll | removes all data from DataView and repaints the component
copy | creates a copy of an item
customize | customizes the currently active template by replacing default properties with the one from provided object
dataCount | returns the total count of items in the dataview
define | configures some mode of DataView
destructor | destructs the DataView object
detachEvent |
edit | switches the specified item to the edit state
exists | returns true if the item with the defined ID already exists
filter | filters DataView by the provided parameters
first | returns the ID of the first item (item with the index == 0)
get | gets the object of the data item with the specified id
getSelected | returns the currently selected ID
idByIndex | returns the ID of the item with the specified index
indexById | returns the index of the item with the specified ID
isEdit | gets the status of the edit operation
isSelected | returns true, if an item is selected
last | returns the ID of the last item (the item with the index == dataCount-1)
load |
locate | returns an item's ID by HTML event (checks if any item is in the area of HTML event)
move | moves an item to the defined position
moveBottom | sets an item as the last item in the view
moveDown | changes the index of an item by moving it to the end of the view by the defined count of steps
moveTop | sets an item as the first item in the view
moveUp | changes the index of an item by moving it to the start of the view by the defined count of steps
next | returns ID of the next item (item with the index == current + 1)
parse | parses an object or a string and fills the dataview with the parsed items
previous | returns ID of the previous item (item with the index == current - 1)
refresh | repaints an item or the whole dataview
remove | removes a data item from the dataview
select | marks an item as selected
selectAll | selects all items in the dataview
serialize | serializes component back to json
set | associates the hash of data with some ID
show | adjusts the scrollbars of dataview to make the item in question visible
sort | adds any user-defined handler for available events
stopEdit | if there was some item in the edit state, this command switches it back to the normal state
unselect | removes selection from a certain item
unselectAll | removes selection from all the items in the dataview
update | updates a particular item in the dataview
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


add DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

add

adds a data item to the list

void add(object obj,number index);

Parameters

obj | object | the item object
index | number | optional, the item's position (zero-based numbering)

Example

var myList = new dhtmlXList({
    container:"data_container",
    type:{
        template:"Package"
    }
});
myList.add({
    id:15,
    Package:"test one",
    Version:"0.1",
    Maintainer:"dhtmlx"
}, 0)

Details

Note:

  • if the index parameter isn't specified in the method, the item will be added to the bottom of the list
  • if the id property isn't specified for the item, it will be auto generated
See also
  • API
    • remove
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


changeId DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

changeId

changes the id of an item

void changeId(string oldId,string newId);

Parameters

oldId | string | the id of an existing item
newId | string | a new id for the item

Example

myList.changeId("12333433", "12");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearAll DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

clearAll

removes all data from List and repaints the component

void clearAll();

Example

myList.clearAll();

Details

the command doesn't trigger server-side updates

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


copy DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

copy

creates a copy of an item

void copy(string|number sid, [number tindex,object tobj,string|number tid] );

Parameters

sid | string|number | id of the source item, mandatory
tindex | number | target index, optional
tobj | object | target object (target list), optional
tid | string|number | id which will be assigned to a newly created item, optional

Example

// make a copy of an element
var new_id = myList.copy(source_id);
// make a copy at the specific position
var new_id = myList.copy(source_id, index);
// make a copy in the different view
var new_id = myList.copy(source_id, index, some_other_view);
   //or
var new_id = myList.copy(source_id, null , some_other_view);

// make a copy by the defined ID
myList.copy(source_id, null, null, target_id);
   //or
myList.copy(source_id, index, null, target_id);
   //or
myList.copy(source_id, index, some_other_view, target_id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


customize DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

customize

customizes the currently active template by replacing default properties with the one from provided object

void customize(object properties);

Parameters

properties object a set of custom properties

Example

myList.customize({
    some_path:"../imgs/",
    some_property:value
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dataCount DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

dataCount

returns the total count of items in the list

number dataCount();

Returns

number the total count of items in the list

Example

var count = myList.dataCount();

Details

in case of dynamic loading the method returns the expected count of items

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


define DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

define

configures some mode of List

void define(string mode,boolean value);

Parameters

mode | string | name of the mode or the property which needs to be configured
value | boolean | value which will be assigned to the mode or the property, true by default

Example

myList.define("select","multiselect")
myList.define("type",{
    template:"some here"
});

Details

list of supported properties can be checked here

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


destructor DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

destructor

destructs the List object

void destructor();

Example

myList.destructor();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


edit DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

edit

switches the specified item to the edit state

void edit(string|number id);

Parameters

id string|number id of the item in question

Example

myList.edit(id);

Details

there can be only one editable item at the same time, so the previously opened editor closes on the command activation

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


exists DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

exists

returns true if the item with the defined ID already exists

boolean exists(string|number id);

Parameters

id string|number id of the item in question

Returns

boolean true/false if the item exists/doesn't exist

Example

var check = myList.exists(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


filter DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

filter

filters List by the provided parameters

void filter(string|function key,string value);

Parameters

key | string|function | the name of the property or of a custom filtering method
value | string | the value which will be used for filtering

Example

//show all items where Publisher == "Test"
myList.filter("#Publisher#","Test");
//show all items where Publisher starts from "Test"
myList.filter(function(obj,value){
    if (obj.Publisher.indexOf(value)==0) return true;
    return false;
},"Test");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


first DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

first

returns the ID of the first item (item with the index == 0)

string|number first();

Returns

string|number the ID of the first item

Example

var id = myList.first();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


get DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

get

gets the object of the data item with the specified id

object get(string|number id);

Parameters

id string|number id of the item in question

Returns

object the object of a data item

Example

var data = myList.get(id);
alert(data.Version);
data.Version = 2; // beware that you need to force the refresh

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelected DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

getSelected

returns the currently selected ID

string|number getSelected(boolean as_array);

Parameters

as_array boolean true, to force the return value to be an array

Returns

string|number currently selected id

Example

var id = myList.getSelected();

Details
  • if the multiselection is enabled and multiple items are selected, this method will return an array of IDs;
  • "as_array" parameter makes sense in multiselection mode, where a method may return a single value or an array based on selection state.

By using the "as_array" parameter you will always receive an array as the result of the method, which can simplify further processing.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


idByIndex DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

idByIndex

returns the ID of the item with the specified index

string|number idByIndex(number index);

Parameters

index number index of the item in question

Returns

string|number the ID of the item with the specified index

Example

var id = myList.idByIndex(index);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


indexById DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

indexById

returns the index of the item with the specified ID

number indexById(string|number ID);

Parameters

ID string|number ID of the item in question

Returns

number the index of the item with the specified ID

Example

var index = myList.indexById(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isEdit DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

isEdit

gets the status of the edit operation

string isEdit();

Returns

string id of item that is in the edit state

Example

myList.isEdit();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isSelected DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

isSelected

returns true, if an item is selected

void isSelected(string|number id);

Parameters

id string|number id of the item in question

Example

var check = myList.isSelected(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


last DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

last

returns the ID of the last item (the item with the index == dataCount-1)

string|number last();

Returns

string|number the ID of the last item

Example

var id = myList.last();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


load DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

load

loads data from an external file (xml, json, jsarray, csv)

promise load(string url, [string type,function callback] );

Parameters

url | string | an URL to an external file
type | string | optional, the type of data (xml,csv,json,jsarray), xml by default
callback | function | optional, an after loading callback function, can be omitted

Returns

promise a "promise" object

Example

// load list from an external file
myList.load("list.xml");

// load list, execute doAfterRefresh() function after list was loaded
myList.load("list.xml",doAfterRefresh);

// load list from an external csv file,
// execute doAfterRefresh() function after list was loaded
myList.load("list.csv","csv",doAfterRefresh);

// returns a "promise" object, see details
myList.load(url).then(function(text){
    // text - a server-side response
});

Details

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • integration with Promiz.js is added in the version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


locate DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

locate

returns an item's ID by HTML event (checks if any item is in the area of HTML event)

void locate(Event Object ev);

Parameters

ev Event Object native HTML event

Example

some.onclick=function(e){
    var id = myList.locate(e||event);
    if (id)
        do_something();
}

Details

the method returns null if the relative item isn't found

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


move DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

move

moves an item to the defined position

void move(string|number sid, [number tindex,object tobj,string|number tid] );

Parameters

sid | string|number | id of the source item, mandatory
tindex | number | target index, optional
tobj | object | target object (target list), optional
tid | string|number | the id which will be assinged to the item after moving, optional

Example

//move to some position
myList.move(source_id, index);
//move to a different view
myList.move(source_id, index, some_other_view);
   //or
myList.move(source_id, null , some_other_view);
   //or
myList.move(source_id, index, some_other_view, target_id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveBottom DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

moveBottom

sets an item as the last item in the view

void moveBottom(string|number id);

Parameters

id string|number id of the item in question

Example

myList.moveBottom(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveDown DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

moveDown

changes the index of an item by moving it to the end of the list by the defined count of steps

void moveDown(string|number id, [number step] );

Parameters

id | string|number | id of the item in question
step | number | the count of steps, optional, 1 by default

Example

myList.moveDown(id);
//or
myList.moveDown(id,10);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveTop DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

moveTop

sets an item as the first item in the view

void moveTop(string|number id);

Parameters

id string|number id of the item in question

Example

myList.moveTop(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveUp DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

moveUp

changes the index of an item by moving it to the start of the list by the defined count of steps

void moveUp(string|number id, [number step] );

Parameters

id | string|number | id of the item in question
step | number | the count of steps, optional, 1 by default

Example

myList.moveUp(id);
//or
myList.moveUp(id,10);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


next DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

next

returns ID of the next item (item with the index == current + 1)

string|number next(string|number id);

Parameters

id string|number id of the item in question

Returns

string|number the id of the next item

Example

var next_id = myList.next(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


parse DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

parse

parses an object or a string and fills the list with the parsed items

void parse(string|object obj,string type);

Parameters

obj | string|object | an object or a string to parse
type | string | type of data

Example

myList.parse("<data> ... </data>");
//or
myList.parse([[1,2,3],[4,5,6]],"jsarray");

Details

types of an object to parse:

  • jsarray - string or array
  • json - string or object
  • xml, html, csv - string

possible data types:

  • "xml"
  • "html"
  • "json"
  • "jsarray"
  • "csv"
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


previous DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

previous

returns ID of the previous item (item with the index == current - 1)

string|number previous(string|number id);

Parameters

id string|number id of the item in question

Returns

string|number the id of the previous item

Example

var prev_id = myList.previous(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


refresh DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

refresh

repaints an item or the whole list

void refresh( [string|number id] );

Parameters

id string|number id of the item in question, optional

Example

//repaint single item
myList.refresh(id);
//repaint the whole view
myList.refresh();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


remove DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

remove

removes a data item from the list

void remove(string|number id);

Parameters

id string|number the item's id or an array of ids

Example

myList.remove("item1");
//or
myList.remove(["item1","item2", "item3"]);

See also
  • API
    • add
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


select DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

select

marks an item as selected

void select( [string|number id] );

Parameters

id string|number id of the item which should be selected, optional

Example

//select one record
myList.select(id);
//select all
myList.select();

Details

if the id is not provided, the method works as selectAll()

See also
  • API
    • selectAll
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


selectAll DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

selectAll

selects all items in the list

void selectAll();

Example

myList.selectAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


serialize DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

serialize

serializes component back to json

object serialize();

Returns

object data from the list as json object

Example

var data = myList.serialize();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


set DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

set

associates the hash of data with some ID

void set(string|number id,object hash);

Parameters

id | string|number | id of the item in question
hash | object | a javascript object which contains data

Example

myList.set(id,{
    property:value
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

show

adjusts the scrollbars of list to make the item in question visible

void show(string|number id);

Parameters

id string|number id of the item in question

Example

myList.show(id);

Details

the method can be used as the continuation of the select() command which selects an item, but doesn't guarantee that the item is visible

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


sort DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

sort

adds any user-defined handler for available events

void sort(string key,string direction);

Parameters

key | string | the property name by which the list will be sorted or a custom sorting method
direction | string | the sorting direction, can take "asc" or "desc" values

Example

myList.sort("#Version#","asc");
myList.sort(function(a,b){
    return a.Version > b.Version ? 1 : -1;
},"asc");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


stopEdit DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

stopEdit

if there was some item in the edit state, this command switches it back to the normal state

void stopEdit();

Example

myList.stopEdit();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unselect DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

unselect

removes selection from a certain item

void unselect( [string|number id] );

Parameters

id string|number id of the item which needs to be unselected, optional

Example

//unselect one record
myList.unselect(id);
//unselect all
myList.unselect();

Details

if the id is not provided, the method works as unselectAll()

See also
  • API
    • unselectAll
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


unselectAll DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

unselectAll

removes selection from all the items in the list

void unselectAll();

Example

myList.unselectAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


update DHTMLX Docs

Documentation
  • add
  • attachEvent
  • changeId
  • clearAll
  • copy
  • customize
  • dataCount
  • define
  • destructor
  • detachEvent
  • edit
  • exists
  • filter
  • first
  • get
  • getSelected
  • idByIndex
  • indexById
  • isEdit
  • isSelected
  • last
  • load
  • locate
  • move
  • moveBottom
  • moveDown
  • moveTop
  • moveUp
  • next
  • parse
  • previous
  • refresh
  • remove
  • select
  • selectAll
  • serialize
  • set
  • show
  • sort
  • stopEdit
  • unselect
  • unselectAll
  • update
Start List dhtmlXList API Methods

update

updates a particular item in the list

void update(string id,object data);

Parameters

id | string | id of item
data | object | data object

Example

myList.update(123, { text:"abc", value:22 });

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onAfterAdd
    • onAfterDelete
    • onAfterDrop
    • onAfterEditStart
    • onAfterEditStop
    • onAfterRender
    • onAfterSelect
    • onBeforeAdd
    • onBeforeContextMenu
    • onBeforeDelete
    • onBeforeDrag
    • onBeforeDragIn
    • onBeforeDrop
    • onBeforeEditStart
    • onBeforeEditStop
    • onBeforeRender
    • onBeforeSelect
    • onDataRequest
    • onDragOut
    • onEditKeyPress
    • onItemClick
    • onItemDblClick
    • onItemRender
    • onMouseMove
    • onMouseMoving
    • onMouseOut
    • onSelectChange
    • onXLE
    • onXLS
  • Others
Start List dhtmlXList API

Events

onAfterAdd | fires when item adding is finished
onAfterDelete | fires after item deleting is finished
onAfterDrop | fires when the drag-n-drop operation is finished
onAfterEditStart | fires when the editor is ready for data input
onAfterEditStop | fires when the editor is closed
onAfterRender | called after view was repainted
onAfterSelect | fires when the selection of an item is finished
onBeforeAdd | fires before item adding is initiated
onBeforeContextMenu | called on the right mouse click
onBeforeDelete | fires before item deleting is initiated
onBeforeDrag | fires before the drag operation started
onBeforeDragIn | fires before an item is dragged to another potential target
onBeforeDrop | fires before an item is dragged to another target and the mouse button is released
onBeforeEditStart | fires before the editing process is initialized
onBeforeEditStop | fires before editor closing is initialized
onBeforeRender | fires before repainting the dataview
onBeforeSelect | fires before selection of an item is started
onDataRequest | called when component issues dynamic request for a data
onDragOut | fires when an item is dragged out of a potential target
onEditKeyPress | fires when a key is pressed while the editor is active
onItemClick | fires when an item is clicked
onItemDblClick | fires when an item is double clicked
onItemRender | fires before rendering a separate item
onMouseMove | fires when the mouse pointer is moved over an item
onMouseMoving | fires when the mouse pointer is moved over a dataview
onMouseOut | fires when the mouse pointer is moved out of the dataview, or out of some item in the dataview
onSelectChange | fires when the selection is changed
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterAdd DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onAfterAdd

fires when item adding is finished

void onAfterAdd(object obj, [number index] ){ ... };

Parameters

obj | object | the object which was added
index | number | index at which the item was added, optional

Example

myList.attachEvent("onAfterAdd", function (obj, index){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterDelete DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onAfterDelete

fires after item deleting is finished

void onAfterDelete(string|number id){ ... };

Parameters

id string|number id of the item which was removed

Example

myList.attachEvent("onAfterDelete", function (id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterDrop DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onAfterDrop

fires when the drag-n-drop operation is finished

void onAfterDrop(object context,Event object event){ ... };

Parameters

context | object | context object
event | Event object | native HTML event

Example

myList.attachEvent("onAfterDrop", function (context,ev){
     // your code here
});

Details

possible values of the context object:

  • context.start - ID of an item, from which the dragging process has started
  • context.source - array of the dragged IDs (drag source)
  • context.target - ID of the target item (drop target)
  • context.from - view object to which the dragged item belongs
  • context.to - view object to which the drop target belongs
  • context.index - index in the target list at which new item will be added
  • context.new_id - id which will be used for the moved item (actual only while moving between different lists)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterEditStart DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onAfterEditStart

fires when the editor is ready for data input

void onAfterEditStart(string|number id){ ... };

Parameters

id string|number id of the item that will be edited

Example

myList.attachEvent("onAfterEditStart", function (id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterEditStop DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onAfterEditStop

fires when the editor is closed

void onAfterEditStop(string|number id){ ... };

Parameters

id string|number id of the item

Example

myList.attachEvent("onAfterEditStop", function (id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterRender DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onAfterRender

called after view was repainted

void onAfterRender(){ ... };

Example

myList.attachEvent("onAfterRender", function(){
    //  your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterSelect DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onAfterSelect

fires when the selection of an item is finished

void onAfterSelect(string|number id){ ... };

Parameters

id string|number id of the item

Example

myList.attachEvent("onAfterSelect", function (id){
    // your code here
});

Details

in case of multi-select, the event fires only for the items which were clicked. And it doesn't fire for the items which were selected by shift-click or any similar actions.

The event won't fire for Ctrl-click which results in item unselecting. Basically, while onBeforeSelect fires for both select and unselect actions, onAfterSelect will fire only for true selects.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeAdd DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onBeforeAdd

fires before item adding is initiated

boolean onBeforeAdd(object obj, [index index] ){ ... };

Parameters

obj | object | an object which will be added
index | index | index, at which item will be added, optional

Returns

boolean true - to trigger the default action, false - to block it

Example

myList.attachEvent("onBeforeAdd", function (obj, index){
    // your code here
    return true;
});

Details

the event is blockable, if the false value is returned from the custom method, the default reaction will be blocked

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeContextMenu DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onBeforeContextMenu

called on the right mouse click

boolean onBeforeContextMenu(string id,Event e){ ... };

Parameters

id | string | id of item on which right click occurs
e | Event | native event object

Returns

boolean true to trigger the default action, false to block it

Example

myList.attachEvent("onBeforeContextMenu", function(id, e){
     //custom code here
});

Details

the event is blockable, returning false will block the default action

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDelete DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onBeforeDelete

fires before item deleting is initiated

boolean onBeforeDelete(string|number id){ ... };

Parameters

id string|number id of the item which will be removed

Returns

boolean true to trigger the default action, false to block it

Example

myList.attachEvent("onBeforeDelete", function (id){
    // your code here
});

Details

the event is blockable, returning false will block the default action

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDrag DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onBeforeDrag

fires before the drag operation started

boolean onBeforeDrag(object context,Event object ev){ ... };

Parameters

context | object | context object
ev | Event object | native event object

Returns

boolean true - to trigger the default action, false - to block it

Example

myList.attachEvent("onBeforeDrag", function (context, ev){
    // your code here
    return true;
});

Details

possible context object values:

  • context.start - ID of an item from which the dragging process started;
  • context.source - array of the dragged IDs (drag source);
  • context.html - this property can be set to redefine the content of the drag-marker;
  • context.from - an object to which the dragged item belongs.

The event is blockable, returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDragIn DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onBeforeDragIn

fires before an item is dragged to another potential target

boolean onBeforeDragIn(object context,Event object ev){ ... };

Parameters

context | object | context object
ev | Event object | native event object

Returns

boolean true - to trigger the default action, false - to block it

Example

myList.attachEvent("onBeforeDragIn", function (context, ev){
    // your code here
    return true;
});

Details
  • context.start - ID of an item, from which the dragging process was started
  • context.source - an array of dragged IDs (drag source)
  • context.target - ID of the target item (drop target)
  • context.from - a list object to which the dragged item belongs
  • context.to - a list object to which the drop target belongs
  • context.index - an index in the target list at which new item will be added

The event is blockable, returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDrop DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onBeforeDrop

fires before an item is dragged to another target and the mouse button is released

boolean onBeforeDrop(object context,Event object ev){ ... };

Parameters

context | object | context object
ev | Event object | native HTML event

Returns

boolean true - to trigger the default action, false - to block it

Example

myList.attachEvent("onBeforeDrop", function (context,ev){
    // your code here
    return true;
});

Details
  • context.start - ID of an item from which the dragging process started
  • context.source - array of the dragged IDs (drag source)
  • context.target - ID of the target item (drop target)
  • context.from - a list object to which the dragged item belongs
  • context.to - a list object to which the drop target belongs
  • context.index - an index in the target list at which a new item will be added
  • context.new_id - an id which will be used for the moved item (actual only while moving between different lists)

The event is blockable, returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeEditStart DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onBeforeEditStart

fires before the editing process is initialized

boolean onBeforeEditStart(string|number id){ ... };

Parameters

id string|number id of an item

Returns

boolean true - to trigger the default action, false - to block it

Example

myList.attachEvent("onBeforeEditStart", function (id){
    // your code here
    return true;
});

Details

The event is blockable, returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeEditStop DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onBeforeEditStop

fires before editor closing is initialized

boolean onBeforeEditStop(string|number id){ ... };

Parameters

id string|number id of the item

Returns

boolean true - to trigger the default action, false - to block it

Example

myList.attachEvent("onBeforeEditStop", function (id){
    // your code here
    return true;
});

Details

The event is blockable, returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeRender DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onBeforeRender

fires before repainting the list

boolean onBeforeRender(){ ... };

Returns

boolean true - to trigger the default action, false - to block it

Example

myList.attachEvent("onBeforeRender", function(){
     // your code here
});

Details

The event is blockable, returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeSelect DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onBeforeSelect

fires before selection of an item is started

boolean onBeforeSelect(string|number id,boolean state){ ... };

Parameters

id | string|number | id of the item
state | boolean | the selected state of the item (true when item is selected by action)

Returns

boolean true - to trigger the default action, false - to block it

Example

myList.attachEvent("onBeforeSelect", function (id, state){
    // your code here
    return true;
});

Details

The event is blockable, returning false will block the default action.

In case of multi-select, the event fires only for items which were clicked, and it doesn't fire for the items which were selected by Shift-click or similar actions.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDataRequest DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onDataRequest

called when component issues dynamic request for a data

boolean onDataRequest(number start,number count){ ... };

Parameters

start | number | request data from start position
count | number | request count records

Returns

boolean true - to trigger data loading, false - to block it

Example

myList.attachEvent("onDataRequest", function(start, count){
    return true;
});

Details

The event is blockable. Returning false from event handler will prevent data loading.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDragOut DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onDragOut

fires when an item is dragged out of a potential target

void onDragOut(object context,Event object ev){ ... };

Parameters

context | object | context object
ev | Event object | native event object

Example

myList.attachEvent("onDragOut", function (context, ev){
    // your code here
    return true;
});

Details

possible values of the context object:

  • context.start - ID of an item, from which the dragging process started
  • context.source - an array of the dragged IDs (drag source)
  • context.target - null
  • context.from - a list object to which the dragged item belongs
  • context.to - null
  • context.index - index in the target list at which new item will be added
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEditKeyPress DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onEditKeyPress

fires when a key is pressed while the editor is active

void onEditKeyPress(string code,string ctrl,string shift,Event object ev){ ... };

Parameters

code | string | key code
ctrl | string | control key flag
shift | string | shift key flag
ev | Event object | native event object

Example

myList.attachEvent("onEditKeyPress", function (code, ctrl, shift, ev){
    // your code here
    return true;
});

Details

the event can be used to define on which key the editing process will be stopped

myList.attachEvent("onEditKeyPress", function (code, ctrl, shift, ev){
    if (code == 13)
        this.stopEdit();
    return true;
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onItemClick DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onItemClick

fires when an item is clicked

boolean onItemClick(string|number id,Event object ev,object html){ ... };

Parameters

id | string|number | id of the item
ev | Event object | native event object
html | object | target HTML element

Returns

boolean true - to trigger the default action, false - to block it

Example

myList.attachEvent("onItemClick", function (id, ev, html){
    // your code here
    return true;
});

Details

The event is blockable. Returning false from event handler will prevent the default action (clicking an item).

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onItemDblClick DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onItemDblClick

fires when an item is double clicked

boolean onItemDblClick(string|number id,Event object ev,object html){ ... };

Parameters

id | string|number | id of the item
ev | Event object | native event object
html | object | target HTML element

Returns

boolean true - to trigger the default action, false - to block it

Example

myList.attachEvent("onItemDblClick", function (id, ev, html){
    // your code here
    return true;
});

Details

The event is blockable. Returning false from event handler will prevent the default action (double-clicking an item).

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onItemRender DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onItemRender

fires before rendering a separate item

void onItemRender(object obj){ ... };

Parameters

obj object data object

Example

myList.attachEvent("onItemRender", function(obj){
    // your code here
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseMove DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onMouseMove

fires when the mouse pointer is moved over an item

void onMouseMove(string|number id,Event object ev,object html){ ... };

Parameters

id | string|number | id of the item
ev | Event object | native event object
html | object | target HTML element

Example

myList.attachEvent("onMouseMove", function (id, ev, html){
    // your code here
    return true;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseMoving DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onMouseMoving

fires when the mouse pointer is moved over a list

void onMouseMoving(Event ev){ ... };

Parameters

ev Event a native event object

Example

myList.attachEvent("onMousemoving", function (ev){
    // your code here
});

Details

The event name is case-insensitive.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseOut DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onMouseOut

fires when the mouse pointer is moved out of the list, or out of some item in the list

void onMouseOut(Event object ev){ ... };

Parameters

ev Event object native event object

Example

myList.attachEvent("onMouseOut", function (ev){
    // your code here
    return true;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelectChange DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onSelectChange

fires when the selection is changed

void onSelectChange(array sel_arr){ ... };

Parameters

sel_arr array an array of items, the selected state of which is changed

Example

myList.attachEvent("onSelectChange", function (sel_arr){
   // your code here
});

Details

the event also fires for multi-select actions

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onAfterAdd
  • onAfterDelete
  • onAfterDrop
  • onAfterEditStart
  • onAfterEditStop
  • onAfterRender
  • onAfterSelect
  • onBeforeAdd
  • onBeforeContextMenu
  • onBeforeDelete
  • onBeforeDrag
  • onBeforeDragIn
  • onBeforeDrop
  • onBeforeEditStart
  • onBeforeEditStop
  • onBeforeRender
  • onBeforeSelect
  • onDataRequest
  • onDragOut
  • onEditKeyPress
  • onItemClick
  • onItemDblClick
  • onItemRender
  • onMouseMove
  • onMouseMoving
  • onMouseOut
  • onSelectChange
  • onXLE
  • onXLS
Start List dhtmlXList API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • $view
Start List dhtmlXList API

Others

$view top html node of component
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


$view DHTMLX Docs

Documentation
  • $view
Start List dhtmlXList API Others

$view

top html node of component

Node $view;

Example

var node = some.$view;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing List DHTMLX Docs

Documentation
  • dhtmlXList API
  • Initializing List
    • Step 1. Including Necessary Files
    • Step 2. Creating Container
    • Step 3. Initializing List
  • Object Constructor
  • Specifying Templates
  • Paging
  • Loading Data
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
Start List

Initializing List

To initialize List, you need to complete the following steps:

  1. include dhtmlx.js and dhxtml.css files
  2. place a container for a list on a page
  3. run the list initialization

Step 1. Including Necessary Files

To start working with dhtmlxList, you need to include List js/css files on a page.

In order to use dhtmlxList as a separate component, you need to include its source files on the page. There are two of them:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxlist.css">
    <script src="codebase/dhtmlxlist.js"></script>
</head>

If you use dhtmlxList as a part of "dhtmlxSuite" package, you need to have 2 files included:

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

dhtmlxList .js/.css files are part of dhtmlx.js/.css, so there is no need to include them separately.

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Step 2. Creating Container

HTML container for List must have some sizes specified:

<div id="data_container" style="width:320px;height:396px;"></div>

Step 3. Initializing List

As only the "container" is mandatory, you need to define the template and the source of data to see any result on a page:

myList = new dhtmlXList({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#"
    }
});
myList.add({
    Package:"test one",
    Version:"0.1",
    Maintainer:"dhtmlx"
});

Other possible parameters are given in the article Object Constructor.

Since the add command is not a mandatory part of initialization, you will not have any visible objects on the page before some data isn't loaded into a list by the load or add commands.

Related sample: Initialization with auto height

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • dhtmlXList API
  • Initializing List
  • Object Constructor
    • Simple
    • Detailed
  • Specifying Templates
  • Paging
  • Loading Data
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
Start List

Object Constructor

There are two possible syntaxes of the List constructor:

Simple

var myList = new dhtmlXList("container_id");

Where "container_id" - id of the html container, inside of which List will be initialized.

Detailed

var myList = new dhtmlXList({
    container:"container_id",
    drag:true,
    select:true,
    type:some
});

Where:

  • container - {mixed} ID of the HTML container inside of which an item will be rendered
    • ID of HTML element
    • HTML object
  • drag - {boolean} enables drag-n-drop
    • true - dnd allowed
    • false - dnd denied
  • select - {mixed} defines selection mode
    • false - selection is denied
    • true - single selection is allowed
    • "multiselect" - multiselection is allowed
  • type - {mixed} name of a render-type, or a custom template
    • name of type
    • type object, check the Templates article
  • height - {string} can be set as "auto" to force auto-height
    • "auto" - force auto-height mode
  • pager - paging control settings
    • pager object, check the Paging article
  • tooltip - tooltip object settings
    • tooltip object
var myList = new dhtmlXList({
    container:"container_id",
    tooltip:{
        template:"Details: #property#"
    }
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Specifying Templates DHTMLX Docs

Documentation
  • dhtmlXList API
  • Initializing List
  • Object Constructor
  • Specifying Templates
    • Basic Information
    • Types of Templates
    • Templates Syntax
    • Changing Parameters of Templates
    • Predefined Properties of Templates
    • Styling of Templates
    • Special Templates
  • Paging
  • Loading Data
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
Start List

Specifying Templates

Basic Information

Templates define the way data is rendered inside of List. You can define multiple templates and switch between them dynamically.

myList = new dhtmlXList({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        height:40
    }
});

The { Package:"a", Version:"b", Maintainer:"c"} will be rendered as:

a : b <br/> c

A template can be defined as a part of the constructor (or not) as:

myList.define("type",{
    template:"#Package# : #Version#<br/>#Maintainer#"
});

If you need to provide only a text string and don't need any extra properties, you can use the "template" property directly on the top level (i.e. don't use the type parameter):

myList = new dhtmlXList({
    container:"data_container",
    template:"#Package# : #Version#<br/>#Maintainer#"
});

Types of Templates

JS string

myList.define("type",{
    template:"#Package# : #Version#<br/>#Maintainer#"
});

Related sample: Template from JS string

JS method

myList.define("type",{
    template:function(){ return obj.Package +"<br/>"+obj.Maintainer; }
});

Related sample: Template from JS function

HTML container

<textarea id="template_container" rows="5" cols="60">
#Package# : #Version#
<br/>#Maintainer#</textarea>
...
myList.define("type",{
    template:"html->template_container",
})

Related sample: Template from HTML container

HTML file

myList.define("type",{
    template:"http->../common/template.html",
})

Related sample: Template from HTML file

Named templates

dhtmlx.Type.add(dhtmlXList,{
    name:"dataA",
    template:"#Package# : #Version#<br/>#Maintainer#",
    height:40
});

data = new dhtmlXList({
    container:"data_container",
    type:"dataA"
});

Related sample: Named templates

Templates Syntax

"#property#" - replaced with a value of the related property

myList.define("type",{
    template:"#a# - #b#"
})
// a - b

"{common.property}" - replaced with a constant value from the template

myList.define("type",{
    template:"#a# - {common.mydata}",
    mydata:25
})
// a - 25

"{common.method()}" - replaced with the result of a method call

myList.define("type",{
    template:"#a# - {common.mymethod()}",
    mymethod:function(obj){
        return obj.b.toUpperCase();
    }
})
// a - B

"#property?valueA:valueB#" - trinary operator

myList.define("type",{
    template:"#a# - #flag?exist:not exist#"
})
// a - doesn't exist

"{-obj" - replaced with #

Changing Parameters of Templates

Sometimes it can be useful to change some parameter of a template. As a result, the view will be repainted with a new configuration.

myList.customize({
    height:100
});

If you define some property in template as {common.some}, you will be able to change it any time by using the "customize" command.

Predefined Properties of Templates

myList = new dhtmlXList({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        css:"some",
        width:120,
        height:40,
        margin:5,
        padding:0,
    }
});
  • template - (string) the template definition
  • height - (number) the item height. The default value - 115;
  • width - (number) the item width. The default value - 210;
  • margin - (number) the item margin. The default value - 0;
  • padding - (number) the item padding. The default value - 0;
  • border - (number) sets the border of the item container. The default value - 1;
  • css - (string) allows applying an additional css class to the template (see details below). The default value - 'default'.

Styling of Templates

If you want apply a custom css style to the template, use the following technique:

  1. Set the CSS property of the type parameter to some value, for example 'custom'
    myList = new dhtmlXList({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        css:"custom",
    }
});
  2. Define 2 css classes on the page with the following names (use the !important declaration to guarantee that the defined css property will be applied for sure):
    • .dhx_list_[css]_item - applied to items in the unselected state
    • .dhx_list_[css]_item_selected - applied to items in the selected state
    .dhx_list_custom_item_selected{
    font-weight:bold !important;
}
.dhx_list_custom_item{
    font-size:12px !important;
}

Note, the css property has the default value - 'default'. So, you can skip step 1 and define the css classes with the following names:

  • .dhx_list_default_item - applied to items in the unselected state
  • .dhx_list_default_item_selected - applied to items in the selected state

Special Templates

In addition to a standard template, List can have an additional task-specific template defined:

  • template_edit - applied to items during the Items editing process
myList = new dhtmlXList({
    container:"data_container",
    edit:true,
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        template_edit:"<input class='dhx_item_editor' bind='obj.Package'>"
    }
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Paging DHTMLX Docs

Documentation
  • dhtmlXList API
  • Initializing List
  • Object Constructor
  • Specifying Templates
  • Paging
    • Navigation Between Pages
    • Changing Pager's Settings
    • Custom Pager's Skins
    • Pager's Events
  • Loading Data
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
Start List

Paging

To create List with a paging area, use the following code:

data = new dhtmlXList({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        height:40
    },
    pager:{
        container:"paging_here",
        size:20,
        group:8
    }
});

The pager object contains the properties given below:

  • container - the id of an HTML container where a pager will be placed (mandatory)
  • size - count of objects per page
  • group - count of visible page selectors

Related sample: Paging

Navigation Between Pages

var pager = view.config.pager;
pager.select(page_number);

Changing Pager's Settings

var pager = view.config.pager;
pager.define("group",5); // set group as 5
pager.define("size",25); // 25 objects per page
pager.refresh();

Configurable properties are:

  • page - current page
  • limit - total count of pages
  • group - count of pages in the single visible group
  • size - count of items per page

Custom Pager's Skins

//default
pager.define("template","{common.pages()}");
//custom
pager.define("template","{common.first()}{common.pages()}{common.last()}");
pager.define("template",
"{common.prev()}<div class='paging_text'>Page #page# from #limit#</div>{common.next()}");

Supported objects are:

  • common
    • common.pages() - block of page-buttons
    • common.first() - "first page" button
    • common.last() - "last page" button
    • common.prev() - "previous page" button
    • common.next() - "next page" button
  • obj
    • obj.page - current page
    • obj.limit - total number of pages
    • obj.size - count of items per page

Related sample: Custom paging

Pager's Events

The list of supported pager's events includes:

  • onAfterPageChange
    • new page number
    • old page number
  • onBeforePageChange
    • new page number
    • old page number
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading Data DHTMLX Docs

Documentation
  • dhtmlXList API
  • Initializing List
  • Object Constructor
  • Specifying Templates
  • Paging
  • Loading Data
    • JSON
    • XML
    • HTML
    • CSV
    • JSArray
    • Parsing
    • Custom Data Types
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
Start List

Loading Data

To load data from some external file you can use the load command:

myList.load(url, datatype);

It takes the path to the file and a necessary data type as parameters. Where a data type can be: "json","xml","jsarray","csv","html".

Note that:

  • JSON and XML are the fastest formats.

  • Loading is asynchronous, which means you need to catch the end of loading before executing any commands against the data.

myList.load(url, function(){
    alert("data is really loaded");
    // any operations with data can be placed here
},datatype);

If the datatype parameter is skipped, the operation will try to process the incoming data as XML.

JSON

myList.load("some.json", "json");

where some.json contains a value similar to the following one:

"some.json"

[{
  "id":"1",
  "Package":"acx100-source",
  "Version":"20080210-1.1",
  "Maintainer":"Stefano Canepa"
},{
  "id":"2",
  "Package":"alien-arena-browser",
  "Version":"7.0-1",
  "Maintainer":"Debian Games Team"
},{
  "id":"3",
  "Package":"alien-arena-server",
  "Version":"7.0-1",
  "Maintainer":"Debian Games Team"
}]

The object can contain any number of properties and all of them will be available in templates.

The "id" property will be used as the ID of object. If there is no such a property, the component will create random IDs for each object.

Related sample: Loading data from JSON file

XML

myList.load("some.xml", "xml");

There aren't any requirements for incoming XML (it can be in any format), all the top level tags will be converted into objects.

"some.xml"

<data>
    <item id="1">
        <Package><![CDATA[acx100-source]]></Package>
        <Version><![CDATA[20080210-1.1]]></Version>
        <Maintainer><![CDATA[Stefano Canepa]]></Maintainer>
    </item>
    <item id="2">
        <Package><![CDATA[alien-arena-browser]]></Package>
        <Version><![CDATA[7.0-1]]></Version>
        <Maintainer><![CDATA[Debian Games Team]]></Maintainer>
    </item>
</data>

The names of the top level and the second level tags don't matter.

The attributes of the top level tags (item in the snippet above) and values of nested tags will be available as properties in the template and for scripting.

If you want to process only the tags with specific names you can change the xpath used for data collecting:

dhtmlx.dataDriver.xml.records = "/data/item"; //select only item tags

Related sample: Loading data from XML file

HTML

The processing works similar to that of XML, but will react only on <li> tags inside of the data (it makes no practical sense for loading from an url, exists just for consistence)

myList.load("some.html", "html");

"some.html"

<ul>
    <li id="1"  version="20080210-1.1" maintainer="Stefano Canepa">acx100-source</li>
    <li id="2"  version="7.0-1" maintainer="Debian Games Team">alien-arena-browser</li>
    <li id="3"  version="7.0-1" maintainer="Debian Games Team">alien-arena-server</li>
</ul>

The key-tag can be changed by using:

dhtmlx.dataDriver.md.tag = "DIV";

Related sample: Loading data from HTML file

CSV

Data in CSV doesn't have names for columns, so they are autonamed: the first column is accessible as "data0", the second one - as "data1", etc. IDs are auto-generated.

myList.load("some.csv", "csv");

"some.csv"

"1", "acx100-source", "20080210-1.1", "Stefano Canepa"
"2", "alien-arena-browser", "7.0-1", "Debian Games Team"
"3", "alien-arena-server", "7.0-1", "Debian Games Team"

You can configure row and line separators as:

dhtmlx.dataDriver.csv.row = "\n";
dhtmlx.dataDriver.csv.cell= ",";

Related sample: Loading data from CSV file

JSArray

Data in JS array doesn't have names for columns, so they are autonamed: the first column is accessible as "data0", the second as "data1" and etc. IDs are auto-generated.

myList.load("some.js", "jsarray");

"some.js"

[["1", "acx100-source", "20080210-1.1", "Stefano Canepa"],
["2", "alien-arena-browser", "7.0-1", "Debian Games Team"],
["3", "alien-arena-server", "7.0-1", "Debian Games Team"]]

Related sample: Loading data from JS array

Parsing

When the data is already available on the client side, you can use the code:

myList.parse(data, datatype);

Parsing is executed in a synchronous way, so new items are ready for operations after the command execution.

Parsing can be used with all the above mentioned data types.

XML string

myList.parse(
"<data>
    <item id="1">
        <Package><![CDATA[acx100-source]]></Package>
        <Version><![CDATA[20080210-1.1]]></Version>
        <Maintainer><![CDATA[Stefano Canepa]]></Maintainer>
    </item>
</data>"
);

Related sample: Parsing XML string

JSON object

myList.parse([{
  "id":"1",
  "Package":"acx100-source",
  "Version":"20080210-1.1",
  "Maintainer":"Stefano Canepa"
},{
  "id":"2",
  "Package":"alien-arena-browser",
  "Version":"7.0-1",
  "Maintainer":"Debian Games Team"
},{
  "id":"3",
  "Package":"alien-arena-server",
  "Version":"7.0-1",
  "Maintainer":"Debian Games Team"
}],"json");

Related sample: Parsing JSON object

HTML

myList.parse("id_of_html_element","html");

Related sample: Parsing HTML data

CSV string

myList.parse('"1", "acx100-source", "20080210-1.1", "Stefano Canepa"
  \n"2", "alien-arena-browser", "7.0-1", "Debian Games Team"
  \n"3", "alien-arena-server", "7.0-1", "Debian Games Team"',"csv");

Related sample: Parsing CSV string

JavaScript array

myList.parse([["1", "acx100-source", "20080210-1.1", "Stefano Canepa"],
["2", "alien-arena-browser", "7.0-1", "Debian Games Team"],
["3", "alien-arena-server", "7.0-1", "Debian Games Team"]],"jsarray");

Related sample: Parsing JS array

Custom Data Types

If the above loading types are not enough, you can create a custom one.

dhtmlx.dataDriver.mytype=dhtmlx.extend({},dhtmlx.dataDriver.jsarray,{
    getDetails:function(data){
        var result = {};
        result.id = data[0];
        result.Package       = data[1];
        result.Version       = data[2];
        result.Maintainer    = data[3];
        return result;
    }
})
myList.load(url, "mytype");

Related sample: Custom data type

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Connecting to Database DHTMLX Docs

Documentation
  • dhtmlXList API
  • Initializing List
  • Object Constructor
  • Specifying Templates
  • Paging
  • Loading Data
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
Start List

Connecting to Database

The same as any other data-driven component List can load and save data by means of connectors.

Client-side init

//index.html
var myList = new dhtmlXList("someContainer"); // initializes List
...
myList.load("php/data.php");
var myDP = new dataProcessor("php/data.php"); // initializes dhtmlxDataProcessor
myDP.init(myList);

Server-side init

<?php
    require_once("../../../connector/dataview_connector.php");

    $conn = new PDO("mysql:dbname=dataview;host=localhost","root","");

    $data = new DataViewConnector($conn);
    //table name, ID, list of properties
    $data->render_table("packages_small","Id","Package,Version,Maintainer");
?>

Related sample: Connecting to database

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Operating Items DHTMLX Docs

Documentation
  • dhtmlXList API
  • Initializing List
  • Object Constructor
  • Specifying Templates
  • Paging
  • Loading Data
  • Connecting to Database
  • Operating Items
    • Adding Items
    • Deleting Items
    • Editing Items
    • Selection
    • Sorting
    • Filtering
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
Start List

Operating Items

Adding Items

To add data items into List use the add method:

myList.add({
    id:"some id",
    property:"some value"
});

If "id" isn't defined, it will be autogenerated.

Related sample: Add/delete data on runtime

Deleting Items

The remove method will help you to delete a data item from List:

myList.remove("some id");
//or
myList.remove(["idA","idB","idC","idD"]);

Related sample: Add/delete data on runtime

Editing Items

To enable the item's editing ability, the following steps need to be completed:

  1. the edit mode enabled
  2. the edit template defined
myList = new dhtmlXList({
    container:"data_container",
    edit:true,
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        template_edit:"<input class='dhx_item_editor' bind='obj.Package'>"
    }
});

The edit template works the same as the normal one plus the tags inside of it can have the bind attribute.

It means that during the switching to the edit state, a component will put the related properties into the inputs and on the edit-end command the properties will be filled from the inputs, respectively.

The editing process is triggered by dbl-click by default.

You can switch a cell to manual editing using the code below:

myList.edit(id);
myList.stopEdit();

Related sample: Edit item

Selection

A component is initialized in the multiselect mode by default. It can be controlled either by using the parameter of constructor or by JS API.

In the first case, use the code below:

var myList = new dhtmlXList({
    container:"some_html",
    select:"multiselect"
});
...
myList.define("select",true);

Possible values of the "select" parameter:

  • false - disable selection;
  • true - enable selection ( single selection );
  • "multiselect" - enable multi-selection.

Single item can be selected by clicking on it.

Multiple items can be selected by using Ctrl and Shift keys while clicking on items.

To select an item by API the following commands can be used:

myList.select(id);
myList.unselect(id);
myList.selectAll();
myList.unselectAll();
var boolean= myList.isSelected(id);
var id = myList.getSelected();

Calling the select or unselect methods without parameter is equal to calling selectAll or unselectAll, respectively.

The getSelected method returns the ID of the selected item in the single selection mode. In multiselection mode if more than one element selected the method will return an array of IDs.

During the selection of items (by user or by API) the following events are generated:

  • onBeforeSelect
  • onAfterSelect
  • onSelectChange

In case of single selection all 3 events are generated. If multiselection is enabled and Ctrl-click or Shift-click occurs, only the onSelectChange event will be generated.

In multiselect mode the select command can use additional parameters:

// select in addition to existing ones
myList.select(id,true); // the same as Ctrl-click
// select all the items from the previously selected till the current one
myList.select(id,false,true); // same as Shift-click

Beware that the select method changes the selection only and doesn't affect the items' visibility. So you will need to use the show method to ensure that an item is visible (scrolled into the visible part of list).

myList.show(id);

Related sample: Select items

Sorting

Items can be sorted by any properties. The values in List are sorted as case-insensitive strings by default.

// sort all data by the Maintainer property in the ascending order
myList.sort("#Maintainer#","asc");
// the same but in the descending order
myList.sort("#Maintainer#","desc");

If you need a custom sorting rule, you can define your own sorter-function:

myList.sort(function(objA, objB){
    // objA and objB - are the objects which need to be compared
    return objA.some_value > objB.some_value?1:-1;
},"asc");

A custom sorting method accepts two objects and must return 1 if the first object is greater than second one, or -1 otherwise.

The values of the direction parameter:

  • "asc" - ascending order, case-insensitive;
  • any other value - descending order.

Related sample: Sort items

Filtering

A dataset can be filtered by one of the multiple parameters. To apply a simple one-parameter filtering, you can use the code similar to the following one:

// will show the object where the string "Alex" exists in the Maintainer's name
// filtering is case-insensitive by default
myList.filter("#Maintainer#","Alex");

If you need to apply a more complex filtering, it can be implemented by means of providing the filtering method filter as the first parameter:

myList.filter(function(obj){
    if (obj.valueA > 10 && obj.valueB < 100) return true;
    return false;
});

The filtering method receives the object and the filtering value (if it was provided as a part of the filter() command). The result of the method must be true if the object needs to be shown and false otherwise.

Related sample: Filter items

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Drag-n-Drop DHTMLX Docs

Documentation
  • dhtmlXList API
  • Initializing List
  • Object Constructor
  • Specifying Templates
  • Paging
  • Loading Data
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
    • Drag Context
    • Drag from Custom HTML
    • Drag to Custom HTML
    • D-n-D with Tree and Grid
    • Dragging List items that contain images
  • Moving Items by API
  • Handling Events
Start List

Drag-n-Drop

To enable drag-n-drop you need to set the drag property.

myList = new dhtmlXList({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#"
    },
    drag:true
});
myList.load("../common/data.xml");

There are 5 events which can be used to customize d-n-d behavior:

  • onBeforeDrag - fires before the mouse button is pressed and moved over the target
  • onBeforeDragIn - fires before a dragged element is moved over the target
  • onDragOut - fires when a dragged element is moved outside the list container
  • onBeforeDrop - fires before a dragged element is released over the target (the mouse button released)
  • onAfterDrop - fires after drag-n-drop is finished (the item is rendered at the new position)

onBeforeDrag - can contain the rules specifying which elements can be dragged and which cannot. Allows redefining the representation of the item during the dragging.

myList.attachEvent("onBeforeDrag",function(context,ev){
    if (this.get(id).some_property) return false; // deny dnd
    return true; // allow dnd
});
myList.attachEvent("onBeforeDrag",function(context,ev){
    // set custom content for the dragged element
    context.md = "Custom <b>text</b>";
});

onBeforeDragIn - allows defining if d-n-d between the source and the target elements is allowed.

myList.attachEvent("onBeforeDrag",function(context,ev){
    if (this.get(id).some_property) return false; //deny dnd
    return true; //allow dnd
});

onDragOut - just informs that the item is moved out, can be used for custom styling.

onBeforeDrop - can be used to implement a custom d-n-d reaction.

myList.attachEvent("onBeforeDrop",function(context,ev){
    // custom data moving
    this.move(context.source, this.indexById(context.target));
    return false; // block default processing
});

onAfterDrop - informs that d-n-d operation is finished.

Drag Context

The object which is available in all drag events, it contains:

context = {
    source:[1,2,3], // array of IDs for the dragged elements
    target:id, // ID of the currently active target item
    from:some_obj, // reference to the source object
    to:some_obj, // reference to the target object
    html:text // optional, custom text which is rendered as drag-item
};

Drag from Custom HTML

<div package="DragPackage" version="1.0" maintainer="dhtmlx Team"
    id="drag_1"
    style='width:150px; height:50px; color:white; background-color:navy;'>
    Drag me into the list
</div>
dhtmlx.DragControl.addDrag("drag_1");

data1.attachEvent("onBeforeDrop",function(context){
    if (context.from == dhtmlx.DragControl){
        this.add({
            Package:context.source.getAttribute("package"),
            Version:context.source.getAttribute("version"),
            Maintainer:context.source.getAttribute("maintainer")
        },this.indexById(context.target||this.first()));
        return false;
    }
    return true;
})

Drag to Custom HTML

<div id="data_container2" style="width:400px;height:396px;border:1px solid red;">
    Drop some item here
</div>
dhtmlx.DragControl.addDrop("data_container2",{
    onDrop:function(source, target, d, e){
        var context = dhtmlx.DragControl.getContext();
        var item = context.from.get(context.source[0]);

        var d = document.createElement("DIV");
        d.innerHTML = item.Package+" - "+item.Version;
        target.appendChild(d);
    }
});

Related sample: Drag data from List to HTML container

D-n-D with Tree and Grid

Firstly, you need to enable the compatibility mode

dhtmlx.compat("dnd");

After that you will be able to drag items between list, grid and tree.

The component isn't able to convert different item types automatically, but it will produce correct d-n-d events which can be used to define a custom reaction on d-n-d.

Dragging List items that contain images

If a list item contains images in it, you need to block image dragging via the ondragstart handler.

An example is given below:

data = new dhtmlXList({
   container:"data_container",
   drag:true,
   type:{
       template:"<img src='#Image#' ondragstart='return false'/> #Text#",          height:100
   }
});
data.parse([
  {"id":"1", "Text":"Item 1", "Image":"image1.png"},
  {"id":"2", "Text":"Item 2", "Image":"image2.png"},
  ...
],"json");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Moving Items by API DHTMLX Docs

Documentation
  • dhtmlXList API
  • Initializing List
  • Object Constructor
  • Specifying Templates
  • Paging
  • Loading Data
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
    • Moving
    • Copying
  • Handling Events
Start List

Moving Items by API

Moving

There's a possibility to move items with the help of special methods. You may move the items to the very top/bottom of the List or move them up/down by the specified number of steps:

myList.moveUp(id)
myList.moveUp(id,step);

myList.moveDown(id)
myList.moveDown(id,step)

myList.moveTop(id)

myList.moveBottom(id)

Related sample: Moving items within List

Items can also be moved to the specified position or to a different list by using the method move:

// move to the position
myList.move(id, index);
// move to a different view
myList.move(id, index, some_other_view);
// or
myList.move(id, null, some_other_view);

// move to different list and change the ID
// scenario may be needed to prevent the ID collision
myList.move(id, index, some_other_view, target_id);

ID of the item is preserved while moving.

Related sample: Moving items between Lists

Copying

It's also possible to copy an item to the defined position. For this purpose the method copy is used:

//make a copy of an element
var new_id = myList.copy(source_id);
//make a copy at the specific position
var new_id = myList.copy(source_id, index);
//make a copy in a different list
var new_id = myList.copy(source_id, index, some_other_list);
//or
var new_id = myList.copy(source_id, null , some_other_list);

//make a copy with the defined ID
myList.copy(source_id, null, null, target_id);
//or
myList.copy(source_id, index, null, target_id);
//or
myList.copy(source_id, index, some_other_list, target_id);

The method returns the ID of the copied item which is autogenerated or can be specified as the last parameter.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXList API
  • Initializing List
  • Object Constructor
  • Specifying Templates
  • Paging
  • Loading Data
  • Connecting to Database
  • Operating Items
  • Drag-n-Drop
  • Moving Items by API
  • Handling Events
    • Attaching events
    • Detaching events
    • Naming tips
    • The list of events
Start List

Handling Events

Attaching events

The attachEvent() method can be used to add an event handler to any of the available events. The method needs to be called with the following parameters:

function my_handler(){ do_something(); };
myList.attachEvent("onSomeEvent",my_handler);

Several handlers can be attached to one and the same event and all of them will be executed.

The names of the events are case-insensitive.

Detaching events

There is a simple way of removing an event handler:

var id = myList.attachEvent("onSomeEvent",my_handler);
...
myList.detachEvent(id); // unique id of the event handler

Naming tips
  • events which start with "before" - can be blocked, returning true from such an event handler will confirm the operation, returning false or not returning anything will block the default event processing;
  • events which start with "after" - can't be blocked, but have a sibling event the name of which starts with "before".

The list of events

You can find the full list of events in the dhtmlXList API.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Menu DHTMLX Docs

Documentation
  • Menu
    • dhtmlXMenu API
    • How to Start with Menu?
    • Object Constructor
    • Loading from XML
    • Loading from HTML Object
    • Loading from Script
    • Dynamic Loading (with Ajax)
    • Configuring Menu
    • Configuring Menu Items
    • Skinning Menu
    • Font Awesome Icons in Menu
    • Creating a Context Menu
    • Used Terms
    • Handling Events
    • Using Iterator
    • Migration from 3.6 to 4.0
Start

Menu

dhtmlxMenu is a component that provides an easy way to add a professional drop down menu or a contextual menu to user's projects. This component is highly customizable and supports a wide range of features. dhtmlxMenu component can be a good navigation aid to web sites, help systems, etc.

API reference
  • dhtmlXMenu API
Related resources
  • You may download dhtmlxMenu from dhtmlx.com
  • Check online samples for dhtmlxMenu
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Initializing Menu on a Page

  • How to Start with Menu?
  • Object Constructor
 Introduces the steps of creating Menu on a page.

Loading Data into Menu

  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
 Describes possible sources for Menu data loading.

Working with Menu

  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
 Shows the possibilities of manipulating Menu and its items, as well as describes the process of creating a context menu.

Auxiliary Resources

  • Used Terms
  • Handling Events
  • Using Iterator
 Covers common information you may need while working with Menu.

Other

  • Migration from 3.6 to 4.0
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXMenu API DHTMLX Docs

Documentation
  • dhtmlXMenu API
    • Methods
    • Events
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

dhtmlXMenu API

Methods
addCheckbox | adds a new checkbox, sibling/child mode
addContextZone | adds a context zone to a context menu
addNewChild | adds a new child item
addNewSeparator | adds a new separator
addNewSibling | adds a new sibling item
addRadioButton | adds a new radio button, sibling/child mode
attachEvent | adds any user-defined handler to available events
clearAll | clears all the loaded items
clearHref | removes HREF from an item and returns the item to default onClick behavior
clearItemImage | removes both enabled and disabled item images
detachEvent | detaches a handler from an event
enableDynamicLoading | enables dynamic loading of sublevels
enableEffect | sets animation for a context menu
forEachItem | iterator, calls a user-defined handler function for each item
getCheckboxState | returns true, if a checkbox is checked
getCircuit | returns an array of ids from the topmost parent to the chosen item
getContextMenuHideAllMode | returns the state of the "hide all" context menu mode
getHotKey | returns item's hot-key (just the text label)
getItemImage | returns item's images for enabled and disabled modes
getItemPosition | returns item's position in the current polygon
getItemText | returns item's text
getItemType | returns item type by id
getParentId | returns the id of the item's parent
getRadioChecked | returns the id of the checked radio button in the group
getTooltip | returns current tooltip text of a menu item
getUserData | returns an item's userdata
hide | hides any open menu polygons
hideContextMenu | usercall to hide a context menu
hideItem | hides an item
isContextZone | checks whether an object is used as a context zone for the menu
isItemEnabled | checks whether an item is enabled
isItemHidden | checks whether an item is hidden
loadFromHTML | loads menu data from an HTML file and calls onLoadFunction when loading is done
loadStruct | loads data to the component via XML or JSON, usually component config
loadXML | loads menu data from an XML file and calls the onLoadFunction when the loading is done
loadXMLString | loads menu data from an XML string and calls onLoadFunction when loading is done
removeContextZone | removes an object from the list of context zones
removeItem | removes an item with all its nested sublevels from the menu
renderAsContextMenu | renders a menu as a context one
serialize | serializes menu structure to an XML object
setAlign | sets menu's top level align
setAutoHideMode | sets to false to prevent hiding a context menu by click
setAutoShowMode | sets to false to prevent showing a context menu by a click
setCheckboxState | sets a checkbox's state (checked/unchecked)
setContextMenuHideAllMode | if set to true, the method will hide all the opened context menu polygons on mouseout
setHotKey | sets menu hot-key (just text label)
setHref | sets HREF to an item; overwrites the old one if it exists
setIconPath | defines the url to the folder where the user-defined icons are located
setIconsPath | defines the url to the folder where the user-defined icons are located
setIconset | sets the font awesome iconset
setImagePath | sets path to images
setItemDisabled | disables an item
setItemEnabled | enables an item
setItemImage | sets an image for an item
setItemPosition | sets a new item's position in the current polygon (moves an item inside the single level)
setItemText | sets a text for an item
setOpenMode | sets the opening mode for a menu
setOverflowHeight | sets the maximum number of visible items in polygons
setRadioChecked | checks a radio button inside of the group
setSkin | changes the skin of the menu
setTooltip | sets a tooltip for a menu item
setTopText | sets a top level additional text (for a usual menubar)
setUserData | sets user data for an item
setVisibleArea | sets an area where a menu can appear
setWebModeTimeout | sets timeout for hiding a menu ("web" mode only)
showContextMenu | a usercall to show a context menu
showItem | shows an item
unload | unloads a menu from the page (destructor)
Events
onAfterContextMenu | fires after the moment when a context menu appears by the right mouse click
onBeforeContextMenu | fires before the moment when a context menu appears by the right mouse click
onCheckboxClick | fires when the user clicks any checkbox item
onClick | fires when the user clicks the left mouse button on an enabled, not complex menu item
onContextMenu | fires when the user clicks on the context menu zone with the right mouse button
onHide | fires when the user moves the mouse cursor out of the menu polygon
onRadioClick | fires when the user clicks any radio item
onShow | fires when the user hovers over any polygon opener by a mouse cursor
onTouch | fires when the user hovers over any polygon opener by a mouse cursor for the first time
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • addCheckbox
    • addContextZone
    • addNewChild
    • addNewSeparator
    • addNewSibling
    • addRadioButton
    • attachEvent
    • clearAll
    • clearHref
    • clearItemImage
    • detachEvent
    • enableDynamicLoading
    • enableEffect
    • forEachItem
    • getCheckboxState
    • getCircuit
    • getContextMenuHideAllMode
    • getHotKey
    • getItemImage
    • getItemPosition
    • getItemText
    • getItemType
    • getParentId
    • getRadioChecked
    • getTooltip
    • getUserData
    • hide
    • hideContextMenu
    • hideItem
    • isContextZone
    • isItemEnabled
    • isItemHidden
    • loadFromHTML
    • loadStruct
    • loadXML
    • loadXMLString
    • removeContextZone
    • removeItem
    • renderAsContextMenu
    • serialize
    • setAlign
    • setAutoHideMode
    • setAutoShowMode
    • setCheckboxState
    • setContextMenuHideAllMode
    • setHotKey
    • setHref
    • setIconPath
    • setIconsPath
    • setIconset
    • setImagePath
    • setItemDisabled
    • setItemEnabled
    • setItemImage
    • setItemPosition
    • setItemText
    • setOpenMode
    • setOverflowHeight
    • setRadioChecked
    • setSkin
    • setTooltip
    • setTopText
    • setUserData
    • setVisibleArea
    • setWebModeTimeout
    • showContextMenu
    • showItem
    • unload
  • Events
Start Menu dhtmlXMenu API

Methods

addCheckbox | adds a new checkbox, sibling/child mode
addContextZone | adds a context zone to a context menu
addNewChild | adds a new child item
addNewSeparator | adds a new separator
addNewSibling | adds a new sibling item
addRadioButton | adds a new radio button, sibling/child mode
attachEvent | adds any user-defined handler to available events
clearAll | clears all the loaded items
clearHref | removes HREF from an item and returns the item to default onClick behavior
clearItemImage | removes both enabled and disabled item images
detachEvent | detaches a handler from an event
enableDynamicLoading | enables dynamic loading of sublevels
enableEffect | sets animation for a context menu
forEachItem | iterator, calls a user-defined handler function for each item
getCheckboxState | returns true, if a checkbox is checked
getCircuit | returns an array of ids from the topmost parent to the chosen item
getContextMenuHideAllMode | returns the state of the "hide all" context menu mode
getHotKey | returns item's hot-key (just the text label)
getItemImage | returns item's images for enabled and disabled modes
getItemPosition | returns item's position in the current polygon
getItemText | returns item's text
getItemType | returns item type by id
getParentId | returns the id of the item's parent
getRadioChecked | returns the id of the checked radio button in the group
getTooltip | returns current tooltip text of a menu item
getUserData | returns an item's userdata
hide | hides any open menu polygons
hideContextMenu | usercall to hide a context menu
hideItem | hides an item
isContextZone | checks whether an object is used as a context zone for the menu
isItemEnabled | checks whether an item is enabled
isItemHidden | checks whether an item is hidden
loadFromHTML | loads menu data from an HTML file and calls onLoadFunction when loading is done
loadStruct | loads data to the component via XML or JSON, usually component config
loadXML | loads menu data from an XML file and calls the onLoadFunction when the loading is done
loadXMLString | loads menu data from an XML string and calls onLoadFunction when loading is done
removeContextZone | removes an object from the list of context zones
removeItem | removes an item with all its nested sublevels from the menu
renderAsContextMenu | renders a menu as a context one
serialize | serializes menu structure to an XML object
setAlign | sets menu's top level align
setAutoHideMode | sets to false to prevent hiding a context menu by click
setAutoShowMode | sets to false to prevent showing a context menu by a click
setCheckboxState | sets a checkbox's state (checked/unchecked)
setContextMenuHideAllMode | if set to true, the method will hide all the opened context menu polygons on mouseout
setHotKey | sets menu hot-key (just text label)
setHref | sets HREF to an item; overwrites the old one if it exists
setIconPath | defines the url to the folder where the user-defined icons are located
setIconsPath | defines the url to the folder where the user-defined icons are located
setIconset | sets the font awesome iconset
setImagePath | sets path to images
setItemDisabled | disables an item
setItemEnabled | enables an item
setItemImage | sets an image for an item
setItemPosition | sets a new item's position in the current polygon (moves an item inside the single level)
setItemText | sets a text for an item
setOpenMode | sets the opening mode for a menu
setOverflowHeight | sets the maximum number of visible items in polygons
setRadioChecked | checks a radio button inside of the group
setSkin | changes the skin of the menu
setTooltip | sets a tooltip for a menu item
setTopText | sets a top level additional text (for a usual menubar)
setUserData | sets user data for an item
setVisibleArea | sets an area where a menu can appear
setWebModeTimeout | sets timeout for hiding a menu ("web" mode only)
showContextMenu | a usercall to show a context menu
showItem | shows an item
unload | unloads a menu from the page (destructor)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addCheckbox DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

addCheckbox

adds a new checkbox, sibling/child mode

void addCheckbox(string mode,object nextToId,number pos,string|number itemId,string text,boolean state,boolean dis);

Parameters

mode | string | sibling/child
nextToId | object | the item after which a checkbox will be added in the "sibling" mode or parent item's id in the "child" mode
pos | number | item's position in the child mode (null for the sibling one)
itemId | string|number | id of a new checkbox
text | string | text of a new checkbox
state | boolean | checked/unchecked
dis | boolean | enabled/disabled

Example

myMenu.addCheckbox(mode, nextToId, pos, itemId, text, state, dis);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addContextZone DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

addContextZone

adds a context zone to a context menu

void addContextZone(string zoneId);

Parameters

zoneId string id of the object on a page to render as a context zone

Example

<!-- first add node -->
<body>
    <div id="Cnt_zone"> </div>
</body>

//then init menu and render the node above as a context menu
var myMenu = new dhtmlXMenuObject();
myMenu.renderAsContextMenu();
myMenu.addContextZone("Cnt_zone");

See also
  • API
    • removeContextZone
    • renderAsContextMenu
    • isContextZone
  • Articles
    • Creating a Context Menu
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


addNewChild DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

addNewChild

adds a new child item

void addNewChild(object parId,number pos,string|number itemId,string text,boolean dis,string imgEn,string imgDis);

Parameters

parId | object | the item which will contain a new item in the sublevel
pos | number | the position of a new item
itemId | string|number | id of a new item
text | string | text of a new item
dis | boolean | true/false, whether the item is disabled or not
imgEn | string | image for the enabled item
imgDis | string | image for the disabled item

Example

myMenu.addNewChild(parentId, pos, itemId, text, dis, imgEn, imgDis);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addNewSeparator DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

addNewSeparator

adds a new separator

void addNewSeparator(string|number nextToId,string|number itemId);

Parameters

nextToId | string|number | id of the element after which a new separator will be inserted
itemId | string|number | id of a new separator

Example

myMenu.addNewSeparator(nextToId, itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addNewSibling DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

addNewSibling

adds a new sibling item

void addNewSibling(string|number nextToId,string|number itemId,string text,boolean dis,string imgEn,string imgDis);

Parameters

nextToId | string|number | id of the element after which a new one will be inserted
itemId | string|number | id of a new item
text | string | text of a new item
dis | boolean | true|false, whether the item is disabled or not
imgEn | string | image for the enabled item
imgDis | string | image for the disabled item

Example

menu.addNewSibling(nextToId, itemId, text, dis, imgEn, imgDis);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addRadioButton DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

addRadioButton

adds a new radio button, sibling/child mode

void addRadioButton(string mode,string|number nextToId,number pos,string|number itemId,string text,string|number group,boolean state,boolean dis);

Parameters

mode | string | sibling/child
nextToId | string|number | the item after which the radio button will be added in the "sibling" mode or parent item's id in the "child" mode
pos | number | the item's position in the child mode (null for the sibling one)
itemId | string|number | id of a new radio button
text | string | text of a new radio button
group | string|number | radiogroup's id
state | boolean | checked/unchecked
dis | boolean | enabled/disabled

Example

myMenu.addRadioButton(mode, nextToId, pos, itemId, text, group, state, dis);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearAll DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

clearAll

clears all the loaded items

void clearAll();

Example

myMenu.clearAll();

See also
  • Articles
    • Configuring Menu
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


clearHref DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

clearHref

removes HREF from an item and returns the item to default onClick behavior

void clearHref(string|number itemId);

Parameters

itemId string|number item's id

Example

myMenu.clearHref(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearItemImage DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

clearItemImage

removes both enabled and disabled item images

void clearItemImage(string|number itemId);

Parameters

itemId string|number item's id

Example

myMenu.clearItemImage(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDynamicLoading DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

enableDynamicLoading

enables dynamic loading of sublevels

void enableDynamicLoading(string url,boolean icon);

Parameters

url | string | server-side script
icon | boolean | true/false, replaces element's arrow with loading image while loading

Example

myMenu.enableDynamicLoading("server.php", true);

Details

Menu sends two params to server-side script (in POST data):

  • action=loadMenu
  • parentId=ID, where ID is parent item id, for sublevels only

XML Format

// top-level
<menu>
    <item id="navigation" text="Navigation" complex="true"></item>
    <item id="help" text="Help" complex="true"></item>
</menu>

// sublevel (for navigation)
<menu parentId="navigation">
    <item id="nav_general" text="General" complex="true"></item>
    <item id="nav_settings" text="Settings" complex="true"></item>
</menu>

// sublevel (for help)
<menu parentId="help">
    <item id="help_about" text="About..." img="about.gif"></item>
    <item id="help_help" text="Help" img="help.gif"></item>
    <item id="help_bugrep" text="Bug Reporting" img="bugrep.gif"></item>
</menu>

JSON Format

// top-level
[
    {id: "navigation", text: "Navigation", complex: true},
    {id: "help", text: "Help", complex: true}
]

// sublevel (for navigation)
{
    parentId: "navigation",
    items: [
        {id: "nav_general", text: "General", complex: true},
        {id: "nav_settings", text: "Settings", complex: true}
    ]
}

// sublevel (for help)
{
    parentId: "help",
    items: [
        {id: "help_about", text: "About...", img: "about.gif"},
        {id: "help_help", text: "Help", img: "help.gif"},
        {id: "help_bugrep", text: "Bug Reporting", img: "bugrep.gif"}
    ]
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableEffect DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

enableEffect

sets animation for a context menu

void enableEffect(string name,number maxOpacity,number effectSpeed);

Parameters

name | string | (mandatory), effect name; values: "opacity" or "slide" or "slide+" (slide with opacity)
maxOpacity | number | (optional), sets max opacity level - 0..100 (%)
effectSpeed | number | (optional), sets effect speed, ms

Example

myMenu.enableEffect(name, maxOpacity, effectSpeed);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachItem DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

forEachItem

iterator, calls a user-defined handler function for each item

void forEachItem(function handler);

Parameters

handler function a user-defined function, will take the item id as an argument

Example

myMenu.forEachItem(function(itemId){
    // your code here
});
// or
function doWithItem(itemId){
    // your code here
}
myMenu.forEachItem(doWithItem);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCheckboxState DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

getCheckboxState

returns true, if a checkbox is checked

boolean getCheckboxState(string|number id);

Parameters

id string|number item id

Returns

boolean true|false - checked/unchecked

Example

var isChecked = myMenu.getCheckboxState(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCircuit DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

getCircuit

returns an array of ids from the topmost parent to the chosen item

array getCircuit(string|number id);

Parameters

id string|number id of the chosen item

Returns

array ids from the topmost parent to the chosen item
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getContextMenuHideAllMode DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

getContextMenuHideAllMode

returns the state of the "hide all" context menu mode

boolean getContextMenuHideAllMode();

Returns

boolean true - the "hide all" mode is enabled, false - disabled

Example

var isHideAllModeEnabled = myMenu.getContextMenuHideAllMode();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getHotKey DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

getHotKey

returns item's hot-key (just the text label)

string getHotKey(string|number itemId);

Parameters

itemId string|number menu item's id

Returns

string item's hot-key

Example

var hkText = myMenu.getHotKey(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemImage DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

getItemImage

returns item's images for enabled and disabled modes

array getItemImage(string|number itemId);

Parameters

itemId string|number id of an item

Returns

array [img, imgDis] of the item

Example

var imgs = myMenu.getItemImage(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemPosition DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

getItemPosition

returns item's position in the current polygon

number getItemPosition(string|number itemId);

Parameters

itemId string|number the item's id

Returns

number item's position

Example

var pos = myMenu.getItemPosition(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemText DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

getItemText

returns item's text

string getItemText(string|number itemId);

Parameters

itemId string|number the item's id

Returns

string the item's text

Example

var text = myMenu.getItemText(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemType DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

getItemType

returns item type by id

string getItemType(string itemId);

Parameters

itemId string the item's id

Returns

string the item's type

Example

var type = myMenu.getItemType(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getParentId DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

getParentId

returns the id of the item's parent

string|number getParentId(string|number itemId);

Parameters

itemId string|number the item's id

Returns

string|number the parent's id

Example

var parentId = myMenu.getParentId(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getRadioChecked DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

getRadioChecked

returns the id of the checked radio button in the group

string|number getRadioChecked(string group);

Parameters

group string radio button group name

Returns

string|number id of the checked radio button

Example

var checkedId = myMenu.getRadioChecked(group);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getTooltip DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

getTooltip

returns current tooltip text of a menu item

string getTooltip(string|number itemId);

Parameters

itemId string|number menu item's id

Returns

string item's tooltip text

Example

var tip = myMenu.getTooltip(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getUserData DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

getUserData

returns an item's userdata

mixed getUserData(string|number itemId,string name);

Parameters

itemId | string|number | the item's id
name | string | the name of user data

Returns

mixed the item's user data

Example

var userData = myMenu.getUserData(itemId, name);

Related samples

  • Change items userdata
See also
  • API
    • getUserData
  • Articles
    • Configuring Menu Items
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


hide DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

hide

hides any open menu polygons

void hide();

Example

myMenu.hide();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideContextMenu DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

hideContextMenu

usercall to hide a context menu

void hideContextMenu();

Example

myMenu.hideContextMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideItem DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

hideItem

hides an item

void hideItem(string|number id);

Parameters

id string|number the id of the item to hide

Example

myMenu.hideItem(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isContextZone DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

isContextZone

checks whether an object is used as a context zone for the menu

boolean isContextZone(string zoneId);

Parameters

zoneId string id of the object to check

Returns

boolean true - object is used as a context menu, false - it isn't

Example

<!-- define a div which will be used as a context zone -->

<body>
    <div id="Cnt_zone"></div>
</body>

//check whether it's a context zone, add it as a context zone and check again
var menu = new dhtmlXMenuObject();
myMenu.renderAsContextMenu();
var isZone = myMenu.isContextZone("Cnt_zone"); // returns false, not assigned yet
myMenu.addContextZone("Cnt_zone");
var isZone2 = myMenu.isContextZone("Cnt_zone"); // returns true

See also
  • API
    • addContextZone
    • removeContextZone
    • renderAsContextMenu
  • Articles
    • Creating a Context Menu
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


isItemEnabled DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

isItemEnabled

checks whether an item is enabled

boolean isItemEnabled(string|number itemId);

Parameters

itemId string|number id of the item to check

Returns

boolean true - the item is enabled, false - disabled

Example

var isEnabled = myMenu.isItemEnabled(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isItemHidden DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

isItemHidden

checks whether an item is hidden

boolean isItemHidden(string|number itemId);

Parameters

itemId string|number id of the item to check

Returns

boolean true - item is hidden, false - it isn't

Example

var isHidden = myMenu.isItemHidden(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadFromHTML DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

loadFromHTML

loads menu data from an HTML file and calls onLoadFunction when loading is done

void loadFromHTML(HTMLElement object,boolean clearAfterAdd,function onLoadFunction);

Parameters

object | HTMLElement | HTML data container
clearAfterAdd | boolean | true/false, removes the container object after the data is loaded
onLoadFunction | function | is called after the data is loaded (but before clearing HTML content, if clearAfterAdd is set to true)

Example

<!-- add div on the page -->

<body>
  <div id="menuData" style="display: none;">
    <div id="m1" text="File"> // the first top menu item
       <div id="m11" text="New" <hotkey>Ctrl+N</hotkey></div>// the first child item
       <div id="ms1" type="separator"></div> // a separator
       <div id="m12" text="Open"><hotkey>Ctrl+O</hotkey></div> // the second child item
    </div>
  </div>
</body>

//init menu
<script>
    menu.loadFromHTML("menuData", true, function(){});
    // or
    function doOnLoad(){
        // your code here
    }
    menu.loadFromHTML("menuData", true, doOnLoad)
</script>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadStruct DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

loadStruct

loads data to the component via XML or JSON, usually component config

promise loadStruct(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.loadStruct('<data><node id="a1".../></data>');

// json/xml from server
myComponent.loadStruct("server/data.xml");

// local json/xml with callback
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.loadStruct('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.loadStruct("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.loadStruct(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure response has the header "Content-Type: text/xml" for XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

JSON Format

// common for all-at-once loading
[
    {id: "a", items:[
        {id: "a1", ...},
        {id: "a2", ...},
        {id: "a3", ...}
    ]},
    {id: "b", ...},
    {id: "c", ...}
]

// dyn.loading, root level
[
    {id: "a", complex: true, ...},
    {id: "b", complex: true, ...}
]
// dyn.loading, nested levels
{
    parentId: "a",                      // required, parent item id
    items: [
        {id: "a1", complex: true, ...}, // has subitems
        {id: "a2", ...}                 // single item
    ]
}

// item
{
    id:      "open"         // required, will be generated automatically if empty
    text:    "Open"         // required, item text
    img:     "open.gif"     // optional, icon for enabled item
    imgdis:  "open_dis.gif" // optional, icon for disabled item
    enabled: false          // optional, false to disable on init
    complex: true           // optional, dyn.load only, true if item has subitems
    hotkey:  "Ctrl+O"       // optional, hotkey (text in menu only)
    userdata: {             // optional, userdata, name:value pairs
        p1: "value1",
        p2: "value2"
    }
    link: {                 // optional, direct link for onclick
        target: "blank"     // optional, open in a new tab/window
        link:   "url"       // required, url to open
    }
    items: [{},{},...]      // optional, subitems if any
    // deprecated from 4.0:
    disabled:      true             // => enabled: false
    img_disabled: "open_dis.gif"    // => imgdis:  "open_dis.gif"
}

// checkbox
{
    id:      "l_num"            // required, will be generated automatically if empty
    type:    "checkbox"         // required, item type
    text:    "Line Numbering"   // required, item text
    checked: true               // optional, true to check on init
    enabled: false              // optional, false to disable on init
    hotkey:  "Ctrl+L N"         // optional, hotkey (text in menu only)
    userdata: {                 // optional, userdata, name:value pairs
        p1: "value1",
        p2: "value2"
    }
    // deprecated from 4.0:
    disabled: true              // => enabled: false
}

// radio button
{
    id:      "transparent"      // required, will be generated automatically if empty
    type:    "radio"            // required, item type
    group:   "bgcolor"          // required, radiobuttons group
    text:    "Transparent"      // required, item text
    checked: true               // optional, true to check on init
    enabled: false              // optional, false to disable on init
    hotkey:  "Ctrl+F T"         // optional, hotkey (text in menu only)
    userdata: {                 // optional, userdata, name:value pairs
        p1: "value1",
        p2: "value2"
    }
    // deprecated from 4.0:
    disabled: true              // => enabled: false
}

// separator
{
    id:   "s_id"        // required, will be generated automatically if empty
    type: "separator"   // required, item type
}

XML Format

// common
<?xml version="1.0"?>
<menu                           // required, root tag
    parentId = "id"             // required, dyn.load only, parent item id
>
    <item id="a" ...>           // items, 1st level
        <item id="a1" .../>     // subitems
        <item id="a2" .../>
        <item id="a3" .../>
    </item>
    <item id="b" .../>
    <item id="c" .../>
</menu>

// item
<item
    id      = "open"            // required, will be generated automatically if empty
    text    = "Open"            // required, item text
    img     = "open.gif"        // optional, icon for enabled item
    imgdis  = "open_dis.gif"    // optional, icon for disabled item
    enabled = "false"           // optional, false to disable on init
    complex = "true"            // optional, dyn.load only, true if item has subitems
>
    // optional, alternate item text
    <itemtext>File</itemtext>
    // optional, hotkey (text in menu only)
    <hotkey>Ctrl+O</hotkey>
    // optional, userdata
    <userdata name="p1">value1</userdata>
    <userdata name="p2">value2</userdata>
    // optional, direct link for onclick
    // target="blank" (optional) to open in a new tab/window
    <href target="blank">url</href>
</item>

// checkbox
<item
    id      = "l_num"           // required, will be generated automatically if empty
    type    = "checkbox"        // required, item type
    text    = "Line Numbering"  // required, item text
    checked = "true"            // optional, true to check on init
    enabled = "false"           // optional, false to disable on init
>
    // optional, alternate item text
    <itemtext>Line Numbering</itemtext>
    // optional, hotkey (text in menu only)
    <hotkey>Ctrl+L N</hotkey>
    // optional, userdata
    <userdata name="p1">value1</userdata>
    <userdata name="p2">value2</userdata>
</item>

// radio button
<item
    id      = "transparent"     // required, will be generated automatically if empty
    type    = "radio"           // required, item type
    group   = "bgcolor"         // required, radiobuttons group
    text    = "Transparent"     // required, item text
    checked = "true"            // optional, true to check on init
    enabled = "false"           // optional, false to disable on init
>
    // optional, alternate item text
    <itemtext>Transparent</itemtext>
    // optional, hotkey (text in menu only)
    <hotkey>Ctrl+F T</hotkey>
    // optional, userdata
    <userdata name="p1">value1</userdata>
    <userdata name="p2">value2</userdata>
</item>

// separator
<item
    id   = "s_id"       // required, will be generated automatically if empty
    type = "separator"  // required, item type
/>

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadXML DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

loadXML

loads menu data from an XML file and calls the onLoadFunction when the loading is done

void loadXML();

Deprecated

new usage

myMenu.loadStruct(xmlUrl, function (){});
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadXMLString DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

loadXMLString

loads menu data from an XML string and calls onLoadFunction when loading is done

void loadXMLString();

Deprecated

new usage

myMenu.loadStruct (xmlString, function (){});
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


removeContextZone DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

removeContextZone

removes an object from the list of context zones

void removeContextZone(string zoneId);

Parameters

zoneId string id of a context zone

Example

myMenu.removeContextZone(zoneId);

See also
  • API
    • addContextZone
  • Articles
    • Creating a Context Menu
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


removeItem DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

removeItem

removes an item with all its nested sublevels from the menu

void removeItem(string|number id);

Parameters

id string|number id of the item to remove

Example

myMenu.removeItem(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


renderAsContextMenu DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

renderAsContextMenu

renders a menu as a context one

void renderAsContextMenu();

Example

myMenu.renderAsContextMenu();

See also
  • API
    • addContextZone
    • removeContextZone
    • isContextZone
  • Articles
    • Creating a Context Menu
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


serialize DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

serialize

serializes menu structure to an XML object

object serialize();

Returns

object an XML object

Example

myMenu.serialize();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setAlign DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setAlign

sets menu's top level align

void setAlign(string align);

Parameters

align string left/right

Example

myMenu.setAlign("right");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setAutoHideMode DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setAutoHideMode

sets to false to prevent hiding a context menu by click

void setAutoHideMode(boolean mode);

Parameters

mode boolean true/false

Example

myMenu.setAutoHideMode(mode);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setAutoShowMode DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setAutoShowMode

sets to false to prevent showing a context menu by a click

void setAutoShowMode(boolean mode);

Parameters

mode boolean true/false

Example

myMenu.setAutoShowMode(mode);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCheckboxState DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setCheckboxState

sets a checkbox's state (checked/unchecked)

void setCheckboxState(string|number itemId,boolean state);

Parameters

itemId | string|number | the item's id
state | boolean | a new state (true/false)

Example

myMenu.setCheckboxState(itemId, state);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setContextMenuHideAllMode DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setContextMenuHideAllMode

if set to true, the method will hide all the opened context menu polygons on mouseout

void setContextMenuHideAllMode(boolean mode);

Parameters

mode boolean true/false

Example

myMenu.setContextMenuHideAllMode(mode);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setHotKey DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setHotKey

sets menu hot-key (just text label)

void setHotKey(string|number itemId,string hkey);

Parameters

itemId | string|number | menu item's id
hkey | string | hot-key text

Example

myMenu.setHotKey(itemId, "hkey");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setHref DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setHref

sets HREF to an item; overwrites the old one if it exists

void setHref(string|number itemId,string href,string target);

Parameters

itemId | string|number | the id of an item
href | string | url to open instead of handling the onClick event
target | string | target attribute

Example

myMenu.setHref(itemId, "www://dhtmlx.com", "blank");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconPath DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setIconPath

defines the url to the folder where the user-defined icons are located

void setIconPath();

Deprecated

new usage

myMenu.setIconsPath("path/to/icons/folder/");
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconsPath DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setIconsPath

defines the url to the folder where the user-defined icons are located

void setIconsPath(string path);

Parameters

path string the path to the folder with icons

Example

myMenu.setIconsPath("path/to/icons/folder/");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconset DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setIconset

sets the font awesome iconset

void setIconset(string name);

Parameters

name string "awesome"

Example

myMenu.setIconset("awesome");

Related samples

  • Font awesome
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setImagePath DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setImagePath

sets path to images

void setImagePath();

Deprecated

since version 2.6 the function is deprecated, as it is no longer needed

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemDisabled DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setItemDisabled

disables an item

void setItemDisabled(string|number itemId);

Parameters

itemId string|number id of the item to disable

Example

myMenu.setItemDisabled(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemEnabled DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setItemEnabled

enables an item

void setItemEnabled(string|number itemId);

Parameters

itemId string|number id of the item to enable

Example

myMenu.setItemEnabled(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemImage DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setItemImage

sets an image for an item

void setItemImage(string|number itemId,string img,string imgDis);

Parameters

itemId | string|number | the item's id
img | string | the image for the enabled item (empty string for none)
imgDis | string | the image for the disabled item (empty string for none)

Example

myMenu.setItemImage(itemId, img, imgDis);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemPosition DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setItemPosition

sets a new item's position in the current polygon (moves an item inside the single level)

void setItemPosition(string|number itemId,number pos);

Parameters

itemId | string|number | the item's id
pos | number | a new item's position

Example

myMenu.setItemPosition(id, pos);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemText DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setItemText

sets a text for an item

void setItemText(string|number itemId,string text);

Parameters

itemId | string|number | the item's id
text | string | a new text

Example

myMenu.setItemText(itemId, "text");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOpenMode DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setOpenMode

sets the opening mode for a menu

void setOpenMode(string mode);

Parameters

mode string "win"|"web"

Example

myMenu.setOpenMode("win");

Details

The default mode is "web". In the "win" mode a user should click anywhere to hide the menu, in the "web" mode - just put the mouse pointer out of the menu area.

See also
  • Articles
    • Configuring Menu
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setOverflowHeight DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setOverflowHeight

sets the maximum number of visible items in polygons

void setOverflowHeight(number itemsNum);

Parameters

itemsNum number count of the maximum number of visible items

Example

myMenu.setOverflowHeight(itemsNum);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRadioChecked DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setRadioChecked

checks a radio button inside of the group

void setRadioChecked(string group,string|number itemId);

Parameters

group | string | radio button group name
itemId | string|number | id of the radio button to check

Example

myMenu.load("xml/data.xml",function(){
    myMenu.setRadioChecked(group,itemId);
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setSkin

changes the skin of the menu

void setSkin(string skin);

Parameters

skin string the skin's name

Example

myMenu.setSkin("skin");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setTooltip DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setTooltip

sets a tooltip for a menu item

void setTooltip(string|number itemId,string tip);

Parameters

itemId | string|number | menu item's id
tip | string | the tooltip's text

Example

myMenu.setTooltip(itemId, "tip");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setTopText DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setTopText

sets a top level additional text (for a usual menubar)

void setTopText(string text);

Parameters

text string text

Example

myMenu.setTopText("text");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setUserData DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setUserData

sets user data for an item

void setUserData(string|number itemId,string name,string value);

Parameters

itemId | string|number | the item's id
name | string | the name of user data
value | string | the value of userdata (usually string)

Example

myMenu.setUserData(itemId, name, value);

Related samples

  • Change items userdata
See also
  • API
    • getUserData
  • Articles
    • Configuring Menu Items
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setVisibleArea DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setVisibleArea

sets an area where a menu can appear

void setVisibleArea(number x1,number x2,number y1,number y2);

Parameters

x1 | number | the leftmost coordinate by X-axis
x2 | number | the rightmost coordinate by X-axis
y1 | number | the topmost coordinate by Y-axis
y2 | number | the bottommost coordinate by Y-axis

Example

myMenu.setVisibleArea(x1, x2, y1, y2);

Details

If the area isn't set, the menu will occupy all the available visible space.

See also
  • Articles
    • Configuring Menu
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setWebModeTimeout DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

setWebModeTimeout

sets timeout for hiding a menu ("web" mode only)

void setWebModeTimeout(number tm);

Parameters

tm number timeout (ms); 400 default

Example

myMenu.setWebModeTimeout(tm);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showContextMenu DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

showContextMenu

a usercall to show a context menu

void showContextMenu(number x,number y);

Parameters

x | number | position of the menu by x-axis
y | number | position of the menu by y-axis

Example

myMenu.showContextMenu(x, y);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showItem DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

showItem

shows an item

void showItem(string|number itemId);

Parameters

itemId string|number id of the item to show

Example

myMenu.showItem(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • addCheckbox
  • addContextZone
  • addNewChild
  • addNewSeparator
  • addNewSibling
  • addRadioButton
  • attachEvent
  • clearAll
  • clearHref
  • clearItemImage
  • detachEvent
  • enableDynamicLoading
  • enableEffect
  • forEachItem
  • getCheckboxState
  • getCircuit
  • getContextMenuHideAllMode
  • getHotKey
  • getItemImage
  • getItemPosition
  • getItemText
  • getItemType
  • getParentId
  • getRadioChecked
  • getTooltip
  • getUserData
  • hide
  • hideContextMenu
  • hideItem
  • isContextZone
  • isItemEnabled
  • isItemHidden
  • loadFromHTML
  • loadStruct
  • loadXML
  • loadXMLString
  • removeContextZone
  • removeItem
  • renderAsContextMenu
  • serialize
  • setAlign
  • setAutoHideMode
  • setAutoShowMode
  • setCheckboxState
  • setContextMenuHideAllMode
  • setHotKey
  • setHref
  • setIconPath
  • setIconsPath
  • setIconset
  • setImagePath
  • setItemDisabled
  • setItemEnabled
  • setItemImage
  • setItemPosition
  • setItemText
  • setOpenMode
  • setOverflowHeight
  • setRadioChecked
  • setSkin
  • setTooltip
  • setTopText
  • setUserData
  • setVisibleArea
  • setWebModeTimeout
  • showContextMenu
  • showItem
  • unload
Start Menu dhtmlXMenu API Methods

unload

unloads a menu from the page (destructor)

void unload();

Example

// init menu
var myMenu = new dhtmlXMenuObject();

// some actions if any
// ...

// unloading menu
myMenu.unload();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onAfterContextMenu
    • onBeforeContextMenu
    • onCheckboxClick
    • onClick
    • onContextMenu
    • onHide
    • onRadioClick
    • onShow
    • onTouch
    • onXLE
    • onXLS
Start Menu dhtmlXMenu API

Events

onAfterContextMenu | fires after the moment when a context menu appears by the right mouse click
onBeforeContextMenu | fires before the moment when a context menu appears by the right mouse click
onCheckboxClick | fires when the user clicks any checkbox item
onClick | fires when the user clicks the left mouse button on an enabled, not complex menu item
onContextMenu | fires when the user clicks on the context menu zone with the right mouse button
onHide | fires when the user moves the mouse cursor out of the menu polygon
onRadioClick | fires when the user clicks any radio item
onShow | fires when the user hovers over any polygon opener by a mouse cursor
onTouch | fires when the user hovers over any polygon opener by a mouse cursor for the first time
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterContextMenu DHTMLX Docs

Documentation
  • onAfterContextMenu
  • onBeforeContextMenu
  • onCheckboxClick
  • onClick
  • onContextMenu
  • onHide
  • onRadioClick
  • onShow
  • onTouch
  • onXLE
  • onXLS
Start Menu dhtmlXMenu API Events

onAfterContextMenu

fires after the moment when a context menu appears by the right mouse click

void onAfterContextMenu(string|number zoneId,Event ev){ ... };

Parameters

zoneId | string|number | id of the context menu zone
ev | Event | native window event object

Example

myMenu.attachEvent("onAfterContextMenu", function(zoneId, ev){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeContextMenu DHTMLX Docs

Documentation
  • onAfterContextMenu
  • onBeforeContextMenu
  • onCheckboxClick
  • onClick
  • onContextMenu
  • onHide
  • onRadioClick
  • onShow
  • onTouch
  • onXLE
  • onXLS
Start Menu dhtmlXMenu API Events

onBeforeContextMenu

fires before the moment when a context menu appears by the right mouse click

void onBeforeContextMenu(string|number zoneId,Event ev){ ... };

Parameters

zoneId | string|number | id of the context menu zone
ev | Event | native window event object

Example

myMenu.attachEvent("onBeforeContextMenu", function(zoneId,ev){
    // your code here
    // returning "true" allows a context menu to be shown, "false" - cancels showing
    return true;
});

Details

The event is cancellable: to show a context menu you need to "return true"

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCheckboxClick DHTMLX Docs

Documentation
  • onAfterContextMenu
  • onBeforeContextMenu
  • onCheckboxClick
  • onClick
  • onContextMenu
  • onHide
  • onRadioClick
  • onShow
  • onTouch
  • onXLE
  • onXLS
Start Menu dhtmlXMenu API Events

onCheckboxClick

fires when the user clicks any checkbox item

void onCheckboxClick(string|number id,boolean state,string|number zoneId,object cas){ ... };

Parameters

id | string|number | id of the clicked checkbox item
state | boolean | current checkbox state (true for checked)
zoneId | string|number | context menu zone, if a menu rendered in the context menu mode
cas | object | state of CTRL/ALT/SHIFT keys during the click (pressed/not pressed)

Example

myMenu.attachEvent("onCheckboxClick", function(id, state, zoneId, cas){
    // your code here
    // ...

    // cas example
    if (cas.ctrl == true) {
        // open in a new tab
    } else {
        // open on the same page
    }

    // allow checkbox to be checked
    return true;
});

Details

The cas object has the following structure (true if a key was pressed during the click):

{
    ctrl:   true/false,
    alt:    true/false,
    shift:  true/false
}

The event is cancellable, to allow checkbox to be checked you need to "return true".

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClick DHTMLX Docs

Documentation
  • onAfterContextMenu
  • onBeforeContextMenu
  • onCheckboxClick
  • onClick
  • onContextMenu
  • onHide
  • onRadioClick
  • onShow
  • onTouch
  • onXLE
  • onXLS
Start Menu dhtmlXMenu API Events

onClick

fires when the user clicks the left mouse button on an enabled, not complex menu item

void onClick(id,zoneId,cas){ ... };

Parameters

id | string|number id of the clicked/hovered menu item
zoneId | string context menu zone, if a menu rendered in the context menu mode
cas | object state of CTRL/ALT/SHIFT keys during the click (pressed/not pressed)

Example

myMenu.attachEvent("onClick", function(id, zoneId, cas){
    // your code here
    // ...

    // cas example
    if (cas.ctrl == true) {
        // open in a new tab
    } else {
        // open on the same page
    }

});

Details

The cas object has the following structure (true if a key was pressed during the click):

{
    ctrl:   true/false,
    alt:    true/false,
    shift:  true/false
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onContextMenu DHTMLX Docs

Documentation
  • onAfterContextMenu
  • onBeforeContextMenu
  • onCheckboxClick
  • onClick
  • onContextMenu
  • onHide
  • onRadioClick
  • onShow
  • onTouch
  • onXLE
  • onXLS
Start Menu dhtmlXMenu API Events

onContextMenu

fires when the user clicks on the context menu zone with the right mouse button

void onContextMenu(string zoneId){ ... };

Parameters

zoneId string id of the context menu zone

Example

myMenu.attachEvent("onContextMenu", function(zoneId){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onHide DHTMLX Docs

Documentation
  • onAfterContextMenu
  • onBeforeContextMenu
  • onCheckboxClick
  • onClick
  • onContextMenu
  • onHide
  • onRadioClick
  • onShow
  • onTouch
  • onXLE
  • onXLS
Start Menu dhtmlXMenu API Events

onHide

fires when the user moves the mouse cursor out of the menu polygon

void onHide(string|number id){ ... };

Parameters

id string|number id of the polygon opener

Example

myMenu.attachEvent("onHide", function(id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRadioClick DHTMLX Docs

Documentation
  • onAfterContextMenu
  • onBeforeContextMenu
  • onCheckboxClick
  • onClick
  • onContextMenu
  • onHide
  • onRadioClick
  • onShow
  • onTouch
  • onXLE
  • onXLS
Start Menu dhtmlXMenu API Events

onRadioClick

fires when the user clicks any radio item

void onRadioClick(string group,string|number idChecked,string|number idClicked,string zoneId,object cas){ ... };

Parameters

group | string | name of the radio group
idChecked | string|number | id of the checked radio item
idClicked | string|number | id of the clicked radio item
zoneId | string | id of the context menu zone, if a menu rendered in the context menu mode
cas | object | state of CTRL/ALT/SHIFT keys during the click (pressed/not pressed)

Example

myMenu.attachEvent("onRadioClick", function(group, idChecked, idClicked, zoneId, cas){
    // your code here
    // ...

    // cas example
    if (cas.ctrl == true) {
        // open in a new tab
    } else {
        // open on the same page
    }

    // allow radio button to be checked
    return true;
});

Details

The cas object has the following structure (true if a key was pressed during the click):

{
    ctrl:   true|false,
    alt:    true|false,
    shift:  true|false
}

The event is cancellable, to allow checkbox to be checked you need to "return true".

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onShow DHTMLX Docs

Documentation
  • onAfterContextMenu
  • onBeforeContextMenu
  • onCheckboxClick
  • onClick
  • onContextMenu
  • onHide
  • onRadioClick
  • onShow
  • onTouch
  • onXLE
  • onXLS
Start Menu dhtmlXMenu API Events

onShow

fires when the user hovers over any polygon opener by a mouse cursor

void onShow(string|number id){ ... };

Parameters

id string|number id of the polygon opener

Example

myMenu.attachEvent("onShow", function(id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onTouch DHTMLX Docs

Documentation
  • onAfterContextMenu
  • onBeforeContextMenu
  • onCheckboxClick
  • onClick
  • onContextMenu
  • onHide
  • onRadioClick
  • onShow
  • onTouch
  • onXLE
  • onXLS
Start Menu dhtmlXMenu API Events

onTouch

fires when the user hovers over any polygon opener by a mouse cursor for the first time

void onTouch(id){ ... };

Parameters

id string|number id of the polygon opener

Example

myMenu.attachEvent("onTouch", function(id){
    // your code here
});

Details

This event is not applicable for a context menu.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onAfterContextMenu
  • onBeforeContextMenu
  • onCheckboxClick
  • onClick
  • onContextMenu
  • onHide
  • onRadioClick
  • onShow
  • onTouch
  • onXLE
  • onXLS
Start Menu dhtmlXMenu API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onAfterContextMenu
  • onBeforeContextMenu
  • onCheckboxClick
  • onClick
  • onContextMenu
  • onHide
  • onRadioClick
  • onShow
  • onTouch
  • onXLE
  • onXLS
Start Menu dhtmlXMenu API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


How to Start with Menu? DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
    • General
    • Usual Menu
    • Initialization Recommendation
    • Setting Icons Path
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

How to Start with Menu?

General

The first steps that need to be taken for dhtmlxMenu's initialization are the following:

  • download dhtmlxMenu package from the server and place it in a folder;
  • create an "index.html" file;
  • place a full path to JS and CSS files of dhtmlxMenu into the <head> tag of html file.

If you use dhtmlxMenu standalone you need to include 2 files:

  • dhtmlxmenu.js
  • dhtmlxmenu.css
<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" href="../codebase/dhtmlxmenu.css">
        <script src="../codebase/dhtmlxmenu.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

If you use dhtmlxMenu as a part of "dhtmlxSuite" package you need to include 2 files:

  • dhtmlx.js
  • dhtmlx.css
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

From this point further steps the user should take are different for creating a usual menu and a contextual menu. In this article we'll describe the creation of usual menu. To get info about a contextual menu, read the appropriate section.

Usual Menu

The user needs to create an object where dhtmlxMenu will be placed later. In this example the object is a <div> element on page, which is placed in the <body> tag:

<div id="menuObj"></div>

The next step is to create a new dhtmlXMenuObject and place it after the <div> element (object) that we've just created:

var myMenu = new dhtmlXMenuObject("menuObj", skin);
// or
var parentObj = document.getElementById("menuObj");
var menu = new dhtmlXMenuObject(parentObj, skin);

The first parameter defines an HTML object on page to which the menu is attached (the main menu container in the code mentioned above). The second argument is optional, and it indicates the name of the skin chosen for the Menu. If this argument is not indicated, the component will be created with the default skin ("dhx_skyblue").

It should be noted that with the way of menu creating described above, the system will first clear the menu container (<div>), and then create the menu.

Initialization Recommendation

The recommended way of menu initialization is the following:

<html>
    <head>
        <script>
            var myMenu;
             function doOnLoad() {
                myMenu = new dhtmlXMenuObject("parentId");
            }
        </script>
          ...
    </head>
    <body onload="doOnLoad();">
        <div id="parentId"></div>
        ...
    </body>
</html>

Detailed information on the initialization parameters is given in the article Object Constructor.

Setting Icons Path

In dhtmlxMenu 2.0-2.1 there was setImagePath method to set path for images needed to render menu. From 2.5 version this method hasn't been supported any more, but for the back compatibility it is presented in Menu.

If you have any links to it in your code, please remove them.

By using the setIconsPath method, the user is able to set path to the directory, where menu icons images are stored.

myMenu.setIconsPath("path/to/icons/");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
    • Specifying Initialization Options
    • Specifying Menu Items
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Object Constructor

var myMenu = new dhtmlXMenuObject(parent, skin);

where

  • parent - id of HTML element which will be used as parent (or object itself)

  • skin - name of skin, optional (string)

    The full list of initialization options is given below.

<div id='my_menu_here' style="width: 500px;"> </div>
<script>
// common init code
var myMenu = new dhtmlXMenuObject("my_menu_here");
</script>

dhtmlxLayout, dhtmlxWindow, dhtmlxAccordion and dhtmlxTabbar can create a menu inside their cells by using the following syntax:

// attach to Layout
myLayout.attachMenu();
myLayout.cells(id).attachMenu();
// attach to Window
myWins.window(id).attachMenu();
// attach to Accordion
myAcc.cells(id).attachMenu();
// attach to Tabbar
myTabbar.cells(id).attachMenu();

Menu can also be initialized by object notation

var myMenu = new dhtmlXMenuObject({
    parent:"a_menu",
    image_path:"codebase/imgs/",
    onClick:function(){
        alert("Menu item was clicked");
    }
});

Specifying Initialization Options
  • parent - (string or object), id of container, where tree will be initialized, mandatory
  • image_path - (string), path to image folder, which will be used for icons in tree
  • skin - {string} changes menu skin (setSkin())
  • iconset - {string} sets the Font Awesome icons for menu
  • align - {string} sets top level menu align (setAlign())
  • auto_hide - {boolean} sets to false to prevent hiding a contextual menu by a click (setAutoHideMode())
  • auto_show - {boolean} sets to false to prevent showing a contextual menu by a click (setAutoShowMode())
  • caption - {string} sets top level additional text (in case of usual menubar)(setTopText())
  • context - {boolean} renders menu as contextual (renderAsContextMenu())
  • dynamic - {string} enables dynamic loading of sublevels (enableDynamicLoading())
  • icon_path - {string} defines an url where necessary user embedded icons are located (setIconsPath())
  • open_mode - {string} sets open mode for the menu (setOpenMode())
  • xml - {string}, url of data xml file

Specifying Menu Items

menu items can be defined through items collection

myMenu = new dhtmlXMenuObject({
    parent:"a_menu",
    items:[
        {id:"t1", text:"Top 1", items:[
            {id:"ch1", text:"child 1"},
            {id:"ch2", text:"child 2"}
        ]}
    ]
});

Each item can have next attributes:

  • id - {string} id of menu item
  • text - {string} caption of menu item
  • img - {sting} url of image related to menu item
  • disabled - {boolean} disabled state
  • img_disabled - {sting} url which will be used for item in disabled state
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading from XML DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
    • External XML file
    • XML String
    • XML Format Template
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Loading from XML

External XML file

To load menu data from an XML file use the loadStruct() method:

var myMenu = new dhtmlXMenu();
myMenu.loadStruct("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

The first parameter of loadStruct() method is the path to the XML file, while the second parameter is an optional user-defined handler.

XML String

To load data from an XML string, use the same method - loadStruct():

var myMenu = new dhtmlXMenu();
myMenu.loadStruct('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

The first parameter for loadStruct() method is the XML string from our html file, while the second parameter is an optional user-defined handler.

XML Format Template

This section is created in order to give the user the idea of XML Format Template. It aims at helping users in creating XML files for dhtmlxMenu initialization.

Basic

<?xml version="1.0"?>
<menu> // a top xml tag, mandatory
    <item id="file" text="File"> // a top-level item, each item must have a unique ID
        <item id="new" text="New"/> // a sub-level item
        <item id="ms1" type="separator"/> // a sub-level separator item
        ...
        <item id="export" text="Export">
        <item id="export_pdf" text="PDF"/> // a sub-level item
        ...
        </item>
        ...
    </item>
</menu>

Advanced

<?xml version="1.0"?>
<menu>
    <item id="file" text="File">
        // a sub-level item with images for enabled/disabled states
        <item id="new" text="New" img="new.gif" imgdis="new_dis.gif"/>
        <item id="ms1" type="separator"/>
        ...
        <item id="export" text="Export">
            // a sub-level item disabled by default
            <item id="export_pdf" text="PDF" enabled="false"/>
            ...
        </item>
        ...
    </item>
</menu>

Full

<?xml version="1.0"?>
<menu>
    <item id="file" text="File">
        <item id="new" text="New" img="new.gif" imgdis="new_dis.gif">
            <hotkey>Ctrl+N</hotkey> // a hotkey (just a text) to a menu item
        </item>
        <item id="ms1" type="separator"/>
        <item id="udf" text="UDF">
            <userdata name="align">left</userdata> // userdata
        </item>
        ...
        <item id="export" text="Export">
            <item id="export_pdf" text="PDF" enabled="false"/>
            ...
        </item>
        ...
        <item id="eol" text="End Of Line">
            // a radiobutton, group "eol", checked by default
            <item id="eol_u" text="Unix (\n)" type="radio" group="eol" checked="true"/>
            // a radiobutton, group "eol"
            <item id="eol_w" text="DOS/Windows (\r\n)" type="radio" group="eol"/>
            // a radiobutton, group "eol"
            <item id="eol_m" text="MacOS (\r)" type="radio" group="eol"/>
            // a radiobutton, group "eol", disabled
            <item id="eol_m" text="MacOS (\r)" type="radio" group="eol"/>
            // we got a radiogroup "eol" with 4 buttons, 1 disabled
        </item>
        <item id="ms2" type="separator"/>
        // a disabled checked checkbox
        <item id="ignorecase" text="Ignore Case" type="checkbox" checked="true"
              enabled="false"/>
        // an unchecked checkbox
        <item id="checkspelling" text="Check Spelling" type="checkbox"/>
    </item>
    <item id="company" text="Company">
        <href target="blank"><![CDATA[http://dhtmlx.com/docs/company.shtml]]></href>
        // link, page will be opened in new window
    </item>
</menu>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading from HTML Object DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Loading from HTML Object

loadFromHTML() method loads content from HTML object to the menu. First, the user should create this HTML object. For example:

<body>
  <div id="menuData" style="display: none;">
     <div id="m1" text="File"> // the first top menu item
        <div id="m11" text="New"><hotkey>Ctrl+N</hotkey></div>  //the first child item
        <div id="ms1" type="separator"></div> // a separator
        <div id="m12" text="Open"><hotkey>Ctrl+O</hotkey></div> //the second child item
     </div>
  </div>
</body>

Then loadFromHTML() should be applied with the following parameters:

  • objectId - id of data container ("menuData" in our case);
  • clear - true/false, removes HTML object after data was loaded, if this parameter is set to true;
  • onLoadFunction - a user-defined handler, which will be called, when the data is loaded (optional).
myMenu.loadFromHTML("menuData", true, function(){
    alert("Menu was loaded from HTML Object.");
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading from Script DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
    • External JSON file
    • JSON String
    • JSON Format Template
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Loading from Script

Loading data from script means that the user should write a special method for adding every menu item. In our example to add a new sibling item, a child item, a new separator and set a hotkey, we should write the following:

// adding the first item to the menu, "nextToId" param is null
myMenu.addNewSibling(null, "file", "File", false);
// adding a new child item
myMenu.addNewChild("file", 0, "file_new", "New", false);
// setting a hotkey to a button
myMenu.setHotKey("file_new", "Ctrl+N");
// adding a separator
myMenu.addNewSeparator("file_new");

(Refer to the section Configuring Menu Items to learn about the methods used in the above mentioned snippet.)

Adding first menu item with script:

// init Menu
var myMenu = new dhtmlXMenuObject();

// adding first top-level item
myMenu.addNewSibling(null, "itemId", "itemText");
// or
myMenu.addNewChild(null, 0, "itemId", "itemText");

// adding first sub-level checkbox/radiobutton
myMenu.addCheckbox("child", "nextToId", 0, "itemId", "itemText");
myMenu.addRadioButton("child", "nextToId", 0, "itemId", "itemText");

External JSON file

To load menu data from a JSON file use the loadStruct() method:

var myMenu = new dhtmlXMenu();
myMenu.loadStruct("server/data.json", function(){
    // data loaded and rendered
    // your code here
});

The first parameter of the loadStruct() method is the path to the JSON file, while the second parameter is an optional user-defined handler.

JSON String

To load data from a JSON string, use the same method - loadStruct():

var myMenu = new dhtmlXMenu();
myMenu.loadStruct('{data:[{id:"a1",..},{id:"a2",..}]}', function(){
    // data loaded and rendered
    // your code here
});

The first parameter for the loadStruct() method is the JSON string, while the second parameter is an optional user-defined handler.

JSON Format Template

// common for all-at-once loading
[
    {id: "a", items:[
        {id: "a1", ...},
        {id: "a2", ...},
        {id: "a3", ...}
    ]},
    {id: "b", ...},
    {id: "c", ...}
]

// dyn.loading, root level
[
    {id: "a", complex: true, ...},
    {id: "b", complex: true, ...}
]
// dyn.loading, nested levels
{
    parentId: "a",                      // required, parent item id
    items: [
        {id: "a1", complex: true, ...}, // has subitems
        {id: "a2", ...}                 // single item
    ]
}

// item
{
    id:      "open"         // required, will be generated automatically if empty
    text:    "Open"         // required, item text
    img:     "open.gif"     // optional, icon for enabled item
    imgdis:  "open_dis.gif" // optional, icon for disabled item
    enabled: false          // optional, false to disable on init
    complex: true           // optional, dyn.load only, true if item has subitems
    hotkey:  "Ctrl+O"       // optional, hotkey (text in menu only)
    userdata: {             // optional, userdata, name:value pairs
        p1: "value1",
        p2: "value2"
    }
    link: {                 // optional, direct link for onclick
        target: "blank"     // optional, open in a new tab/window
        link:   "url"       // required, url to open
    }
    items: [{},{},...]      // optional, subitems if any
    // deprecated from 4.0:
    disabled:      true             // => enabled: false
    img_disabled: "open_dis.gif"    // => imgdis:  "open_dis.gif"
}

// checkbox
{
    id:      "l_num"            // required, will be generated automatically if empty
    type:    "checkbox"         // required, item type
    text:    "Line Numbering"   // required, item text
    checked: true               // optional, true to check on init
    enabled: false              // optional, false to disable on init
    hotkey:  "Ctrl+L N"         // optional, hotkey (text in menu only)
    userdata: {                 // optional, userdata, name:value pairs
        p1: "value1",
        p2: "value2"
    }
    // deprecated from 4.0:
    disabled: true              // => enabled: false
}

// radio button
{
    id:      "transparent"      // required, will be generated automatically if empty
    type:    "radio"            // required, item type
    group:   "bgcolor"          // required, radiobuttons group
    text:    "Transparent"      // required, item text
    checked: true               // optional, true to check on init
    enabled: false              // optional, false to disable on init
    hotkey:  "Ctrl+F T"         // optional, hotkey (text in menu only)
    userdata: {                 // optional, userdata, name:value pairs
        p1: "value1",
        p2: "value2"
    }
    // deprecated from 4.0:
    disabled: true              // => enabled: false
}

// separator
{
    id:   "s_id"        // required, will be generated automatically if empty
    type: "separator"   // required, item type
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Dynamic Loading (with Ajax) DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Dynamic Loading (with Ajax)

Dynamic loading means loading data on request. The user can split data into parts by levels and decrease loading time this way.

The enableDynamicLoading() method should be used with the following parameters:

  • url - server-side script, transmitted parameters are action (set to "loadMenu") and "parentId" (will pass id of the selected complex item for loading its child items into sub-level polygon);
  • icon - true|false, replaces item's arrow icon while loading data with a "loading" icon to indicate the process of data loading.
myMenu.enableDynamicLoading(url, icon);

So, in our case we should write this line of code (without an icon):

myMenu.enableDynamicLoading("[script url]");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring Menu DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
    • Clearing Menu
    • Unloading Menu
    • Setting Menu Open Mode
    • Setting Visible Area
    • Hiding Open Menu
    • Setting Overflow Height
    • Setting Aligning Direction
    • Setting Top Text
    • Adding/Clearing Links
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Configuring Menu

Clearing Menu

To remove all loaded items from menu, users should call clearAll method. Meanwhile, users are allowed to load another XML:

myMenu.clearAll();

Unloading Menu

The unload method gives the possibility to unload the component completely:

var myMenu = new dhtmlXMenuObject();
...
// unload menu
myMenu.unload();
myMenu = null;

Setting Menu Open Mode

The user can choose the mode to set for the top-level items of the new menu object. There are two modes available:

  • win - In this mode the user should click any complex item in the top-level polygon to expand it. The item will be expanded until the user clicks any top-level open item in the menu, or any other place on the page;
  • web (the default one) - In this mode items in the top-level polygon are expanded immediately, when the user hovers the mouse over any of them. When the mouse is moved outside the menu area, the open item collapses.

The setOpenMode method is used to set the menu mode:

myMenu.setOpenMode("win");

Setting the "web" mode from the script is not required because it's already set by default.

When the Menu is set to the web mode, there is an opportunity to set the period of time, during which the menu will be held expanded, even if the user moves the mouse outside the menu area. By default this time is set to 400 msec.

To set this time period, the user should use the setWebModeTimeout method:

myMenu.setWebModeTimeout(time);

Setting Visible Area

The setVisibleArea method sets the rectangle area in which sub-level polygon items will be able to appear. If this area is not set, sub-level polygon items can occupy any available visible space.

The parameters are:

  • x1 - (number) the leftmost coordinate by X-axis
  • x2 - (number) the rightmost coordinate by X-axis
  • y1 - (number) the topmost coordinate by Y-axis
  • y2 - (number) the bottommost coordinate by Y-axis
myMenu.setVisibleArea(x1,x2,y1,y2);

Usage example

When using dhtmlxGrid with a Context menu, you often meet some inconveniences. For example, you need to read the context menu of the record placed at the bottom of the grid, but appearing scrollbars of the browser will impede the implementation of this task.

To avoid displaying of the horizontal scroll, set the visible area and define the menu's position (set grid's coordinates to achieve this).

In dhtmlxMenu the visible area is automatically calculated and occupies just the visible area of the browser. If a menu opens to the bottom, but there isn't enough space to open menu at the bottom, it will automatically opens on top (even if the scroll allows opening the menu top bottom).

Hiding Open Menu

There is the possibility to hide all open polygons in a menu from script with the help of hide method:

myMenu.hide();

Setting Overflow Height

By default there is no limits on the number of visible menu items in any sub-level polygon. However, the user can limit the number of visible items in a sub-level polygon using setOverflowHeight method.

This method adds scroll-arrows to a sub-level polygon, if there are more visible menu items than it is allowed by the setOverflowHeight method. The following example shows how this method should be used as a function with any of the data loading methods:

myMenu.setOverflowHeight(4);
myMenu.loadStruct("dhtmlxMenu/codebase/dhtmlxmenu.xml");

Setting Aligning Direction

The user is allowed to set left or right aligning direction in menu with the help of setAlign method as follows:

myMenu.setAlign("right");

Setting Top Text

There is a possibility to place text at the top of the menu using the setTopText method:

myMenu.setTopText("dhtmlxMenu 4.0");

Adding/Clearing Links

The setHref method allows users to add a link to the menu bar. In order to clear current links, users should call the clearHref method:

myMenu.setHref(itemId, href, target);
myMenu.clearHref(itemId);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring Menu Items DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
    • Creating Sibling Item
    • Creating Child Item
    • Removing Item
    • Creating New Separator
    • Getting Parent Id
    • Enabling/Disabling Item
    • Showing/Hiding Item
    • Setting Item's Text
    • Setting Item's Position
    • Setting User Data
    • Setting Item's Image
    • Setting Item's Tooltip
    • Setting Item's Hotkey
    • Creating Checkbox
    • Creating Radio Button
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Configuring Menu Items

Creating Sibling Item

The user can create a new sibling item in any polygon. To do this, the addNewSibling method should be used. The parameters here are as follows:

  • nextToId - id of the element after which the new item will be inserted.
  • itemId - id of the new sibling item;
  • itemText - the label of the new sibling item;
  • disabled - true/false, if this new sibling item is disabled or enabled;
  • img - path to image for the enabled state of the new sibling item;
  • imgDis - path to image for the disabled state of the new sibling item.

The new sibling item will be inserted right after the item chosen as "nextToId" one.

myMenu.addNewSibling(nextToId, ItemId, itemText, disabled, img,imgDis);

Creating Child Item

There is the possibility to create a child item for any item in the menu. The child item will be located in a sub-level polygon and won't be visible until its parent item is hovered over. The addNewChild method should be called and the following parameters are to be passed:

  • parentId - id of the element that will contain the newly created item in its sub-level polygon;
  • position - position/order of the new child item in the polygon among other child items, whether it comes first, second, etc. (starts with 0);
  • itemId - id of the new child item;
  • itemText - the label of the new child item;
  • disabled - true/false, whether this new child item is disabled or not;
  • img - path to image for the enabled state of the new child item;
  • imgDis - path to image for the disabled state of the new child item.
myMenu.addNewChild(parentId, position, itemId, itemText, disabled, img, imgDis);

Removing Item

The user can choose to remove any item from a menu. The item will be removed with all its sub-items/sub-polygons. An item can be removed in the following way:

myMenu.removeItem(Id);

Related sample: Add / remove items

Creating New Separator

Separators can be created with the help of addNewSeparator method. A separator provides kind of a logical grouping of menu items. The addNewSeparator method has the following parameters:

  • nextToId - id of the element after which the new separator will be inserted;
  • itemId - id of the new separator.
myMenu.addNewSeparator(nextToId, itemId);

Getting Parent Id

There is the possibility to get parent id of any menu item. This can be done by passing the item's id to the getParentId method:

var parentId = myMenu.getParentId(id);

Enabling/Disabling Item

Any menu item can be enabled/disabled by user:

myMenu.setItemEnabled(id);
myMenu.setItemDisabled(id);

Also the user has the possibility to check whether an item is enabled. This can be done by calling the following method:

var isEnabled = myMenu.isItemEnabled(id); // returns true|false

The user should pass id of the item that will be checked. The method returns true if the item is enabled.

Related sample: Enable / disable items

Showing/Hiding Item

Any item in a menu can be shown/hidden. To do this, the user should pass this item's id to the following methods:

myMenu.showItem(id);
myMenu.hideItem(id);

The user has the possibility to check whether an item is hidden, by passing the item's id to the isItemHidden method. The method returns true, if the item is hidden:

var isHidden = myMenu.isItemHidden(id);

Related sample: Show / hide items

Setting Item's Text

The user can set text for any menu item. This item's id and text are passed as parameters to the following method:

myMenu.setItemText(id, text);

The user can get item's text using getItemText method. The method returns the current text of the item:

var text = myMenu.getItemText(id); // returns item's text

Related sample: Change items text

Setting Item's Position

Item's position in the polygon can be set by applying the method setItemPosition and passing item's id and item's position number (starting with 0) as parameters:

myMenu.setItemPosition(id,pos);

There is the possibility to get items' position. The method returns item's position number:

var pos = myMenu.getItemPosition(id); // returns item's position

Related sample: Change items position

Setting User Data

The user has the possibility to set, store, and pass values set for a certain menu item. One menu item can have several different user data stored in it. User data can be set to any menu item. The user just needs to pass this item's id, name of the data and its value to the setUserData method:

myMenu.setUserData(id, name, value);

An easy way to get user data is to use getUserData method by passing the item's id and data name to it:

var value = myMenu.getUserData(id, name);

Related sample: Change items userdata

Setting Item's Image

Any item in a menu can have its own image displayed in the left part of item display area. The setItemImage method allows the user to set image to an item by passing the following parameters:

  • id - id of the item to which the image will be set;
  • img - path to the image for the enabled state of the item;
  • imgDis - path to the image for the disabled state of the item.
myMenu.setItemImage(id,img,imgDis);

The getItemImage method gets current item images for enabled and disabled states and returns array(img, imgDis) that will contain URLs to images:

var imgs = myMenu.getItemImage(id); // returns array

Item's image can be easily removed/cleared by using the clearItemImage method to which the user should pass item's id:

myMenu.clearItemImage(id);

Related sample: Change items images

Setting Item's Tooltip

The user can specify the supplementary information regarding the item - tooltip. The setTooltip method takes the following parameters:

  • id - item id;
  • tip - this parameter sets the text that appears when user hovers the mouse over the item.
myMenu.setTooltip(id,tip);

The following method can return current item's tooltip text:

var tip = myMenu.getTooltip(id);

Setting Item's Hotkey

Hotkey is a shortcut to a menu option. In our menu it's just a label (text) written in the item display area.

A hotkey can be set to any menu item by calling setHotKey method and passing item's id and setting the hotkey label:

myMenu.setHotKey(id, hkey);

The getHotKey method returns current item's hotkey text:

var hkey = myMenu.getHotKey(id); // returns hotkey text

Creating Checkbox

An item of this type has a small, square box (in the left part of item display area) in addition to item's title. Any other icons can't be added to this type of items.

This item can be created by calling addCheckbox method that takes the following parameters:

  • mode - sibling/child, determines whether the checkbox is a sibling or a child;
  • nextoId - id of the element,after which the new checkbox will be inserted as a sibling (parentId for a child);
  • pos - item's position in the child mode (null for sibling);
  • itemId - id of the new checkbox;
  • itemText - the text of the new checkbox;
  • state - true/false, true and false mean "checked" and "unchecked" respectively;
  • disabled - true/false, true and false mean "disabled" and "enabled" respectively.
myMenu.addCheckbox(mode, nextToId, pos, itemId, itemText, state, disabled);

New state (checked/unchecked) of the checkbox can be set by the following method:

myMenu.setCheckboxState(id,state);

A simple way to get the current state of a checkbox is presented below:

var state = menu.getCheckboxState(id); // returns true|false

Creating Radio Button

Item of this type has a small selectable circle (in the left part of item display area) in addition to item's title. Any other icons can't be added to this type of items.

This item can be created by calling the addRadioButton method that takes the following parameters:

  • mode - sibling|child, determines whether the radio button is a sibling or a child;
  • nextToId - id of the element, after which the new radio button will be inserted as a sibling (parentId for a child);
  • pos - item's position in the child mode (null for sibling);
  • itemId - id of the new radio button;
  • itemText - the text of the new radio button;
  • group - name of the radio group;
  • state - true/false, true and false mean "checked" and "unchecked" respectively;
  • disabled - true/false, true and false mean "disabled" and "enabled" respectively.
myMenu.addRadioButton(mode, nextToId, pos, itemId, itemText, group, state, disabled);

Any unchecked radio button can be made checked while currently checked radio button automatically changes its state to unchecked:

myMenu.setRadioChecked(id,state);

An easy way to get id of the current checked radio button in a radio group is presented below:

var idChecked = myMenu.getRadioChecked(group);

Related sample: Checkboxes and radio buttons

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Skinning Menu DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Skinning Menu

There are two ways to set skin:

  • By passing skin name to constructor (the second argument);

  • By using the setSkin() method.

To set skin with constructor you should call dhtmlXMenuObject with the second argument, which contains skin name:

var myMenu = new dhtmlXMenuObject("parentId", "dhx_skyblue");

If you've just initiated a context menu and have no parent object yet, you can pass null as the first argument:

var myMenu = new dhtmlXMenuObject(null, "dhx_skyblue");
myMenu.renderAsContextMenu();

Also you can easily change skin "on-the-fly" using setSkin method:

var myMenu = new dhtmlXMenuObject("parentId");
myMenu.setSkin("dhx_skyblue");

Available skins are:

material (the default one)
dhx_skyblue
dhx_web
dhx_terrace

Related sample: Skins

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Font Awesome Icons in Menu DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Font Awesome Icons in Menu

You can use Font Awesome icons in dhtmlxMenu.

This possibility can be enabled in two ways:

1) during menu initialization

myMenu = new dhtmlXMenuObject({
    iconset: "awesome"
});

2) after menu initialization, using the setIconset method:

myMenu.setIconset("awesome");

Related sample: Font awesome

Follow the Font Awesome homepage to learn more about icons.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Creating a Context Menu DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
    • Initialization
    • Contextual Menu Zones
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Creating a Context Menu

Initialization

Contextual menu is attached to the context zone. Context zone is an HTML object. In this example the object is a <div> element on page, which is placed in the <body> tag.

<div id="contextArea"></div>

Note, that for the right menu positioning the <div> used as a context zone should have relative or absolute position.

For a contextual menu the user should:

  • Create a new dhtmlxMenuObject attached to "contextArea" (or attach it later);
  • Set the name of the necessary skin as the second argument for dhtmlXMenuObject (optional; if the name of the skin is not indicated, the default one will be used);
  • Use the renderAsContextMenu method.
var myMenu = new dhtmlXMenuObject("contextArea");
myMenu.renderAsContextMenu();

It should be noted that with the way of menu creating described above, the system will first clear the menu container (<div> ) and then create the contextual menu. To prevent container data from clearing, the user should use the method described in Contextual Menu Zones section below.

Contextual Menu Zones

A contextual menu zone is the area the user needs to click to make a contextual menu to appear. The previous snippet has shown initialization of a contextual menu with the predefined contextual zone. When the user indicates the contextual zone id, while creating a new menu object, it means that this area is set to be a contextual menu zone automatically by script.

In a different way, the user can initialize a contextual menu without indicating a contextual zone initially. Then to use the addContextZone method and pass to it the id of the object that will act as a contextual zone:

var myMenu = new dhtmlXMenuObject();
myMenu.renderAsContextMenu();
myMenu.addContextZone(contextZoneId);

A contextual zone can be easily removed with the help of the removeContextZone method:

myMenu.removeContextZone(contextZoneId);

There is also the possibility to check whether an object is a contextual menu zone, using the isContextZone method:

var isZone = myMenu.isContextZone(objectId);  // returns true/false

Note, that for the right menu positioning the object used as a context zone should have relative or absolute position.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Used Terms DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Used Terms

The following terms are connected with dhtmlxMenu component:

  • Menu item - a single item in a menu;
  • Complex menu item - an item in a menu that has sub-items in it;
  • Polygon - area where items are located;
  • Top-level polygon - its items are always visible on startup. It should be noted that contextual menu doesn't have top-level polygon;
  • Sub-level polygon - its items become visible when the user hovers over any complex item that has at least one visible (not hidden) sub-item in it;
  • Sibling items - items that are located in one polygon. Siblings are child items of some parent item;
  • Child items - items that are located in one sub-level polygon. Child items of one parent item are siblings to each other;
  • Separator - the horizontal/vertical line separating groups of menu items from each other;
  • Checkbox - a menu item that has a small square box (in the left part of item display area), which displays a “v” when it is clicked on by a mouse. They are provided to allow users to choose one or more options, as more than one check box can be clicked;
  • Radio button - a menu item that has a small selectable circle (in the left part of item display area), which displays a “●” when it is clicked on by a mouse. Radio Buttons are grouped so that only one can be chosen at a time.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
    • Attaching Event Handler
    • Detaching Event Handler
    • List of supported events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Handling Events

Attaching Event Handler

The user can add any user-defined handler to available events. To do this, he can use attachEvent() method with the following parameters:

  • evName - name of the event;
  • evHandler - user-defined event handler.
myMenu.attachEvent(evName, evHandler);

Several handlers can be attached to one and the same event, and all of them will be executed.

The names of the events are case-insensitive.

Detaching Event Handler

There is a simple way of removing an event-handler:

myMenu.detachEvent(id); // unique id of the event handler

List of supported events

You can find the full list of menu events in the Menu API.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Using Iterator DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Using Iterator

The forEachItem() method calls a user-defined function for every existing item in the menu passing item's id into it. Using iterator can be very useful in case the user wants all the items to be subjects for the same changes. For example, you can use the methods setItemEnabled() and setItemDisabled() to enable/disable menu items.

myMenu.forEachItem(function(itemId){ // calling iterator
    myMenu.setItemDisabled(itemId);  // your code here, for example, setItemDisabled()
});

//or
function doItemAction(itemId) {      // your code here, for example, setItemDisabled()
    myMenu.setItemDisabled(itemId);
}
myMenu.forEachItem(doItemAction);    // calling iterator

Related sample: Iterator

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration from 3.6 to 4.0 DHTMLX Docs

Documentation
  • dhtmlXMenu API
  • How to Start with Menu?
  • Object Constructor
  • Loading from XML
  • Loading from HTML Object
  • Loading from Script
  • Dynamic Loading (with Ajax)
  • Configuring Menu
  • Configuring Menu Items
  • Skinning Menu
  • Font Awesome Icons in Menu
  • Creating a Context Menu
  • Used Terms
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Menu

Migration from 3.6 to 4.0

1) In the new version of DHTMLX Library the names of some methods were changed. We've made these changes as the previous names of the methods under question didn't reflect their functionality precisely, which could cause ambiguity or misunderstanding.

2) Since the release of the latest version of DHTMLX library some functionality has been removed. It was made as this functionality is no longer needed and therefore isn't supported.

Up to version 3.6 | From version 4.0
Function names changed
myMenu.loadXML(xmlFile, onLoad) | myMenu.loadStruct(xmlFile, onLoad)
myMenu.loadXMLString(xmlString, onLoad) | myMenu.loadStruct(xmlString, onLoad)
Functionality was removed
myMenu.setIconPath(path) | myMenu.setIconsPath(path)
myMenu.setImagePath() | myMenu.setIconsPath(path)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DHTMLX Optimus Framework DHTMLX Docs

Documentation
  • DHTMLX Optimus Framework
    • General Idea
    • How to Start
    • Application
    • Working with Views
    • Special Types of Views
    • Loading/Saving Data
    • Localization
    • Services
    • Other Helpers
    • Deploying an Application
    • Related Materials
Start

DHTMLX Optimus Framework

DHTMLX Optimus is a micro framework for building DHTMLX-based apps.

The framework enforces consistent application structure by breaking a monolithic application into a set of reusable classes. As a result, each part of an app can be developed and tested independently and used in various combinations.

DHTMLX Optimus is a fully client-side solution. There aren't any special requirements to the server. You can use any data REST backend (PHP, Nodejs, .Net, Java, etc.)

General Idea

DHTMLX Optimus is based on the modern approaches of web development:

  • ES6 classes
  • JavaScript modules
  • Webpack module bundler

The framework uses BabelJS for code processing, so the resulting app will work even in older browsers, supported by DHTMLX (IE8+)

Each module describes a part of UI (a single view). You can use normal DHTMLX code inside of the module to initialize a single component. Top level modules can combine multiple views into a layout and so on. The app itself can be used as a view in some other application.

The framework provides a common event bus to allow communication between views and some other helpers for common DHTMLX tasks.

How to Start

Grab the starter package from github. After unzipping the package install dependencies and run local dev server by using:

npm install
npm run server

If everything works fine, you will see a simple app built with Optimus framework:

Other useful commands

// add watcher which will rebuild JS and CSS files on code changes
npm run watch

// rebuild JS file in the "codebase" folder
npm run codebase

// lint the sources
npm run lint

// build the production package
npm run package

"package.json" file notes

Pay attention to the "package.json" file in the root of your app's project. The main fields is important, it is the primary entry point to your program. This should be the name of the app's module.

Application

Structure of an Application

  • index.html file - the start page of the application
  • sources/app.js file - contains the application's configuration
  • sources/views folder - includes files with interfaces' descriptions
  • sources/less folder - contains the app's styles
  • codebase/ folder - includes static files used in the application (images, icons, styles, data files, etc.). The content of this folder is added by the build.

DHTMLX files

By default, index.html includes a free version of DHTMLX from our CDN. If you are using DHTMLX PRO, place the DHTMLX files into the "codebase" folder and adjust links in the index.html.

CDN

<link href="//cdn.dhtmlx.com/site/dhtmlx.css" rel="stylesheet"></link>
<script src="//cdn.dhtmlx.com/site/dhtmlx.js"></script>

Local

<link href="codebase/dhtmlx.css" rel="stylesheet"></link>
<script src="codebase/dhtmlx.js"></script>

Application Initialization

The code is straightforward, just call the app constructor and use the render() function to render the app:

<script type="text/javascript">
    var app = new MyApp({});  // takes app's config as a parameter
    app.render();             // renders the app
</script>

App's Configuration

The app's configuration file is called app.js. It contains the main class of the application:

app.js

import "less/MyApp.less";
import {DHXApp} from "dhx-optimus";

import {MainLayout} from "views/mainlayout.js";

class MyApp extends DHXApp{
    render(){
        this.show(MainLayout);
    }
}

window.MyApp = MyApp; // here we add our app into the global window object

There are 3 mandatory principles here:

  • class which extends DHXApp must be defined
  • class must have the render() method which defines the initial view to show
  • class must be registered in the global scope, to be accessible on an HTML page

In the above example we have included the following dependencies:

  • The file that contains app's styles (MyApp.less in our example)
  • The DHXApp class from the "dhx-optimus" library
  • The view with the main layout of the application (views/mainlayout.js in our example)

Application API

DHXApp class provides the next API for the application class:

  • show(view, cell) - shows the specified view in a cell of the app
    • view - (object) the view to show
    • cell - (object) a reference to the cell to render the view inside
  • imagepath(component) - sets the path to the folder with images of the particular component
    • component - (string) the name of the component to set image path to
  • attachEvent(name, handler) - registers event handler
    • name - (string) name of the event
    • handler - (function) user-defined event handler
  • callEvent(name, params) - calls an event
    • name - (string) the event name
    • params - (array) an array of the event related data
  • addService(name, object) - adds a service for the app (read more in the Services section)
    • name - (string) - the service's name
    • object - (object) - the service's config
  • getService(name) - returns a service added to the app by its name (read more in the Services section)
    • name - (string) - the service's name
      • returns the service's object
  • destroy() - destroys the application

Working with Views

Defining Views

The view's configuration is similar to that of an application. A new view class is inherited from the DHXView class. The render() method is used to draw a view.

import { DHXView } from "dhx-optimus";
export class GridView extends DHXView {
    render() {
        this.ui = this.root.attachGrid();
        this.ui.setInitWidths("*,200,80,80");
        this.ui.init();
    }
}
  • this.ui - a reference to the created DHTMLX component. It's recommended to use in order to ensure the view's destruction after closing
  • this.root - a reference to the parent cell

In the above example we have set a view with a grid inside and specified some config properties for it. You can create any number of views by this means and use all of them in your application.

We recommend to have a single view per file and name file the same as the view, e.g. GridView => views/grid.js.

Layout View

You can initialize layouts in the same way:

import { DHXView } from "dhx-optimus";
import { TreeView } from "./tree.js";
import { GridView } from "./grid.js";

export class MyView extends DHXView {
    render() {
        this.ui = this.root.attachLayout({ pattern:"2U"});
        this.show(TreeView, this.ui.cells("a"));
        this.show(GridView, this.ui.cells("b"));
    }
}

As you can see, we can use the show() API to render some other view inside of a layout's cell.

By combining those types of views, you can create a static UI of any complexity. When necessary, you can add dynamics - change a part of UI with a different one:

import { DHXView } from "dhx-optimus";
import { TreeView } from "./tree.js";
import { GridView } from "./grid.js";

export class MyView extends DHXView {
    render() {
        this.ui = this.root.attachLayout({ pattern:"2U"});
        this.addSlot("left",  this.ui.cells("a"));
        this.addSlot("right", this.ui.cells("b"));

        var grid = this.show(MasterGridView, "left");
        grid.ui.attachEvent("onRowSelect", (id) => {
            if (id == -1)
                this.show(DashBoardView, "right");
            else
                this.show(DetailsView, "right");
        })
    }
}

The above code shows different views in the cell "b", based on the selected row in the grid. You can see that the code uses addSlot() API to set a name for the cell with dynamic content.

Connecting Views

In the above snippet we have used grid.ui.attachEvent() to register an event handler for the element in the child view. This is a bad practice, since we get a tightly coupled resulting code which can be easily broken.

There is a better approach - the usage of the global event bus. After attaching an event in one view, you can call it in another one.

Let's consider an example. We have a dataview called "Countries" in the countries.js file and a grid named "Cities" in cities.js. We want the grid to display cities related to the country selected in the dataview.

In such a case we can define a dataview in the following way:

import { DHXView } from "dhx-optimus";

export class CountriesView extends DHXView {
    render() {
        this.ui = this.root.attachDataView({
            type: {
                template: tpl
            }
        });

        this.ui.attachEvent("onItemClick",  id => this._countrySelect(id));
    },
    _countrySelect(id){
        const country = this.ui.get(id);
        this.callEvent("onCountrySelect",[{
            cities:country.cities
        }]);
    }

Here on selecting some item, the code calls the onCountrySelect event, which can be caught in any other view.

import { DHXView } from "dhx-optimus";

export class CitiesView extends DHXView {
    render() {
        this.ui = this.root.attachGrid();
        this.ui.setHeader("Name,Population");
        this.ui.init();
        this.attachEvent("onCountrySelect", e =>this._setCities(e.cities));
    }
    _setCities(cities){
        this.ui.clearAll();
        this.ui.parse(cities);
    }
}

When a country is selected in the dataview, the _setCities() method is called and data in the grid is refreshed. So the two views are now connected.

Event handlers will be automatically detached on view destruction.

Destroying Views

Using slots

DHTMLX Optimus automatically destroys a view, when a different view is shown in the same slot.

addSlot() allows adding a slot (named area) into a cell. The content of the slot can be changed/removed without affecting the rest of the cell's area.

For example, we have a layout with 2 cells. We want to dynamically change the content of the cell "a". Firstly, we use the addSlot() method to add a slot named "details" into the cell "a".

// adding a slot called "details" into the cell "a"
this.addSlot("details", top.cells("a"));

Then, the show() method is used to render desired views in the added slot. It takes the name of the view that will be displayed in the slot and the name of the slot as parameters.

// rendering a grid view in the "details" slot
this.show(GridView,"details");

Then you can show a different view in the slot and it will be rendered instead of the previous one:

// rendering a data grid view in the "details" slot
this.show(DataGridView,"details");

While the slot content is re-rendered, the GridView view in the "details" slot is destroyed and replaced with DataGridView, while the rest content of the cell "a" will remain the same.

Destroy() API

If you will ever need a custom destruction code, just redefine the destroy() method of the view to have a custom on destroy logic:

export class MyView extends DHXView {
    render() {
        this.window = new dhtmlXWindows();
        ...
    }
    destroy(){
        /*any custom code here*/
        this.window.unload();
        super.destroy();
    }
}

Main UI Destruction

The main UI, the reference to which is stored in this.ui will be destroyed automatically, you don't need to use a custom code to clear it.

View API

As it was mentioned above, views are created on the base of the DHXView class. This class possesses public API methods listed below:

  • show(view, cell) - shows the specified view in a cell
    • view - (object) the view to show
    • cell - (object) a reference to the cell to render the view inside
  • addSlot(name, obj) - adds a slot (named area) into a cell. Useful for creating cells with dynamic content
    • name (string) - the name of the slot
    • object (object) - a reference to the cell to add a slot inside
  • refresh() - refreshes the view
  • attachEvent(name, handler) - adds a user-defined handler to an event
    • name - (string) name of the event
    • handler - (function) user-defined event handler
  • callEvent(name, params) - calls an event
    • name - (string) the event name
    • params - (array) an array of the event related data
  • addService(name, obj) - add a service for a view (read more in the Services section)
  • getService() - returns a service added to the view by its name (read more in the Services section)
  • render() - renders a view on the page
  • imagepath(component) - sets the path to the folder with images of the particular component
    • component - (string) the name of the component to set image path to
  • destroy() - destroys a view

Special Types of Views

Working with Windows

A Window view should be attached to the layout, in other aspects it is the same as other views:

export class MyDialog extends DHXView{
    render(){
        this.ui = this.root.dhxWins.createWindow({
            // window config
        });
        this.ui.attachEvent("onClose", () => {
            //destroy view on window closing
            this.destroy();
        })
    }
}

Such a view can be used inside of another view as follows:

export class MyView extends DHXView{
    render(){
        this.ui = this.root.attachToolbar();

        this.ui.attachEvent("onClick", (id) => {
            ...
            if(id == "add_connection"){
                this.show(MyDialog, this.root);
            }
        });
    }
}

Handlebar Templates

In many cases some complex HTML code should be rendered in a view. It's not convenient to do it with the help of the JavaScript code. In the case of DHTMLX Optimus, you can use Handlebar templates for such a task.

For example, let's have a look at the file called templates/about.html that contains the description of a file explorer application:

<div id="intro_text" class="intro">
    <div style="margin: 30px;">
        <h1>dhtmlxFileExplorer Demo Application</h1>
        <p>The purpose of this demo is to illustrate the possibility of building
        Windows File Explorer-like application using DHTMLX library.
        The following components were used:</p>
        <ul>
            <li></li>
            <li>Key</li>
        </ul>
        ...
    </div>
</div>

To show this template in an app, we will use the view like this:

import { DHXView } from "dhx-optimus";
import about from "templates/about.html";

export class AboutView extends DHXView {
    render() {
        this.ui = this.root.attachHTMLString(about({
            key:"value",
            anotherKey:"anotherValue"
        }));
    }
}

The above code imports an HTML template and attaches it to the root cell. During rendering the code sends a hash of parameters which will be placed inside of the template.

Loading/Saving Data

You can use normal DHTMLX API to load data into any component.

We recommend to store Toolbar, Form and Menu configuration as a part of the view file, and load external data only for data components such as Grid, Tree, TreeGrid, DataView and Chart.

<p class='snippet'> "countries.js"</p>
import { DHXView } from "dhx-optimus";

export class CountriesView extends DHXView {
    render() {
        this.ui = this.root.attachDataView({
            //data loading
            url:"data.php"
        });

        //data saving
        var dp = new dataProcessor("save.php");
        dp.setTransactionMode("REST");
        dp.init(this.ui);
    }
}

Working with Back-end (PHP, Node, etc.)

When you are using an app in the Developer mode (npm run server), it will use its own server, so all calls to PHP or any other backend scripts need to be routed. This is controlled by two parameters:

  • In webpack.config.js:
  devServer:{
    proxy: {
      '/server/*': pkg.localURL
    }
  },

Instructs all calls to the "server" folder to be routed to some other server.

  • And in package.json:
"localURL": "http://127.0.0.1/dhtmlx/demos/optimus-start/",

localURL defines the full web URL of the backend server.

Localization

DHTMLX Optimus allows creating multi-language applications. Localization is implemented on the base of the Polyglot.js library.

To enable localization for the app's interface, you need to import Polyglot into the main file of your application (sources/app.js). After that create an instance of the Polyglot class which you will use for translation:

npm install --save node-polyglot
import {DHXApp, DHXLocale} from "dhx-optimus";
import Polyglot from "node-polyglot";
import en from "locale/en.js";
import de from "locale/de.js";

class MyApp extends DHXApp{
    render(){
        this.locale = new DHXLocale(Polyglot, { en, de });
    }
}

Later in any view you can use this.app.locale to access text translations.

Storing Locales

Locales are stored in separate JS files in the locales folder.

Inside of the locale's file a common JS object stores a collection of the key:value pairs corresponding to the text strings and their translations. For example:

// sources/locales/fr.js
export default const fr = {
    // dataview
    "Name" : "Nom",
    "User" : "Utilisateur",
    "Description" : "Description",
}

It will set the necessary language and take translation phrases from helpers/langs.js.

// views/grid.js
export class GridView extends DHXView{
    render(){
        const _ = this.app.locale.helper();

        this.ui = this.root.attachGrid();
        this.ui.setHeader([
            _("Flag"), _("ID"), _("Status"), _("Subject"), _("Manager")
        ]);
        this.ui.init();
    }
}

The English locale is set by default, you can change the default language in the main view using the setLang() method:

class TicketApp extends DHXApp{
    render(){
        this.locale = new DHXLocale(Polyglot, { en, de });
        this.ui = this.show(TopView);

        this.attachEvent("onLangChange", lang => {
            this.setLang(lang);
            this.ui.refresh();
        });
    }
}

Services

DHTMLX Optimus provides an easy way to use Dependency Injection container. The app and all views have addService() and getService() API which can be used to define some shared module. It can be used to share the state of components without directly exposing them.

For example, you can have a TreeView:

class TreeView extends DHXView {
    render(){
        var sId = null;

        this.ui = this.root.attachTree();
        this.ui.attachEvent("onClick", (id) => sId = id }); // store selected item

        this.addService("DocumentTree", {
            selected:() => sId
        })
    }
}

Now it's possible to get the id of the selected item from any other view like this:

var id = this.getService("DocumentTree").selected();

If a view which has registered some module is destroyed, all registered services are deleted as well.

Other Helpers

Image Path Helper

For some components it's necessary to specify the path to the folder with images. In order not to set the full path each time, the framework provides a useful helper.

You can apply the helper inside of the regular setImagePath() method of the main UI, like this: this.app.imagepath("componentName").

For example, to set path to the images' folder of the Tree component, use the code as in:

this.ui.setImagePath(this.imagepath("tree"));

Deploying an Application

To deploy your app to the live server, use the following NPM command:

npm run build

It will create a "dist" folder with all necessary files. Just push those files on the production server.

After that you can call npm run deploy to synchronize the dist folder to the target server (path to the target server is configured inside of gulpfile.js).

Using App as a View inside of Other Apps

With DHTMLX Optimus, you can combine several applications and make them work as modules of one large application. The API is the same as for working with views, just use the this.show command.

import {DHXView} from "dhx-optimus";

import {App1} from "app1.js";
import {App2} from "app2.js";

export class TopView extends DHXView{
    render(){
        let top = this.ui = this.root.attachLayout("2U");

        let app1 = this.show(new App1(config),top.cells("a"));
        let app2 = this.show(new App2(config),top.cells("b"));
    }
}

You can use different applications or create multiple instances of a single app.

Related Materials
  • DHTMLX Optimus on Github
  • Starter package to begin creating an application
  • Demo applications
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Popup DHTMLX Docs

Documentation
  • Popup
    • dhtmlXPopup API
    • Initializing Popup on a Page
    • Attaching Content to Popup
    • Skinning Popup
    • Managing Popup's Visibility
Start

Popup

dhtmlxPopup presents a pop-up window that can have any content. It can be attached to dhtmlxForm, dhtmlxToolbar or used standalone. The main use case of the component is displaying a pop-up content on some action, such as a button click.

API reference
  • dhtmlXPopup API
Related resources
  • To get dhtmlxPopup, you need to download dhtmlxSuite
  • Check online samples for Popup
Guides

Creating Popup on a Page

  • Attaching Popup to Form
  • Attaching Popup to Toolbar
  • Attaching Popup to Ribbon
  • Attaching Popup to Slider
  • Using Popup standalone
 Discusses the ways of initializing Popup on a page.

Attaching Content to Popup

  • Adding DHTMLX Components
  • Adding HTML Objects
  • Adding HTML String
  • Adding a List
  • Clearing the Content
 Covers the possibilities of attaching content to Popup and clearing it.

Configuring Popup

  • Skinning Popup
  • Managing Popup's Visibility
 Guides you through the information about setting skins and visibility modes of Popup.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXPopup API DHTMLX Docs

Documentation
  • dhtmlXPopup API
    • Methods
    • Events
    • Others
  • Initializing Popup on a Page
  • Attaching Content to Popup
  • Skinning Popup
  • Managing Popup's Visibility
Start Popup

dhtmlXPopup API

Methods
attachAccordion | adds an accordion object to the popup
attachCalendar | adds a calendar object to the popup
attachCarousel | attaches a carousel object to the popup
attachColorPicker | adds a color picker object to the popup
attachEditor | adds an editor object to the popup
attachEvent | adds any user-defined handler to available events
attachForm | adds a form object to the popup
attachGrid | adds a grid object to the popup
attachHTML | adds the HTML markup to the popup
attachLayout | adds a layout object to the popup
attachList | adds a list-like structure to the popup
attachObject | adds a DOM element to the popup
attachSidebar | attaches dhtmlxSidebar to a cell
attachTabbar | adds a tabbar object to the popup
attachTree | adds a tree object to the popup
attachTreeView | adds a treeview object to the popup
attachVault | adds an accordion object to the popup
clear | clears attached content (object / list / html / dhtmlx component)
detachEvent | detaches a handler from an event
getItemData | returns items of the list attached through the attachList method
hide | hides the popup
isVisible | returns true if popup visible
setDimension | sets the dimensions of the popup, when a component is attached to it
setSkin | sets the skin to apply
show | shows the popup
unload | destructor
Events
onBeforeHide | fires before a popup is hidden, cancelable
onClick | fires when the user clicks on an item of the list attached to the popup
onContentClick | fires when the user clicks on the popup content
onHide | fires when the popup is being hidden
onShow | fires when the popup window is being shown
Other
separator popup property to specify separator for attach list
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • attachAccordion
    • attachCalendar
    • attachCarousel
    • attachColorPicker
    • attachEditor
    • attachEvent
    • attachForm
    • attachGrid
    • attachHTML
    • attachLayout
    • attachList
    • attachObject
    • attachSidebar
    • attachTabbar
    • attachTree
    • attachTreeView
    • attachVault
    • clear
    • detachEvent
    • getItemData
    • hide
    • isVisible
    • setDimension
    • setSkin
    • show
    • unload
  • Events
  • Others
Start Popup dhtmlXPopup API

Methods

attachAccordion | adds an accordion object to the popup
attachCalendar | adds a calendar object to the popup
attachCarousel | attaches a carousel object to the popup
attachColorPicker | adds a color picker object to the popup
attachEditor | adds an editor object to the popup
attachEvent | adds any user-defined handler to available events
attachForm | adds a form object to the popup
attachGrid | adds a grid object to the popup
attachHTML | adds the HTML markup to the popup
attachLayout | adds a layout object to the popup
attachList | adds a list-like structure to the popup
attachObject | adds a DOM element to the popup
attachSidebar | attaches dhtmlxSidebar to a cell
attachTabbar | adds a tabbar object to the popup
attachTree | adds a tree object to the popup
attachTreeView | adds a treeview object to the popup
attachVault | adds an accordion object to the popup
clear | clears attached content (object / list / html / dhtmlx component)
detachEvent | detaches a handler from an event
getItemData | returns items of the list attached through the attachList method
hide | hides the popup
isVisible | returns true if popup visible
setDimension | sets the dimensions of the popup, when a component is attached to it
setSkin | sets the skin to apply
show | shows the popup
unload | destructor
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachAccordion DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachAccordion

adds an accordion object to the popup

dhtmlXAccordion attachAccordion(number width,number height,object conf);

Parameters

width | number | accordion width
height | number | accordion height
conf | object | optional, accordion config for object-api init

Returns

dhtmlXAccordion dhtmlXAccordion instance

Example

var myPop = new dhtmlXPopup(...);
var myAcc = myPop.attachAccordion(350, 300, {
    icons_path: "icons/",
    items: [
            { id: "a1", text: "Main Page", icon: "flag_red.png" },
            { id: "a2", text: "Navigation", icon: "flag_green.png" },
            { id: "a3", text: "Feedback", icon: "flag_blue.png" }
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachCalendar DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachCalendar

adds a calendar object to the popup

dhtmlXCalendarObject attachCalendar();

Returns

dhtmlXCalendarObject dhtmlXCalendarObject instance

Example

var myPop = new dhtmlXPopup(...);
var myCalendar = myPop.attachCalendar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachCarousel DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachCarousel

attaches a carousel object to the popup

dhtmlXCarousel attachCarousel(number width,number height,object conf);

Parameters

width | number | carousel width
height | number | carousel height
conf | object | optional, carousel config for object-api init

Returns

dhtmlXCarousel dhtmlXCarousel instance

Example

var myPop = new dhtmlXPopup(...);
var myCarousel = myPop.attachCarousel(400, 300, conf){
    ...
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachColorPicker DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachColorPicker

adds a color picker object to the popup

dhtmlXColorPicker attachColorPicker(object conf);

Parameters

conf object optional, color picker config for api-init

Returns

dhtmlXColorPicker dhtmlXColorPicker instance

Example

var myPop = new dhtmlXPopup(...);
var myCP = myPop.attachColorPicker({
    color: "#a4bed4"
});

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEditor DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachEditor

adds an editor object to the popup

dhtmlXEditor attachEditor(number width,number height);

Parameters

width | number | width of editor container
height | number | height of editor container

Returns

dhtmlXEditor dhtmlXEditor instance

Example

var myPop = new dhtmlXPopup(...);
var myEditor = myPop.attachEditor(400, 200);

Change log

added in 3.6.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachForm DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachForm

adds a form object to the popup

dhtmlXForm attachForm(object formData);

Parameters

formData object optional, form config for api-init

Returns

dhtmlXForm dhtmlXForm instance

Example

var myPop = new dhtmlXPopup(...);
var myForm = myPop.attachForm([
    {type: "input", label: "Email Address", name: "email"},
    {type: "password", label: "Password", name: "pwd"}
]);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachGrid DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachGrid

adds a grid object to the popup

dhtmlXGridObject attachGrid(number width,number height);

Parameters

width | number | grid width
height | number | grid height

Returns

dhtmlXGridObject dhtmlXGridObject instance

Example

var myPop = new dhtmlXPopup(...);
var myGrid = myPop.attachGrid(350, 300);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHTML DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachHTML

adds the HTML markup to the popup

void attachHTML(string html);

Parameters

html string any html content

Example

var myPop = new dhtmlXPopup(...);
myPop.attachHTML("any custom text here");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachLayout DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachLayout

adds a layout object to the popup

dhtmlXLayoutObject attachLayout(number width,number height,string pattern);

Parameters

width | number | layout width
height | number | layout height
pattern | string | layout pattern, "3L" by default

Returns

dhtmlXLayoutObject dhtmlXLayoutObject instance

Example

var myPop = new dhtmlXPopup(...);
var myLayout = myPop.attachLayout(350, 300, "2U");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachList DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachList

adds a list-like structure to the popup

void attachList(string template,array data);

Parameters

template | string | a comma-separated list of data properties that will be rendered in the list
data | array | data available for rendering in the list

Example

var myPop = new dhtmlXPopup(...);
var myList = myPop.attachList(
    "name,price",   // template
    [               // data
        {id: 1, name: "Audi A5 Coupe", price: "&euro; 31,550"},
        {id: 2, name: "Audi A5 Sportback", price: "&euro; 30,990"},
        myPop.separator,
        {id: 3, name: "Audi A6", price: "&euro; 30,990"},
        {id: 4, name: "Audi A6 Avant", price: "&euro; 37,450"},
        {id: 5, name: "Audi A6 Quattro", price: "&euro; 55,360"}
    ]
);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachObject DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachObject

adds a DOM element to the popup

void attachObject(string|HTMLElement obj);

Parameters

obj string|HTMLElement document id or object

Example

<div id="myObj" style="display:none;">any custom text here</div>

var myPop = new dhtmlXPopup(...);
myPop.attachObject("myObj");

Details

display:none will be removed automatically, used to keep element invisible while it's not attached

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachSidebar DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachSidebar

attaches dhtmlxSidebar to a popup

object attachSidebar( [object conf] );

Parameters

conf object optional, sidebar config for api-init

Returns

object dhtmlxSidebar instance

Example

var myPop = new dhtmlXPopup(...);
var mySidebar = myPop.attachSidebar({
    items: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTabbar DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachTabbar

adds a tabbar object to the popup

dhtmlXTabBar attachTabbar(number width,number height,object conf);

Parameters

width | number | tabbar width
height | number | tabbar height
conf | object | optional, tabbar config for api-init

Returns

dhtmlXTabBar dhtmlXTabBar instance

Example

var myPop = new dhtmlXPopup(...);
var myTabbar = myPop.attachTabbar(320, 400, {
    align: "right",
    mode: "bottom",
    tabs: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Details

The "mode" param had been used for tabbar initialization instead of "conf", it is deprecated since 4.0. To set the mode, please use conf.mode:

// old deprecated
var myTabbar = myPop.attachTabbar(320, 400, "bottom");
// new usage
var myTabbar = myPop.attachTabbar(320, 400, {mode:"bottom"});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTree DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachTree

adds a tree object to the popup

dhtmlXTreeObject attachTree(number width,number height,string|number rootId);

Parameters

width | number | tree width
height | number | tree height
rootId | string|number | the id of the parent root (see dhtmlXTree docs, 0 by default)

Returns

dhtmlXTreeObject dhtmlXTree instance

Example

var myPop = new dhtmlXPopup(...);
var myTree = myPop.attachTree(350, 300);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTreeView DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachTreeView

adds a treeview object to the popup

dhtmlXTreeViewObject attachTreeView(number width,number height,object conf);

Parameters

width | number | accordion width
height | number | accordion height
conf | object | optional, treeview config for object-api init

Returns

dhtmlXTreeViewObject dhtmlXTreeViewObject instance

Example

var myPop = new dhtmlXPopup(...);
myTreeView = myPop.attachTreeView(210, 95, {
    items: [
        {id: 1, text: "Documents", open: 1, items: [
            {id: 2, text: "Privacy and Terms.pdf"},
            {id: 3, text: "Licence Agreement.pdf"}
        ]}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachVault DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

attachVault

adds an accordion object to the popup

dhtmlXVaultObject attachVault(number width,number height,object conf);

Parameters

width | number | vault width
height | number | vault height
conf | object | vault config for object-API initialization

Returns

dhtmlXVaultObject dhtmlXVault instance

Example

var myPop = new dhtmlXPopup(...);
var myVault = myPop.attachVault(350, 300, {
    uploadUrl:  "http://my_mega_server/upload_handler.php",
    swfUrl:     "http://my_mega_server/upload_handler.php",
    slUrl:      "http://my_mega_server/upload_handler.php",
    swfPath:    "dhxvault.swf",
    slXap:      "dhxvault.xap"
});

Details

if separate component files are used - dhtmlxvault.js should be included after dhtmlxpopup.js

Change log

added in 3.6.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clear DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

clear

clears attached content (object / list / html / dhtmlx component)

void clear();

Example

var myPop = new dhtmlXPopup(...);
myPop.clear();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemData DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

getItemData

returns items of the list attached through the attachList method

array getItemData( [string|number id] );

Parameters

id string|number optional, item id, if not specified data for all items will be returned

Returns

array array with data

Example

var myPop = new dhtmlXPopup(...);
myPop.attachList("name,price", [
    {id: 1, name: "Audi A5 Coupe", price: "31550"},
    {id: 2, name: "Audi A5 Sportback", price: "30990"}
]);

var data = myPop.getItemData(1);
/*
result:
data = [{id: 1, name: "Audi A5 Coupe", price: "31550"}]
*/

var data = myPop.getItemData();
/*
result:
data = [
    {id: 1, name: "Audi A5 Coupe", price: "31550"},
    {id: 2, name: "Audi A5 Sportback", price: "30990"}
]
*/

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hide DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

hide

hides the popup

void hide();

Example

var myPop = new dhtmlXPopup(...);
myPop.hide();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isVisible DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

isVisible

returns true if popup visible

boolean isVisible();

Returns

boolean true/false

Example

var myPop = new dhtmlXPopup(...);
var state = myPop.isVisible(); // true/false

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDimension DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

setDimension

sets the dimensions of the popup, when a component is attached to it

void setDimension(number width,number height);

Parameters

width | number | the popup's width
height | number | the popup's height

Example

myPopup.setDimension(200,150);

Details

added in version 4.6.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

setSkin

sets the skin to apply

void setSkin(string skin);

Parameters

skin string skin name

Example

// from js
var myPop = new dhtmlXPopup(...);
myPop.setSkin("dhx_teracce");

// set skin from init
var myPop = new dhtmlXPopup({
    skin: "dhx_terrace"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

show

shows the popup

void show(string|number id);

Parameters

id string|number item id, for radio buttons you should specify [id,value]

Example

// initializes toolbar
var myToolbar = new dhtmlXToolbarObject({
    parent: "parentId",
    icon_path: "../common/imgs/",
    items: [
        {type: "button", id: "open", img: "open.gif"},
        {type: "button", id: "close", img: "close.gif"}
    ]
});

// initializes popup
var myPop = new dhtmlXPopup({
    toolbar: myToolbar,
    id: ["open","close"]
});

// show popup near specified item
myPop.show("open");
// or
myPop.show("close");

Details

A popup can be shown:

  • near the item with the specified ID, when a popup is attached to a form or toolbar
  • near the specified area for a stand-alone initialization

In the case of the stand-alone initialization:

  • you need to pass x, y, width and height of the area and a popup will be centered near it automatically

params:

  • x - number, x-position of the area
  • y - number, y-position of the area
  • width - number, the width of the area
  • height - number, the height of the area
// initializes popup
var myPop = new dhtmlXPopup();
myPop.attachHTML("I'm a popup near the specified area");

// assuming that we have a div and we need to show a popup near it
var myArea = document.getElementById("myArea");

// collect coordinates and dimensions
var x = window.dhx.absLeft(myArea);
var y = window.dhx.absTop(myArea);
var width = myArea.offsetWidth;
var height = myArea.offsetHeight;

// show popup
myPop.show(x, y, width, height);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • attachAccordion
  • attachCalendar
  • attachCarousel
  • attachColorPicker
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTML
  • attachLayout
  • attachList
  • attachObject
  • attachSidebar
  • attachTabbar
  • attachTree
  • attachTreeView
  • attachVault
  • clear
  • detachEvent
  • getItemData
  • hide
  • isVisible
  • setDimension
  • setSkin
  • show
  • unload
Start Popup dhtmlXPopup API Methods

unload

destructor

void unload();

Example

var myPop = new dhtmlXPopup(...);
myPop.unload();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onBeforeHide
    • onClick
    • onContentClick
    • onHide
    • onShow
  • Others
Start Popup dhtmlXPopup API

Events

onBeforeHide | fires before a popup is hidden, cancelable
onClick | fires when the user clicks on an item of the list attached to the popup
onContentClick | fires when the user clicks on the popup content
onHide | fires when the popup is being hidden
onShow | fires when the popup window is being shown
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeHide DHTMLX Docs

Documentation
  • onBeforeHide
  • onClick
  • onContentClick
  • onHide
  • onShow
Start Popup dhtmlXPopup API Events

onBeforeHide

fires before a popup is hidden, cancelable

void onBeforeHide(string type,Event ev,string|number id){ ... };

Parameters

type | string | "click", "esc" or "select" - specifies the reason why a popup will be hidden (see details)
ev | Event | a native event object
id | string|number | the id of the clicked item, for the select type only

Example

myPop.attachEvent("onBeforeHide", function(type, ev, id){
    return true; // return false;
});

Details
  • "click" - the user has clicked on the document body outside the popup
  • "esc" - the user has pressed the Esc key
  • "select" - when a list is attached to the popup - the user has selected any option from the list

The event is cancelable, returning false will prevent hiding

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClick DHTMLX Docs

Documentation
  • onBeforeHide
  • onClick
  • onContentClick
  • onHide
  • onShow
Start Popup dhtmlXPopup API Events

onClick

fires when the user clicks on an item of the list attached to the popup

void onClick(string|number id){ ... };

Parameters

id string|number the id of the clicked item of the list

Example

myPop.attachEvent("onClick", function(id){
    console.log("You have clicked on the item with id="+id);
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onContentClick DHTMLX Docs

Documentation
  • onBeforeHide
  • onClick
  • onContentClick
  • onHide
  • onShow
Start Popup dhtmlXPopup API Events

onContentClick

fires when the user clicks on the popup content

void onContentClick(){ ... };

Example

myPop.attachEvent("onContentClick", function(){
    console.log("You have clicked on the popup window");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onHide DHTMLX Docs

Documentation
  • onBeforeHide
  • onClick
  • onContentClick
  • onHide
  • onShow
Start Popup dhtmlXPopup API Events

onHide

fires when the popup is being hidden

void onHide(){ ... };

Example

myPop.attachEvent("onHide", function(){
    console.log("The popup window is hidden");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onShow DHTMLX Docs

Documentation
  • onBeforeHide
  • onClick
  • onContentClick
  • onHide
  • onShow
Start Popup dhtmlXPopup API Events

onShow

fires when the popup window is being shown

void onShow(string|number id){ ... };

Parameters

id string|number the id of the item that invokes a popup opening (when popup is attached to a toolbar or a form)

Example

myPop.attachEvent("onShow", function(id){
    console.log("The popup window is visible");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • separator
Start Popup dhtmlXPopup API

Others

separator popup property to specify separator for attach list
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


separator DHTMLX Docs

Documentation
  • separator
Start Popup dhtmlXPopup API Others

separator

popup property to specify separator for attach list

object separator;

Example

var myPop = new dhtmlXPopup(...);
myPop.attachList(
    "name,price",
    [
        {id: 1, name: "Audi A5 Coupe", price: "&euro; 31,550"},
        {id: 2, name: "Audi A5 Sportback", price: "&euro; 30,990"},
        myPop.separator,
        {id: 3, name: "Audi A6", price: "&euro; 30,990"},
        {id: 4, name: "Audi A6 Avant", price: "&euro; 37,450"},
        {id: 5, name: "Audi A6 Quattro", price: "&euro; 55,360"}
    ]
);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing Popup on a Page DHTMLX Docs

Documentation
  • dhtmlXPopup API
  • Initializing Popup on a Page
    • Attaching Popup to Form
    • Attaching Popup to Toolbar
    • Attaching Popup to Ribbon
    • Attaching Popup to Slider
    • Using Popup standalone
    • Destructor
    • Object Constructor
  • Attaching Content to Popup
  • Skinning Popup
  • Managing Popup's Visibility
Start Popup

Initializing Popup on a Page

There are several ways of creating Popup on a page:

  • To attach Popup to Form
  • To attach Popup to Toolbar
  • To attach Popup to Ribbon
  • To attach Popup to Slider
  • To use Popup standalone

Attaching Popup to Form

To attach Popup to dhtmlxForm, pass the following parameters to the dhtmlxPopup's object constructor:

var myForm = new dhtmlXForm("myForm", [
    {type: "input",    name: "name",    value: "Ogiwara Masaaki", label: "Full Name / Nick"},
    {type: "password", name: "pwd",     value: "12345",           label: "Password"},
    {type: "button",   name: "proceed", value: "Proceed"}
]);
var myPop = new dhtmlXPopup({
    form: myForm,
    id: ["name","pwd"] //attaches the same popup to 2 inputs: "Full Name" and "Password"
});

Related sample: Attach to form

Attaching Popup to Toolbar

To attach Popup to dhtmlxToolbar, pass the following parameters to the dhtmlxPopup's object constructor:

var myToolbar = new dhtmlXToolbarObject("toolbarObj");
myToolbar.addButton("button_open", 2, "Open", "open.gif", "open_dis.gif");
myToolbar.addButton("button_save", 3, "Save", "save.gif", "save_dis.gif");

var myPop = new dhtmlXPopup({
        toolbar: myToolbar,
        id: "button_open" //attaches popup to the "Open" button
});

myPop.attachHTML("any custom text here");

Related sample: Attach to toolbar

Attaching Popup to Ribbon

To attach Popup to dhtmlxRibbon, pass the following parameters to the dhtmlxPopup's object constructor:

<script>
    var myRibbon;
    var myPop;
        function doOnLoad() {
            myRibbon = new dhtmlXRibbon({
                parent: "myRibbon",
                icons_path: "../../../dhtmlxRibbon/samples/common/",
                json: "../../../dhtmlxRibbon/samples/common/data_attached.json",
                onload: function(){
                    myRibbon.setItemText("print_page_setup", "Popup here!");
                    myPop = new dhtmlXPopup({ ribbon: myRibbon, id: "print_page_setup"});
                    myPop.attachList("name,price", [
                        {id: 1, name: "Audi A5 Coupe", price: "&euro; 31,550"},
                        {id: 2, name: "Audi A5 Sportback", price: "&euro; 30,990"},
                        myPop.separator,
                        {id: 3, name: "Audi A6", price: "&euro; 30,990"},
                        {id: 4, name: "Audi A6 Avant", price: "&euro; 37,450"},
                        {id: 5, name: "Audi A6 Quattro", price: "&euro; 55,360"},
                        myPop.separator,
                        {id: 6, name: "Audi TT Coupe", price: "&euro; 29,830"},
                        {id: 7, name: "Audi TT RS Coupe", price: "&euro; 59,800"}
                    ]);
                }
            });
        }
</script>

Related sample: Attach to ribbon

Attaching Popup to Slider

To attach Popup to dhtmlxSlider, pass the following parameters to the dhtmlxPopup's object constructor:

<script>
    var mySlider;
    var myPop;
        function doOnLoad() {
            // init slider
            mySlider = new dhtmlXSlider({
                parent: "sliderObj",
                size: 150,
                value: 5,
                step: 1,
                min: 0,
                max: 10
            });

            // attach popup to slider
            myPop = new dhtmlXPopup({ slider: mySlider });

            // change popup value when slider moved
            mySlider.attachEvent("onChange", function(value){
                updatePopupValue(value);
            });

            // set initial value for popup
            updatePopupValue(mySlider.getValue());
        }

        function updatePopupValue(value) {
            myPop.attachHTML("Current value: "+value.toString());
        }
</script>

Related sample: Attach to slider

Using Popup standalone

Popup can be used standalone (attached to a custom object).

This way implies that dhtmlxPopup will be instantiated but the show/hide commands must be called manually

To create a standalone Popup you don't need to pass any parameters to the dhtmlxPopup's object constructor:

<input type="text" onclick="showPopup(this);" onblur="hidePopup();" value="click">

<script>
    var myPop = new dhtmlXPopup();
    myPop.attachHTML("You can enter some text here");

    function showPopup(inp) {
        myPop.show(20,20,400,300); //params are: x, y, width, height
    }
    function hidePopup() {
        myPop.hide();
    }
</script>

Get the details on how to show/hide dhtmlxPopup in the related chapter - Managing visibility.

Destructor

To remove a dhtmlxPopup instance and clear the memory, use the unload method:

myPop.unload();
myPop = null;

Once you've reloaded the page, the dhtmlxPopup's instances are destroyed automatically.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • Object Constructor
    • Attaching to a Form's Control
    • Attaching to a Toolbar's Control
    • Attaching to an HTML Element
    • Destructor
Start Popup Initializing Popup on a Page

Object Constructor

Attaching to a Form's Control

var myForm = new dhtmlXForm("myForm", [
    {type: "input",    name: "name",    value: "Ogiwara Masaaki", label: "Full Name"},
    {type: "password", name: "pwd",     value: "12345",           label: "Password"},
    {type: "button",   name: "proceed", value: "Proceed"}
]);
var myPop = new dhtmlXPopup({
    form: myForm,
    id: ["name","pwd"] //attaches the same pop-up window to 2 inputs: "Full Name" and "Password"
});

Related sample: Attach to form

Available parameters

Parameter | Description | Optionality
form | (string, object) the id or object of the dhtmlxForm instance that the pop-up window will be attached to | Mandatory
id | (string, array) the id of a form's control that you want to attach a pop-up to or an array of ids if you'd like to attach the same pop-up to several controls. For radio buttons you need to specify the value as an array (i.e. id: ["inp1", "inp2", ["r1","v1"] ], where ["r1","v1"] is the name and value of a radio button) | Mandatory
mode | ("top", "bottom", "right", "left") the position that the pop-up window will appear at. By default for form-based init, "right". If available space is less than required, dhtmlxPopup automatically changes the mode from "top" to "bottom", from "left" to "right" and vice versa | Optional
skin | (string) the skin to apply. Read more on skins here. | Optional

Attaching to a Toolbar's Control

var myToolbar = new dhtmlXToolbarObject("toolbarObj");
myToolbar.addButton("button_open", 2, "Open", "open.gif", "open_dis.gif");
myToolbar.addButton("button_save", 3, "Save", "save.gif", "save_dis.gif");

var myPop = new dhtmlXPopup({
    toolbar: myToolbar,
    id: "button_open" //attaches a pop-up window to the "Open" button
});

Related sample: Attach to toolbar

Available parameters

Parameter | Description | Optionality
toolbar | (string, object) the id or object of the dhtmlxToolbar instance that the pop-up window will be attached to | Mandatory
id | (string, array) the id of a toolbar's control that you want to attach a pop-up to or an array of ids if you'd like to attach the same pop-up to several controls. | Mandatory
mode | ("top", "bottom", "right", "left") the position that the pop-up window will appear at. By default, "bottom". If available space is less than required, dhtmlxPopup automatically changes the mode from "top" to "bottom", from "left" to "right" and vice versa | Optional
skin | (string) the skin to apply. Read more on skins here. | Optional

Attaching to an HTML Element

<input type="text" onclick="showPopup(this);" onblur="hidePopup();" value="click">

<script>
    var myPop = new dhtmlXPopup();
    myPop.attachHTML("You can enter some text into here");

    function showPopup(inp) {
        myPop.show(20,20,400,300); //params are: x, y, width, height
    }
    function hidePopup() {
        myPop.hide();
    }
</script>

Related sample: Attach to custom object

Available parameters

Parameter | Description | Optionality
mode | ("top", "bottom", "right", "left") the position that the pop-up window will appear at. By default, "bottom". If available space is less than required, dhtmlxPopup automatically changes the mode from "top" to "bottom", from "left" to "right" and vice versa | Optional
skin | (string) the skin to apply. Read more on skins here. | Optional

Destructor

To remove a dhtmlxPopup instance and clear the memory, use the unload method:

myPop.unload();
myPop = null;

Related sample: Skins

Once you reload the page, the dhtmlxPopup's instances are destroyed automatically.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Content to Popup DHTMLX Docs

Documentation
  • dhtmlXPopup API
  • Initializing Popup on a Page
  • Attaching Content to Popup
    • Attaching DHTMLX components
    • Attaching HTML Objects
    • Attaching an HTML string
    • Attaching a list
    • Clearing the content
  • Skinning Popup
  • Managing Popup's Visibility
Start Popup

Attaching Content to Popup

dhtmlxPopup can have various content, such as:

  • DHTMLX components
  • an HTML object
  • an HTML string
  • a list

Attaching DHTMLX components

The table below presents DHTMLX components you can attach to a dhtmlxPopup object and code samples of such attaching.

Each attach[NameofComponent] method returns the instance of the related component

Component Code Sample
Accordion
var myPop = new dhtmlXPopup(...);
var myAcc = myPop.attachAccordion(350, 300);

Related sample: Attach accordion, Related API: attachAccordion

Calendar
var myPop = new dhtmlXPopup(...);
var myCalendar = myPop.attachCalendar();

Related sample: Attach calendar , Related API: attachCalendar

Carousel
var myPop = new dhtmlXPopup(...);
var myCarousel = myPop.attachCarousel(400, 300, conf){
    ...
});

Related API: attachCarousel

ColorPicker
var myPop = new dhtmlXPopup(...);
var myCP = myPop.attachColorPicker({ color: "#a4bed4"});

Related sample: Attach color picker , Related API: attachColorPicker

Editor
var myPop = new dhtmlXPopup(...);
var myEditor = myPop.attachEditor(400, 200);

Related sample: Attach editor , Related API: attachEditor

Form
var myPop = new dhtmlXPopup(...);
var myForm = myPop.attachForm([
    {type: "input",    label: "Email Address", name: "email"},
    {type: "password", label: "Password",      name: "pwd"}
]);

Related sample: Attach form , Related API: attachForm

Grid
var myPop = new dhtmlXPopup(...);
var myGrid = myPop.attachGrid(350,300);

Related sample: Attach grid , Related API: attachGrid

Layout
var myPop = new dhtmlXPopup(...);
var myLayout = myPop.attachLayout(350, 300, "3L");

Related sample: Attach layout , Related API: attachLayout

List
var myPop = new dhtmlXPopup(...);
var myList = myPop.attachList(
   "name,price",   // template
   [
     {id: 1, name: "Audi A5 Coupe", price: "&euro; 31,550"},
     {id: 2, name: "Audi A5 Sportback", price: "&euro; 30,990"},
     // more data
   ]
);

Related API: attachList

Sidebar
var myPop = new dhtmlXPopup(...);
var mySidebar = myPop.attachSidebar({
    items: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Related API: attachSidebar

Tabbar
var myPop = new dhtmlXPopup(...);
var myTabbar = myPop.attachTabbar(350, 300);

Related API: attachTabbar

Tree
var myPop = new dhtmlXPopup(...);
var myTree = myPop.attachTree(350,300);

Related sample: Attach tree , Related API: attachTree

TreeView
var myPop = new dhtmlXPopup(...);
myTreeView = myPop.attachTreeView(210, 95, {
    items: [
        {id: 1, text: "Documents", open: 1, items: [
            {id: 2, text: "Privacy and Terms.pdf"},
            {id: 3, text: "Licence Agreement.pdf"}
        ]}
    ]
});

Related API: attachTreeView

Attaching HTML Objects

To attach a DOM element to a dhtmlxPopup instance, use the attachObject method:

<div id="myObj">any custom text here</div>

<script>
     var myPop = new dhtmlXPopup(...);
     myPop.attachObject("myObj");
</script>

Related sample: Attach object

Attaching an HTML string

To add the HTML markup to a dhtmlxPopup instance you should use the attachHTML method:

var myPop = new dhtmlXPopup(...);
myPop.attachHTML("any custom text here");

Related sample: Attach html

Attaching a list

dhtmlxPopup provides a handy way to present list-like structures inside it.

To present data in the tabular view you should use the attachList method as in:

var  myPop = new dhtmlXPopup(...);
myPop.attachList("name,price", [
        {id: 1, name: "Audi A5 Coupe", price: "&euro; 31,550"},
        {id: 2, name: "Audi A5 Sportback", price: "&euro; 30,990"},
        myPop.separator, // use this struct for separator
        {id: 3, name: "Audi A6", price: "&euro; 30,990"},
        {id: 4, name: "Audi A6 Avant", price: "&euro; 37,450"},
        {id: 5, name: "Audi A6 Quattro", price: "&euro; 55,360"}
]);

where

  • "name, price" - a comma-separated list of data properties that will be rendered in the list;
  • [{id:.., name:..., price:...}] - the data available for rendering in the list;
  • separator - a special property of dhtmlxPopup that draws a single line.

Getting list's items

To get the list's items, use the getItemData method:

myPop.attachList("name,price", [
    {id: 1, name: "Audi A5 Coupe", price: "31550"},
    {id: 2, name: "Audi A5 Sportback", price: "30990"}
]);

var data = myPop.getItemData(1);
// data = {id: 1, name: "Audi A5 Coupe", price: "31550"}

To get all the items of the list you should call the method with no parameters:

myPop.attachList("name,price", [
    {id: 1, name: "Audi A5 Coupe", price: "31550"},
    {id: 2, name: "Audi A5 Sportback", price: "30990"}
]);

var data = myPop.getItemData();
// data = [
//     {id: 1, name: "Audi A5 Coupe", price: "31550"},
//     {id: 2, name: "Audi A5 Sportback", price: "30990"}
// ]

Related sample: Attach list

Clearing the content

To clear the current content of a pop-up window, use the clear method as in:

var myPop = new dhtmlXPopup( ... );
myPop.clear();

If you decide to attach some content over the existing one, note that before attaching the new content dhtmlxPopup will call the clear() method automatically.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Skinning Popup DHTMLX Docs

Documentation
  • dhtmlXPopup API
  • Initializing Popup on a Page
  • Attaching Content to Popup
  • Skinning Popup
    • Skin Detection
  • Managing Popup's Visibility
Start Popup

Skinning Popup

The library provides 4 predefined skins:

  • "material" (default)
  • "dhx_skyblue"
  • "dhx_web"
  • "dhx_terrace"

To set the skin for a dhtmlxPopup object, use the setSkin method.

var myPop = new dhtmlXPopup();
myPop.setSkin("dhx_web");

"material" | "dhx_skyblue" | "dhx_web" | "dhx_terrace"

Related sample: Skins

Skin Detection

The following priority (from higher to lower) is used to determine the skin to apply:

  1. The skin parameter of the dhtmxlPopup object constructor
  2. The dhtmlx.skin property
  3. The form/toolbar skin (if the pop-up window is attached to a form or a toolbar)
  4. dhtmlxPopup tries to detect the skin automatically (each skin css file has a corresponding record to help to detect the skin)
  5. The default "material" skin is used

For example, if you include on the page the only css file - "dhxpopup_dhx_terrace" - and instantiate dhtmlxPopup without specifying the skin parameter, then the "dhx_terrace" skin will be detected automatically.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Managing Popup's Visibility DHTMLX Docs

Documentation
  • dhtmlXPopup API
  • Initializing Popup on a Page
  • Attaching Content to Popup
  • Skinning Popup
  • Managing Popup's Visibility
Start Popup

Managing Popup's Visibility

To manage visibility of a pop-up window you have 3 methods:

  • show - shows a dhtmlxPopup object
  • hide - hides a dhtmlxPopup object
  • isVisible - checks whether the pop-up window is currently hidden or shown. Returns true if the pop-up is visible

Let's consider an example that uses these methods - attaching dhtmlxPopup to a custom object when you need to manually regulate showing/hiding of the pop-up window:

<input type="text" onclick="showPopup(this);" onblur="hidePopup();" value="click">

<script>
function showPopup(inp) {
    if (!myPop) {
        myPop = new dhtmlXPopup();
        myPop.attachHTML("You can enter some text into here");
    }
    if (myPop.isVisible()) {
        myPop.hide();
    } else {
        var x = window.dhx4.absLeft(inp); // returns left position related to window
        var y = window.dhx4.absTop(inp); // returns top position related to window
        var w = inp.offsetWidth;
        var h = inp.offsetHeight;
        myPop.show(x,y,w,h);
    }
}
function hidePopup() {
    if (myPop) myPop.hide();
}
</script>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Ribbon DHTMLX Docs

Documentation
  • Ribbon
    • dhtmlXRibbon API
    • How to Start with Ribbon
    • Object Constructor
    • Configuring Ribbon
    • Configuring Tabs
    • Skinning Ribbon
    • Font Awesome Icons in Ribbon
    • Handling Events
    • Block Control
    • Button Control
    • Checkbox Control
    • ButtonCombo Control
    • Group Control
    • Input Control
    • NewLevel for Block
    • ButtonSegment Control
    • ButtonSelect Control
    • Slider Control
    • Text Control
    • ButtonTwoState Control
    • Loading Data from XML
    • Loading Data from JSON
    • Integration with DHTMLX Components
Start

Ribbon

dhtmlxRibbon combines features of both dhtmlxToolbar and dhtmlxTabbar components. It provides users with means of easy access to commands and tools used in an application or in a website by organizing them into logical blocks. Thus, Ribbon is irreplaceable if you need to create an intuitive and user-friendly interface.

API reference
  • dhtmlXRibbon API
Related resources
  • You may download dhtmlxRibbon from dhtmlx.com
  • Check online samples for dhtmlxRibbon
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Working with Ribbon

  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
 Introduces the steps of creating Ribbon and discusses the ways of customizing and manipulating this component.

Manipulating Ribbon Items

  • Block
  • Button
  • CheckBox
  • ButtonCombo
  • Group
  • Input
  • NewLevel
  • ButtonSegment
  • ButtonSelect
  • Slider
  • Text
  • ButtonTwoState
 Includes the overview of main Ribbon controls and their attributes.

Attaching Content to Tabs

  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
 Describes the possibilities of integrating Ribbon with third-party components and defines the means of loading data.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXRibbon API DHTMLX Docs

Documentation
  • dhtmlXRibbon API
    • Methods
    • Events
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

dhtmlXRibbon API

Methods
attachEvent | adds any user-defined handler to available events
check | checks the specified checkbox
detachEvent | detaches a handler from an event
disable | disables the specified item in the ribbon
enable | enables the specified item in the ribbon
getCombo | returns dhtmlxCombo instance
getInput | gets an input's object by id
getItemOptionText | returns the text of buttonSelect item's option
getItemState | returns the current state of a buttonTwoState or a buttonSegmented
getItemText | returns the text of an item's label
getItemType | returns item type by item id
getValue | returns the current value of a slider or an input item
hide | hides the specified item (or a block of items) in the ribbon
isChecked | checks whether the specified checkbox is checked
isEnabled | checks if the specified item is enabled
isVisible | checks if the specified item is visible
loadStruct | loads data to the component via XML or JSON, usually component config
removeItem | completely removes an item from Ribbon
setIconPath | sets the path to the used images
setIconset | sets the iconset for Ribbon
setItemImage | sets an image for an item in the enabled state
setItemImageDis | sets an image for an item in the disabled state
setItemOptionText | sets text for an item's option of buttonSelect
setItemState | sets pressed/released state for a two-state button
setItemText | sets an item's label text
setSizes | adjusts the size of the ribbon when the parent's size is changed
setSkin | sets a skin for dhtmlXRibbon on the fly
setValue | sets a value for a slider or an input item
show | shows the specified item (or a block of items) in the ribbon
tabs | returns dhtmlXTabBarCell instance (ribbon's tab)
uncheck | removes the checkmark from a checkbox
unload | destructor, removes the ribbon
Events
onCheck | fires after a checkbox has been checked/unchecked
onClick | fires when the user clicks the left mouse button on a button or a buttonSelect items
onEnter | fires when the user presses the "Enter" button inside of an input item
onSelect | fires when a tab is selected
onSelectOption | fires when the user clicks on an option in the combo list
onStateChange | fires when the user changes the state of a two-state button item
onTabClick | fires when the user clicks on a tab
onTabClose | fires when the user presses the "Close" button on a tab
onValueChange | fires when the user changes the value of a slider item
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • attachEvent
    • check
    • detachEvent
    • disable
    • enable
    • getCombo
    • getInput
    • getItemOptionText
    • getItemState
    • getItemText
    • getItemType
    • getValue
    • hide
    • isChecked
    • isEnabled
    • isVisible
    • loadStruct
    • removeItem
    • setIconPath
    • setIconset
    • setItemImage
    • setItemImageDis
    • setItemOptionText
    • setItemState
    • setItemText
    • setSizes
    • setSkin
    • setValue
    • show
    • tabs
    • uncheck
    • unload
  • Events
Start Ribbon dhtmlXRibbon API

Methods

attachEvent | adds any user-defined handler to available events
check | checks the specified checkbox
detachEvent | detaches a handler from an event
disable | disables the specified item in the ribbon
enable | enables the specified item in the ribbon
getCombo | returns dhtmlxCombo instance
getInput | gets an input's object by id
getItemOptionText | returns the text of buttonSelect item's option
getItemState | returns the current state of a buttonTwoState or a buttonSegmented
getItemText | returns the text of an item's label
getItemType | returns item type by item id
getValue | returns the current value of a slider or an input item
hide | hides the specified item (or a block of items) in the ribbon
isChecked | checks whether the specified checkbox is checked
isEnabled | checks if the specified item is enabled
isVisible | checks if the specified item is visible
loadStruct | loads data to the component via XML or JSON, usually component config
removeItem | completely removes an item from Ribbon
setIconPath | sets the path to the used images
setIconset | sets the iconset for Ribbon
setItemImage | sets an image for an item in the enabled state
setItemImageDis | sets an image for an item in the disabled state
setItemOptionText | sets text for an item's option of buttonSelect
setItemState | sets pressed/released state for a two-state button
setItemText | sets an item's label text
setSizes | adjusts the size of the ribbon when the parent's size is changed
setSkin | sets a skin for dhtmlXRibbon on the fly
setValue | sets a value for a slider or an input item
show | shows the specified item (or a block of items) in the ribbon
tabs | returns dhtmlXTabBarCell instance (ribbon's tab)
uncheck | removes the checkmark from a checkbox
unload | destructor, removes the ribbon
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


check DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

check

checks the specified checkbox

void check(string|number id);

Parameters

id string|number id of a checkbox

Example

myRibbon.check(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disable DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

disable

disables the specified item in the ribbon

void disable(string itemId);

Parameters

itemId string item id

Example

myRibbon.disable(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enable DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

enable

enables the specified item in the ribbon

void enable(string itemId);

Parameters

itemId string item id

Example

myRibbon.enable(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCombo DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

getCombo

returns dhtmlxCombo instance

object getCombo(string|number id);

Parameters

id string|number item id

Returns

object dhtmlxCombo instance

Example

var dhxCombo = myRibbon.getCombo(id);

Change log

added in version 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getInput DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

getInput

gets an input's object by id

object getInput(string|number id);

Parameters

id string|number the input's id

Returns

object the input's object, "null" if no objects are found

Example

var inp = myRibbon.getInput(id);

Change log

added in 4.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemOptionText DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

getItemOptionText

returns the text of buttonSelect item's option

string getItemOptionText(string|number id,string|number optId);

Parameters

id | string|number | the item's id
optId | string|number | the option's id

Returns

string the text of an option

Example

// setting text for an option
setItemOptionText(item, optId, text);

// getting the text
var text = getItemOptionText(id, optId);

Change log

added in version 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemState DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

getItemState

returns the current state of a buttonTwoState or a buttonSegmented

boolean getItemState(string|number itemId,string|number segmId);

Parameters

itemId | string|number | the id of a buttonTwoState to check
segmId | string|number | the id of a buttonSegmented segment to check

Returns

boolean true - the button/segment is enabled, false - disabled

Example

var isPressed = myRibbon.getItemState(itemId, segmId);

Change log

added in version 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemText DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

getItemText

returns the text of an item's label

string getItemText(string|number itemId);

Parameters

itemId string|number the id of an item

Returns

string an item's label text

Example

myRibbon.getItemText(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemType DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

getItemType

returns item type by item id

string getItemType(string itemId);

Parameters

itemId string id of an item

Returns

string type of an item

Example

var type = myRibbon.getItemType(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getValue DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

getValue

returns the current value of a slider or an input item

mixed getValue(string itemId);

Parameters

itemId string id of an item

Returns

mixed slider/input value

Example

var value = myRibbon.getValue(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hide DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

hide

hides the specified item (or a block of items) in the ribbon

void hide(string itemId);

Parameters

itemId string id of an item to hide

Example

myRibbon.hide(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isChecked DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

isChecked

checks whether the specified checkbox is checked

boolean isChecked(string|number id);

Parameters

id string|number the checkbox id

Returns

boolean true - checkbox is checked, false - checkbox is unchecked

Example

var isChecked = myRibbon.isChecked(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isEnabled DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

isEnabled

checks if the specified item is enabled

boolean isEnabled(string itemId);

Parameters

itemId string id of an item to check

Returns

boolean state: true - item is enabled, false - item is disabled

Example

var isEn = myRibbon.isEnabled(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isVisible DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

isVisible

checks if the specified item is visible

boolean isVisible(string itemId);

Parameters

itemId string id of an item to check

Returns

boolean state: true if an item is visible, false if an item is invisible

Example

var isVis = myRibbon.isVisible(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadStruct DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

loadStruct

loads data to the component via XML or JSON, usually component config

promise loadStruct(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.loadStruct('<data><node id="a1".../></data>');

// json/xml from server
myComponent.loadStruct("server/data.xml");

// local json/xml with callback
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.loadStruct('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.loadStruct("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.loadStruct(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure response has the header "Content-Type: text/xml" for XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


removeItem DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

removeItem

completely removes an item from Ribbon

void removeItem(string itemId);

Parameters

itemId string id of an item

Example

myRibbon.removeItem(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconPath DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

setIconPath

sets the path to the used images

void setIconPath(string path);

Parameters

path string the path to images on the hard disk

Example

myRibbon.setIconPath("path/to/icons/");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconset DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

setIconset

sets the iconset for Ribbon

void setIconset(string name);

Parameters

name string the iconset's name

Example

myRibbon.setIconset(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemImage DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

setItemImage

sets an image for an item in the enabled state

void setItemImage(string|number id,string img);

Parameters

id | string|number | the id of an item
img | string | the URL of an image

Example

myRibbon.setItemImage(id, img);

Change log

added in 4.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemImageDis DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

setItemImageDis

sets an image for an item in the disabled state

void setItemImageDis(string|number id,string imgdis);

Parameters

id | string|number | the id of an item
imgdis | string | the URL of an image

Example

myRibbon.setItemImageDis(id, imgdis);

Change log

added in 4.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemOptionText DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

setItemOptionText

sets text for an item's option of buttonSelect

void setItemOptionText(string|number item,string|number optId,string text);

Parameters

item | string|number | the item's id
optId | string|number | the option's id
text | string | text to be set for the option

Example

myRibbon.setItemOptionText(item, optId, text);

Change log

added in version 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemState DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

setItemState

sets pressed/released state for a two-state button

void setItemState(string itemId,boolean state);

Parameters

itemId | string | id of a two-state item
state | boolean | state: true for pressed, false for released

Example

myRibbon.setItemState(itemId, state);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemText DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

setItemText

sets an item's label text

void setItemText(string|number itemId,string text);

Parameters

itemId | string|number | the id of an item
text | string | a new text of an item's label

Example

myRibbon.setItemText(id,text);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSizes DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

setSizes

adjusts the size of Ribbon when the parent's size is changed

void setSizes();

Example

myRibbon.setSizes();

Details

The method is used to refresh Ribbon after the size of its container has changed.

In the fullscreen mode or if Ribbon is attached to another DHTMLX component the method is called automatically.

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

setSkin

sets a skin for dhtmlXRibbon on the fly

void setSkin(string skin);

Parameters

skin string name of the skin

Example

myRibbon.setSkin('web');

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setValue DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

setValue

sets a value for a slider or an input item

void setValue(string id,number value,boolean callEvent);

Parameters

id | string | id of a slider or an input item
value | number | value (int for slider, any for input item)
callEvent | boolean | call “onValueChanged” event for a slider

Example

myRibbon.setValue(itemId, value, callEvent);

Change log

callEvent added in 4.1 for combo (prevention of calling onSelectOption)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

show

shows the specified item (or a block of items) in the ribbon

void show(string itemId);

Parameters

itemId string id of an item to show

Example

myRibbon.show(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


tabs DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

tabs

returns dhtmlXTabBarCell instance (ribbon's tab)

dhtmlXTabBarCell tabs(string|number id);

Parameters

id string|number tab id

Returns

dhtmlXTabBarCell dhtmlXTabBarCell instance

Example

var myRibbon = new dhtmlXRibbon("parentId");

myRibbon.addTab("a1", "Rage", null, null, true);
myRibbon.addTab("a2", "Motorhead");

// getting tab
var tab = myRibbon.tabs("a1");

// attaching something
var myGrid = tab.attachGrid();

// the same but shorter
var myGrid = myRibbon.tabs("a1").attachGrid();

Details

Used to attach content, menu/toolbar/status, show/hide progress, perform some tabs operations

Please, check dhtmlXTabBarCell API

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


uncheck DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

uncheck

removes the checkmark from a checkbox

void uncheck(string|number id);

Parameters

id string|number id of a checkbox

Example

myRibbon.uncheck(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • attachEvent
  • check
  • detachEvent
  • disable
  • enable
  • getCombo
  • getInput
  • getItemOptionText
  • getItemState
  • getItemText
  • getItemType
  • getValue
  • hide
  • isChecked
  • isEnabled
  • isVisible
  • loadStruct
  • removeItem
  • setIconPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemOptionText
  • setItemState
  • setItemText
  • setSizes
  • setSkin
  • setValue
  • show
  • tabs
  • uncheck
  • unload
Start Ribbon dhtmlXRibbon API Methods

unload

destructor, removes the ribbon

void unload();

Example

myRibbon.unload();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onCheck
    • onClick
    • onEnter
    • onSelect
    • onSelectOption
    • onStateChange
    • onTabClick
    • onTabClose
    • onValueChange
    • onXLE
    • onXLS
Start Ribbon dhtmlXRibbon API

Events

onCheck | fires after a checkbox has been checked/unchecked
onClick | fires when the user clicks the left mouse button on a button or a buttonSelect items
onEnter | fires when the user presses the "Enter" button inside of an input item
onSelect | fires when a tab is selected
onSelectOption | fires when the user clicks on an option in the combo list
onStateChange | fires when the user changes the state of a two-state button item
onTabClick | fires when the user clicks on a tab
onTabClose | fires when the user presses the "Close" button on a tab
onValueChange | fires when the user changes the value of a slider item
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCheck DHTMLX Docs

Documentation
  • onCheck
  • onClick
  • onEnter
  • onSelect
  • onSelectOption
  • onStateChange
  • onTabClick
  • onTabClose
  • onValueChange
  • onXLE
  • onXLS
Start Ribbon dhtmlXRibbon API Events

onCheck

fires after a checkbox has been checked/unchecked

void onCheck(string|number id,boolean state){ ... };

Parameters

id | string|number | id of a checkbox
state | boolean | true|false, checked/unchecked

Example

myRibbon.attachEvent("onCheck", function(id, state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClick DHTMLX Docs

Documentation
  • onCheck
  • onClick
  • onEnter
  • onSelect
  • onSelectOption
  • onStateChange
  • onTabClick
  • onTabClose
  • onValueChange
  • onXLE
  • onXLS
Start Ribbon dhtmlXRibbon API Events

onClick

fires when the user clicks the left mouse button on a button or a buttonSelect items

void onClick(string|number itemId,string|number bId){ ... };

Parameters

itemId | string|number | item id
bId | string|number | buttonSelect item id (for buttonSelect)

Example

myRibbon.attachEvent("onClick", function(itemId, bId){
    // your code here
});

Change log

bId added in 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEnter DHTMLX Docs

Documentation
  • onCheck
  • onClick
  • onEnter
  • onSelect
  • onSelectOption
  • onStateChange
  • onTabClick
  • onTabClose
  • onValueChange
  • onXLE
  • onXLS
Start Ribbon dhtmlXRibbon API Events

onEnter

fires when the user presses the "Enter" button inside of an input item

void onEnter(string|number id,number value){ ... };

Parameters

id | string|number | id of an item
value | number | the text that the user types in an input item

Example

myRibbon.attachEvent("onEnter", function(id, value){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelect DHTMLX Docs

Documentation
  • onCheck
  • onClick
  • onEnter
  • onSelect
  • onSelectOption
  • onStateChange
  • onTabClick
  • onTabClose
  • onValueChange
  • onXLE
  • onXLS
Start Ribbon dhtmlXRibbon API Events

onSelect

fires when a tab is selected

boolean onSelect(string|number id,string|number lastId){ ... };

Parameters

id | string|number | clicked tab id
lastId | string|number | id of previously active tab, if any

Returns

boolean true|false to allow/cancel selection

Example

var myRibbon = new dhtmlXRibbon("parentId");

myRibbon.attachEvent("onSelect", function(id, lastId){
    // your code here
    return true;
});

Details

Fires only for the enabled tabs, return true|false to allow/cancel selecting

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelectOption DHTMLX Docs

Documentation
  • onCheck
  • onClick
  • onEnter
  • onSelect
  • onSelectOption
  • onStateChange
  • onTabClick
  • onTabClose
  • onValueChange
  • onXLE
  • onXLS
Start Ribbon dhtmlXRibbon API Events

onSelectOption

fires when the user clicks on an option in the combo list

void onSelectOption(string|number id,number ind,string text){ ... };

Parameters

id | string|number | id of an item
ind | number | index of the option in question
text | string | the option's text

Example

myRibbon.attachEvent("onSelectOption",function(id,ind,text){
        //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onStateChange DHTMLX Docs

Documentation
  • onCheck
  • onClick
  • onEnter
  • onSelect
  • onSelectOption
  • onStateChange
  • onTabClick
  • onTabClose
  • onValueChange
  • onXLE
  • onXLS
Start Ribbon dhtmlXRibbon API Events

onStateChange

fires when the user changes the state of a two-state button item

void onStateChange(string|number id,boolean state){ ... };

Parameters

id | string|number | id of an item
state | boolean | new state of an item

Example

myRibbon.attachEvent("onStateChange", function(id, state){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onTabClick DHTMLX Docs

Documentation
  • onCheck
  • onClick
  • onEnter
  • onSelect
  • onSelectOption
  • onStateChange
  • onTabClick
  • onTabClose
  • onValueChange
  • onXLE
  • onXLS
Start Ribbon dhtmlXRibbon API Events

onTabClick

fires when the user clicks on a tab

void onTabClick(string|number id,string|number lastId){ ... };

Parameters

id | string|number | id of the clicked tab
lastId | string|number | id of the previously active tab, if any

Example

var myRibbon = new dhtmlXRibbon("parentId");

myRibbon.attachEvent("onTabClick", function(id, lastId){
    // your code here
});

Details

Fires both for enabled and disabled tabs, not cancelable.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onTabClose DHTMLX Docs

Documentation
  • onCheck
  • onClick
  • onEnter
  • onSelect
  • onSelectOption
  • onStateChange
  • onTabClick
  • onTabClose
  • onValueChange
  • onXLE
  • onXLS
Start Ribbon dhtmlXRibbon API Events

onTabClose

fires when the user presses the "Close" button on a tab

boolean onTabClose(string|number id){ ... };

Parameters

id string|number tab id

Returns

boolean true|false to allow/cancel closing

Example

var myRibbon = new dhtmlXRibbon("parentId");

myRibbon.attachEvent("onTabClose", function(id){
    // your code here
    return true;
});

Details

Fires both for enabled and disabled tabs, return true|false to allow/cancel closing

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onValueChange DHTMLX Docs

Documentation
  • onCheck
  • onClick
  • onEnter
  • onSelect
  • onSelectOption
  • onStateChange
  • onTabClick
  • onTabClose
  • onValueChange
  • onXLE
  • onXLS
Start Ribbon dhtmlXRibbon API Events

onValueChange

fires when the user changes the value of a slider item

void onValueChange(string|number id,number value){ ... };

Parameters

id | string|number | the id of an item
value | number | a new value of an item

Example

myRibbon.attachEvent("onValueChange", function(id, value){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onCheck
  • onClick
  • onEnter
  • onSelect
  • onSelectOption
  • onStateChange
  • onTabClick
  • onTabClose
  • onValueChange
  • onXLE
  • onXLS
Start Ribbon dhtmlXRibbon API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onCheck
  • onClick
  • onEnter
  • onSelect
  • onSelectOption
  • onStateChange
  • onTabClick
  • onTabClose
  • onValueChange
  • onXLE
  • onXLS
Start Ribbon dhtmlXRibbon API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


How to Start with Ribbon DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
    • New Ribbon Object Creation
    • Step 1.Including Related Files
    • Step 2. Defining a Ribbon Container
    • Step 3. Creating Object Constructor
    • Step 4. Setting Image Path
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

How to Start with Ribbon

New Ribbon Object Creation

To create a Ribbon object you must make 4 steps.

Shortly, they look as:

  1. Including related files;
  2. Defining a Ribbon container;
  3. Creating object constructor;
  4. Setting image path

The steps that need to be taken for dhtmlxRibbon's initialization are the following:

Step 1.Including Related Files

Each DHTMLX component can be used standalone or as a part of the general library.

If you use dhtmlxRibbon standalone, you need to include 2 files:

  • dhtmlxribbon.js
  • dhtmlxribbon.css
<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" href="../codebase/skins/dhtmlxribbon.css">
        <script src="../codebase/dhtmlxribbon.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

If you use dhtmlxRibbon as a part of "dhtmlxSuite" package, you need to include 2 files:

  • dhtmlx.js
  • dhtmlx.css
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Step 2. Defining a Ribbon Container

The next step: an HTML container for your future ribbon. To implement this step we can choose one of the ways:

  • Create a new HTML container
 <div id="ribbonObj"></div>

In this example the object is a <div> element on page, which is placed in the <body> tag.

  • Put a ribbon into some DHTMLX container component: layout, window, accordion, tabbar.
// attach to Layout
dhxLayout.attachRibbon();
dhxLayout.cells(id).attachRibbon();
// attach to Window
dhxWins.window(id).attachRibbon();
// attach to Accordion
dhxAcc.cells(id).attachRibbon();
// attach to Tabbar
dhxTabbar.cells(id).attachRibbon();

Step 3. Creating Object Constructor

The next step is to create a new dhtmlXRibbonObject and place it after the <div> element (object) that we've created:

var myRibbon = new dhtmlXRibbonObject(baseId, skin);
  • "baseId" defines an HTML object on page to which the Ribbon is attached (the main Ribbon container in the code mentioned above).
  • "skin" is the optional parameter which defines the skin, that will be applied to the Ribbon. If this argument is not set, the component will be created with the default skin ("dhx_skyblue").

So, in our case the code will look like this:

var myRibbon = new dhtmlXRibbonObject("ribbonObj");

Ribbon object constructor is considered in detail in the article Object Constructor.

Step 4. Setting Image Path

The setIconPath() method should be used to set the full path to the directory, where ribbon image files are located. By means of this method the user is able to set path to the directory, where icons images are stored.

The following code string should be placed before any of data loading methods:

myRibbon.setIconsPath("[full path to icons image files directory]");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
    • Specifying Ribbon Items
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Object Constructor

var myRibbon = new dhtmlXRibbon(data);

The Ribbon component can be initialized in two ways:

  • By placing directly on the page
    var myRibbon= new dhtmlXRibbon(container, [configObj]);
//myRibbon.loadStruct(...);
  • By attaching to the layout (either to the whole layout or to a singular cell)
    var myRibbon= layout.attachRibbon([configObj]);
//myRibbon.loadStruct(...);

Parameters:

  • container - an HTML container where the ribbon object will reside
  • configObj - a configuration object that specifies the structure of the ribbon

Layout, Window, Accordion, Tabbar can create ribbon inside their cells by using the method attachRibbon():

// attach to Layout
myLayout.attachRibbon();
myLayout.cells(id).attachRibbon();
// attach to Window
myWins.window(id).attachRibbon();
// attach to Accordion
myAcc.cells(id).attachRibbon();
// attach to Tabbar
myTabbar.tabs(id).attachRibbon();

Ribbon can also be initialized by object notation:

myRibbon = new dhtmlXRibbonObject({
    parent:"myRibbon",
    icons_path : "../../../samples_common/ribbon/",
    arrows_mode: "auto",
    onClick:function(){
        alert("Ribbon item was clicked");
    }
});

Specifying Ribbon Items

Ribbon's items can be defined through "tabs" collection with "items" collections inside:

var myRibbon = new dhtmlXRibbon({
    parent : "rb",
    icons_path : "../../../samples_common/ribbon/",
    arrows_mode: "auto",
    tabs: [
        { //1st tab
            id: "tab_id",
            text: "Ribbon tab 1",
            items: []
        },
        { //2nd tab
            id: "tab_id2",
            text: "Ribbon_tab 2",
            items: [
                {type:"block", text:"Group 1", text_pos: "bottom", mode:"cols",
                list:[                                  //1st block
                    {type:"button", text:"New"},        //1st row, 1st item
                    {type:"button", text:"Open"},       //1st row, 2nd item
                    {type:"button", text:"Save"},       //1st row, 3rd item
                    {type:"newLevel"},                  //moves down into a new row
                    {type:"button", text:"Edit"},       //2nd row, 1st item
                ]},
                {type:"block", text:"Group 2", text_pos:"bottom",
                list:[{
                    //2nd block
                }]}
            ]
        }
    ]
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring Ribbon DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
    • Setting Ribbon's Size
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Configuring Ribbon

Setting Ribbon's Size

There's a possibility to set the size of the tabbar depending on its parent's size:

var myRibbon = new dhtmlXRibbon("parentId");

// if you change parent's size
document.getElementById("parentId").style.width = "800px";
document.getElementById("parentId").style.height = "600px";

// tabbar needs to be adjusted
myRibbon.setSizes();

If the ribbon is attached to another DHTMLX component, the method is called automatically.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring Tabs DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
    • Adding /Removing Tab
    • Showing/Hiding Existing Tab
    • Disabling/Enabling Tab
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Configuring Tabs

Adding /Removing Tab

To add tabs use the following configuration:

var myRibbon, data = {
    tabs : [
        {
            id : "tab_1",
            text : "tab #1",
            active : true,
            items : []
        },
        {
            id : "tab_2",
            text : "tab #2",
            items : []
        },
        {
            id : "tab_3",
            text : "tab #3",
            items : []
        }
    ]
};
myRibbon = new dhtmlXRibbon(data);

Related sample: Init from object

To remove a tab from ribbon use the close() method:

myRibbon.tabs(id).close();

Related sample: Close (remove) tab

Showing/Hiding Existing Tab

To show a tab use the show() method:

myRibbon.tabs(id).show();

To hide a tab use the hide() method:

myRibbon.tabs(id).hide();

Related sample: Show / Hide

Disabling/Enabling Tab

To disable a tab use the disable() method:

myTabbar.tabs(id).disable();

To enable a tab use the enable() method:

myTabbar.tabs(id).enable();

Related sample: Enable / Disable

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Skinning Ribbon DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Skinning Ribbon

The following predefined skins are available for dhtmlxRibbon users:

material (default)
dhx_skyblue
dhx_web
dhx_terrace

Related sample: Skins

To set a skin for Ribbon use the method setSkin().

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Font Awesome Icons in Ribbon DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Font Awesome Icons in Ribbon

You can use Font Awesome icons in dhtmlxRibbon.

This possibility can be enabled in two ways:

1) during ribbon initialization

myRibbon = new dhtmlXRibbon({
    iconset: "awesome"
});

2) after ribbon initialization, using the setIconset method:

myRibbon.setIconset("awesome");

Related sample: Font awesome

Follow the Font Awesome homepage to learn more about icons.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
    • Attaching Event Handler
    • Detaching Event Handler
    • List of supported events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Handling Events

Attaching Event Handler

The user can add any user-defined handler to available events. To do this he can use attachEvent() method with the following parameters:

  • evName - name of the event;
  • evHandler - user-defined event handler.
myRibbon.attachEvent(evName, evHandler);

Several handlers can be attached to one and the same event, and all of them will be executed.

The names of the events are case-insensitive.

Detaching Event Handler

There is a simple way of removing an event-handler:

myRibbon.detachEvent(id); // unique id of the event handler

List of supported events

You can find the full list of ribbon events in the Ribbon API.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Block Control DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
    • Attributes
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Block Control

allows combining several sense-connected items

Attributes

id | string|number | the block's id
type | string | the "block" type
text | string | the block’s label
text_pos | string | the label’s position: “top” or “bottom”
mode | boolean | defines how the user will specify the items in the block: by columns (“cols”) or by rows (“rows”)
list | array | an array of items in the block

myRibbon = new dhtmlXRibbon({
    parent: "myRibbon",
    icons_path: "../codebase/ribbon/",
    items : [
        {id : "block_1", type:'block', text:'Block #1', mode:'cols', list:[
            {type:'button', text:'Open', isbig : true, img : "48/open.gif"},
            {type:'button', text:'new' , img : "18/new.gif"},
            {type:'button', text:'cut', img : "18/cut.gif" }
        ]},
        {id : "block_2", type:'block', text:'Block #2', text_pos: 'top', list:[
            {type:'button', text:'copy' , img : "18/copy.gif"},
            {type:'button', text:'print' , img : "18/print.gif"},
            {type:'button', text:'paste', img : "48/paste.gif", isbig : true }
        ]},
        {id : "block_1", type : "block", list : [
            {type : "button", text : "save", isbig : true, img : "48/save.gif"}
        ]}
    ]
});

Related sample: Init from object

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Button Control DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
    • Attributes
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Button Control

presents a simple button:

Attributes

id | string|number | the button’s id
type | string | the "button" type
text | string | the button’s label
img | string | the icon of the button in the enabled state
imgdis | string | the icon of the button in the disabled state
isbig | boolean | defines whether the button is big or small, false by default
disable | boolean | defines whether the button is enabled or disabled, false by default

myRibbon = new dhtmlXRibbon({
  parent: "myRibbon",
  icons_path: "../codebase/ribbon/",
  items : [
    {type:'block', text:'office document', mode:'cols', list:[
      {id:"open", type:"button",text:"Open", isbig:true,img:"48/open.gif"},
      {id:"print",type:"button",text:"Quick<br/>print",img:"48/printer.png",isbig:true},
      {id:"preview",type:"button",text:"Print<br/>preview",img:"48/zoom_selection.png",
       isbig:true}
    ]}
  ]
});

Related sample: Init from object

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Checkbox Control DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
    • Attributes
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Checkbox Control

a checkbox item on the ribbon

Attributes

id | string|number | the checkbox's id
type | string | the "checkbox" type
text | string | the checkbox's label
checked | boolean | specifies whether the item will be checked initially, false by default
disable | boolean | specifies whether the item is enabled or disabled, false by default

myRibbon = new dhtmlXRibbon({
    parent: "myRibbon",
    icons_path: "../codebase/ribbon/",
    items : [
        {type: "block", text: "office document", list: [
            {type: "group", list: [
                {id: "check_box_1", type: "checkbox", text: "Check Box 1"}
            ]},
            {id:"check_box_2", type:"checkbox", "width":130},
            {id:"check_box_3", type:"checkbox", "text":"Check Box 3", value:"Any text"}
        ]}
    ]
});

Related sample: Init from object

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ButtonCombo Control DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
    • Attributes
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

ButtonCombo Control

a combobox with an autocomplete feature

Attributes

id | string|number | the buttonCombo's id
type | string | the "buttonCombo" type
text | string | the buttonCombo's label
items | array | an array of buttonCombo items
width | number | the buttonCombo's width
comboType | string | "checkbox" or "image" - allows adding check boxes or images to combo's items
comboImagePath | string | the path to the folder with buttonCombo’s images
comboDefaultImage | string | the default image of an item
comboDefaultImageDis | string | the default image of an item in the disabled state

myRibbon = new dhtmlXRibbon({
    parent: "myRibbon",
    icons_path: "../codebase/ribbon/",
    items : [
        {type:'block', text:'Block 1', mode:'cols', list:[
            {type:'buttonCombo', text:'buttonCombo 1', items : [
                {value: "1", text: "The Adventures of Tom Sawyer"},
                {value: "2", text: "The Dead Zone", selected: true},
                {value: "3", text: "The First Men in the Moon"},
                {value: "4", text: "The Girl Who Loved Tom Gordon"},
                {value: "5", text: "The Green Mile"},
                {value: "6", text: "The Invisible Man"},
                {value: "7", text: "The Island of Doctor Moreau"},
                {value: "8", text: "The Prince and the Pauper"}
            ]},

        ]}
    ]
});

Related sample: Init from object

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Group Control DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
    • Attributes
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Group Control

unites several items in a group

Attributes

id | string|number | the group's id
type | string | the "group" type
disable | boolean | defines whether a group item is enable or disabled, false by default
list | array | an array of items in the group

myRibbon = new dhtmlXRibbon({
  parent: "myRibbon",
  icons_path: "../codebase/ribbon/",
  items : [
      {type:'block', text:'office document', list:[
        {id : "group_1", type: "group", list : [
           {id: "open", type:"button", text:"Open", img: "48/open.gif"},
           {id: "print",type:"button", text:"Print", img: "48/printer.png"},
           {id: "preview",type:"button", text:"Preview", img: "48/zoom_selection.png"}
         ]},
        {id : "group_2", type : "group", list : [
           {"id":"copy","type":"buttonTwoState","text":"copy","img":"48/copy.gif"},
           {"id":"find","type":"buttonTwoState","text":"find","img":"48/page_find.png"},
           {"id":"go_to","type":"buttonTwoState","text":"go to","img":"48/tab_go.png"}
         ]},
        {id : "group_3", type : "group", list : [
           {"id":"bold", "type":"button", "text":"bold", "img":"18/text_bold.png"},
           {"id":"italic","type":"button", "text":"italic","img":"18/text_italic.png"},
           {"id":"strikethrough","type":"button","text":"strikethrough",
            "img":"18/text_strikethroungh.png"}
         ]}
       ]}
    ]
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Input Control DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
    • Attributes
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Input Control

presents a standard text input field

Attributes

id | string|number | the input's id
type | string | the "input" type
text | string | the input's label
img | string | the icon of the input in the enabled state
imgdis | string | the icon of the input in the disabled state
value | string | the initial text of the input
disabled | boolean | defines whether the input item is enabled or disabled, false by default

myRibbon = new dhtmlXRibbon({
    parent: "myRibbon",
    icons_path: "../codebase/ribbon/",
    items: [
        {type:'block', text:'office document', list:[
            {type: "group", list: [
                {id: "input_1", type:"input", text:"input 1"}
            ]}
                {"id":"input_2", "type":"input", "width":130},
                {"id":"input_3", "type":"input", "text":"input 3", value:"Any text"}
        ]}
    ]
});

Related sample: Init from object

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


NewLevel for Block DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

NewLevel for Block

allows creating a new row of items in the block (is specified by the value “rows” of the mode property)

Just write

{type:"newLevel"}

and all items that follow this line will be placed into a next row. In such a way you can create any number of rows.

Note: the mode:"cols" parameter specifies that the items of the block will be arranged into columns. In this case you don't need to define the "newLevel" item, as a new block's item will be moved to the next column after 3 items have already been added to the previous column.

myRibbon = new dhtmlXRibbon({
    parent: "myRibbon",
    icons_path: "../codebase/ribbon/",
    tabs = [
        {text : "tab 1",
        active : true,
        items : []
        },
        {text : "tab 2",
        items : [
            {type:'block', text:'Block 1', mode:'rows', list:[
                {type:'button', text:'copy' , img : "18/copy.gif"},
                {type:'button', text:'cut', img : "18/cut.gif" },
                {type:'button', text:'new' , img : "18/new.gif"},
                {type : "newLevel"},
                {type:'button', text:'open' , img : "18/open.gif"},
                {type:'button', text:'paste', img : "18/paste.gif" },
                {type : "newLevel"},
                {type:'button', text:'print', img : "18/print.gif"}
            ]}
        ]}
    ]
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ButtonSegment Control DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
    • Attributes
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

ButtonSegment Control

a horizontal control which consists of several separate buttons

Attributes

id | string|number | the button's id
type | string | the "buttonSegment" type
text | string | the button's label
img | string | the icon of the button in the enabled state
imgdis | string | the icon of the button in the disabled state
isbig | boolean | defines whether the button is big or small, false by default
disable | boolean | defines whether the button is enabled or disabled, false by default
state | boolean | defines whether the button is initially clicked, false by default

myRibbon = new dhtmlXRibbon({
  parent: "myRibbon",
  icons_path: "../codebase/ribbon/",
  items : [
    {type:'block', text:'office document', list:[
      {id : "group_1", type : "group", list : [
        {id: "open", type:"buttonSegment", text:"Open", img : "48/open.gif"},
        {id: "print",type:"buttonSegment", text:"Print" , img : "48/printer.png"},
        {id: "preview",type:"buttonSegment",text:"Preview",img:"48/zoom_selection.png"}
      ]},
      {id : "group_2", type : "group", list : [
        {"id":"copy", "type":"buttonSegment", "text":"copy", "img":"48/copy.gif"},
        {"id":"find","type":"buttonSegment","text":"find","img":"48/page_find.png",
        state:true},
        {"id":"go_to", "type":"buttonSegment", "text":"go to", "img":"48/tab_go.png"}
      ]},
      {type:"newLevel"},
      {"id":"bold", "type":"buttonSegment", "text":"bold", "img":"18/text_bold.png"},
      {"id":"italis","type":"buttonSegment","text":"italic","img":"18/text_italic.png"},
      {"id":"strikethrough","type":"buttonSegment","text":"strikethrough",
       "img":"18/text_strikethroungh.png"}
    ]}
  ]
});

Related sample: Init from object

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ButtonSelect Control DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
    • Attributes
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

ButtonSelect Control

presents a drop-down list

Attributes

id | string|number | the button’s id
type | string | the "buttonSelect" type
icons_path | string | the path to the folder with icons or global path to icons set fo Ribbon
items | array | an array of buttonSelect items

myRibbon = new dhtmlXRibbon({
 parent: "myRibbon",
 icons_path: "../codebase/ribbon/",
 items: [
   {type:'block', text:'office document', mode:'cols', list:[
     {id: "menu", type:"buttonSelect", text: "menu", img: "48/open.gif", items:[
        {id:"new",  text: "New", img: "18/new.gif"},
        {id:"sep0", type: "separator"},
        {id:"open", text: "Open", img: "18/open.gif"},
        {id:"save", text: "Save", img: "18/save.gif"}
      ]},
     {id:"buffer",type:"buttonSelect",text:"Buffer",isbig:true,img:"48/copy.gif",items:[
        {id: "copy", text:"copy", img: "18/copy.gif"},
        {id: "cut", text:"cut", img: "18/cut.gif"},
        {id: "paste", text:"paste", img: "18/paste.gif"}
      ]}
   ]}
 ]
});

Related sample: Init from object

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Slider Control DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
    • Attributes
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Slider Control

an item having a slider in it that allows the user to change item's value within the available limits (the user can drag the slider's thumb in one of two directions):

Attributes

id | string|number | the slider's id
type | string | the "slider" type
text | string | the slider's label
size | number | the slider's size
vertical | boolean | defines whether the slider is vertical, false by default
min | number | the minimal slider's value, 0 by default
max | number | the maximal slider's value, 99 by default
value | number | the initial slider's value, 0 by default
step | number | the slider's step value, 1 by default
disabled | boolean | defines whether the slider item is enabled or disabled, false by default
enableTooltip | boolean | defines whether the tooltip is enabled for the slider, false by default

myRibbon = new dhtmlXRibbon({
    parent: "myRibbon",
    icons_path: "../codebase/ribbon/",
    items : [
        {type:'block', text:'Block 1', mode:'rows', list:[
            {type:'button', text:'new' , img : "18/new.gif"},
            {type : 'slider', text : "slider 1", size : 50 },
            {type : "newLevel"},
            {type : "group", list : [
                {type:'button', text:'open' , img : "18/open.gif"},
                {type : 'slider', text : "slider 1", size : 50 }
            ]}
        ]},
        {type:'block', text:'Block 2', mode:'cols', list:[
            {type : 'slider', text : "slider 1", size : 50 },
            {type : 'slider', size : 70, isbig : true, vertical : true }
        ]}
    ]
});

Related sample: Init from object

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Text Control DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
    • Attributes
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Text Control

an item that contains some text displayed in the item display area:

Attributes

id | string|number | the text's id
type | string | the "text" type
isbig | string | defines whether the text is big, false by default
text | string | the text item’s label

myRibbon = new dhtmlXRibbon({
    parent: "myRibbon",
    icons_path: "../codebase/ribbon/",
    items : [
        {type:'block', text:'office document', list:[
            {type : "group", list : [
                {id : "text_1", type:"text", text:"Text 1"}
            ]},
                {id : "text_2", type:"text", text:"Text 2"},
                {id : "text_3", type:"text", text:"Text 3", isbig : true}
        ]}
    ]
});

Related sample: Init from object

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ButtonTwoState Control DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
    • Attributes
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

ButtonTwoState Control

a button that can remain in one of its two states until its current state is changed by user (either from script or from page):

Attributes

id | string|number | the button's id
type | string | the "buttonTwoState" type
text | string | the button's label
img | string | the icon of the button in the enabled state
imgdis | string | the icon of the button in the disabled state
isbig | boolean | defines whether the button is big or small, false by default
disable | boolean | defines whether the button is enabled or disabled, false by default
state | boolean | defines whether the button is initially clicked, false by default

myRibbon = new dhtmlXRibbon({
  parent: "myRibbon",
  icons_path: "../codebase/ribbon/",
  items : [
      {type:'block', text:'office document', mode:'cols', list:[
        {id:"open",type:"buttonTwoState",text:"Open",isbig:true,img:"48/open.gif"},
        {id:"print",type:"buttonTwoState",text:"Quick<br />print",img:"48/printer.png",
         isbig:true},
        {id:"preview",type:"buttonTwoState",text:"Print<br />preview",isbig:true,
         img:"48/zoom_selection.png"}
      ]},
      {type:'block', text:'edit', list:[
        {"id":"copy","type":"buttonTwoState","text":"copy","img":"48/copy.gif"},
        {"id":"find","type":"buttonTwoState","text":"find","img":"48/page_find.png"},
        {"id":"go_to","type":"buttonTwoState","text":"go to","img":"48/tab_go.png"}
      ]},
      {"type":"block", "text":"page setup", "list":[
        {"id":"page_setup","type":"buttonTwoState","text":"page<br />setup",
         "isbig":true,"img":"48/pencil_ruler.png"},
        {"id":"printing_area","type":"buttonTwoState","text":"printing<br />area",
         "isbig":true,"img":"48/printer_add.png"}
      ]},
  ]
});

Related sample: Init from object

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading Data from XML DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
    • Loading Data from XML File
    • Loading Data from XML String
    • XML Format Template
  • Loading Data from JSON
  • Integration with DHTMLX Components
Start Ribbon

Loading Data from XML

Loading Data from XML File

The loadStruct() method loads the ribbon data from an XML file. When the data is loaded into the object, a user-defined handler is called (onLoadFunction), if it was indicated by user. All the data is loaded at once:

myRibbon.loadStruct("[path to this file]/file.xml", onLoadFunction);
onLoadFunction = function(){
    // data loaded and rendered
    // your code here
};

The first parameter of loadStruct() method is the path to the XML file, while the second parameter is an optional user-defined handler.

Loading Data from XML String

The loadStruct() method loads ribbon data from XML string as well. When the data is loaded into the object, a user-defined handler is called. All the data is loaded at once:

myRibbon.loadStruct("<data><node id="a1".../></data>", onLoadFunction);
onLoadFunction = function(){
    // data loaded and rendered
    // your code here
};

XML Format Template

This section is created in order to give the user the idea of XML Format Template. It aims at helping users in creating XML files for dhtmlxRibbon initialization.

<ribbon>
  <tab text="tab1" active="true">
    <item type="block" text="Buttons" mode="cols">
     <item type="button" text="New" isbig="true" img="48/new.gif" imgdis="48/open.gif"/>
     <item type="button" text="copy" isbig="flae" img="18/copy.gif"/>
     <item type="button" text="cut" img="18/cut.gif"/>
     <item type="button" text="New" img="18/new.gif"/>
     <item type="button" text="open" isbig="true" img="48/open.gif"/>
     <item type="newLevel"/>
     <item type="button" text="paste" img="18/paste.gif"/>
     <item type="button" text="print" img="18/print.gif"/>
    </item>
    <item type="block" text="ButtonsTwoState" text_pos="top">
      <item type="buttonTwoState" text="new" img="18/new.gif" state="true"/>
      <item type="buttonTwoState" text="open" img="18/open.gif"/>
      <item type="buttonTwoState" text="cut" img="18/cut.gif"/>
      <item type="buttonTwoState" text="save" img="48/save.gif" isbig="true"/>
    </item>
  </tab>
  <tab text="tab2">
    <item type="block" text="mix" mode="rows" text_pos="top">
      <item type="button" text="new" img="18/new.gif"/>
      <item type="button" text="open" img="18/open.gif"/>
      <item type="newLevel"/>
      <item type="button" text="paste" img="18/paste.gif"/>
      <item type="button" text="print" img="18/print.gif"/>
      <item type="buttonTwoState" img="48/save.gif" isbig="true"/>
      <item type="button" text="cut" img="18/cut.gif"/>
      <item type="newLevel"/>
      <item type="button" text="New" img="18/new.gif"/>
      <item type="newLevel"/>
      <item type="buttonTwoState" text="open" img="18/open.gif"/>
      <item type="newLevel"/>
      <item type="buttonTwoState" text="new" img="18/new.gif" state="true"/>
    </item>
  </tab>
</ribbon>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading Data from JSON DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
    • Loading Data from JSON File
    • JSON Format Template
  • Integration with DHTMLX Components
Start Ribbon

Loading Data from JSON

Loading Data from JSON File

The loadStruct() method loads the ribbon data from a JSON file. When the data is loaded into the object, a user-defined handler is called (onLoadFunction), if it was indicated by user. All the data is loaded at once:

myRibbon.loadStruct("[path to this file]/file.json", onLoadFunction);
onLoadFunction = function(){
    // data loaded and rendered
    // your code here
};

The first parameter of loadStruct() method is the path to the JSON file, while the second parameter is an optional user-defined handler.

JSON Format Template

This section is created in order to give the user the idea of JSON Format Template. It aims at helping users in creating JSON files for dhtmlxRibbon initialization.

{
 "tabs" : [
     {"id":"tab_1",
      "text":"tab 1",
      "active":true,
      "items":[
        {
            "type":"block", "text":"File", "list":[
                {"type":"button", "text":"New", "isbig": true, "img": "48/new.gif"},
                {"type":"buttonSelect", "text":"open" , "img": "18/open.gif"},
                {"type":"button", "text":"save", "img": "18/save.gif" }
            ]
        },
        {
            "type":"block", "text":"Clipboard", "list":[
                {"type":"button", "text":"paste", "img": "48/paste.gif", "isbig":true},
                {"type":"button", "text":"copy" , "img": "18/copy.gif"},
                {"type":"button", "text":"paste", "img": "18/paste.gif"},
                {"type":"button", "text":"cut", "img": "18/cut.gif"}
            ]
        },
        {
            "type":"block", "list":[
                {"type":"button", "text":"redo", "img": "48/redo.gif", "isbig": true},
                {"type":"button", "text":"undo", "img": "48/undo.gif", "isbig": true}
            ]
        }
     ]},
     {"id":"tab_2",
      "text":"tab 2",
      "items":[
        {
            "type":"block", "text":"Block 3", "mode":"rows", "list":[
                {"type":"button", "text":"copy", "img": "18/copy.gif"},
                {"type":"button", "text":"cut", "img": "18/cut.gif" },
                {"type":"button", "text":"new", "img": "18/new.gif"},
                {"type":"newLevel"},
                {"type":"button", "text":"open", "img": "18/open.gif"},
                {"type":"button", "text":"paste", "img": "18/paste.gif" },
                {"type":"newLevel"},
                {"type":"button", "text":"print", "img": "18/print.gif"}
            ]
        }
      ]
     }
  ]
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Integration with DHTMLX Components DHTMLX Docs

Documentation
  • dhtmlXRibbon API
  • How to Start with Ribbon
  • Object Constructor
  • Configuring Ribbon
  • Configuring Tabs
  • Skinning Ribbon
  • Font Awesome Icons in Ribbon
  • Handling Events
  • Block Control
  • Button Control
  • Checkbox Control
  • ButtonCombo Control
  • Group Control
  • Input Control
  • NewLevel for Block
  • ButtonSegment Control
  • ButtonSelect Control
  • Slider Control
  • Text Control
  • ButtonTwoState Control
  • Loading Data from XML
  • Loading Data from JSON
  • Integration with DHTMLX Components
    • Attaching dhtmlxPopup component to Ribbon
    • Step 1. Initialize Ribbon
    • Step 2. Attach Popup to the Ribbon
    • Step 3. Fill the Popup with Data
    • Using dhtmlxRibbon inside DHTMLX components
Start Ribbon

Integration with DHTMLX Components

Attaching dhtmlxPopup component to Ribbon

There's a possibility to attach DHTMLX Popup component to a Ribbon's item.

Step 1. Initialize Ribbon

var myRibbon = new dhtmlXRibbon({
    parent: "myRibbon",
    icons_path: "ribbon/icons/",
    json: "ribbon/data.json"
});

Step 2. Attach Popup to the Ribbon

// init popup
var myPop = new dhtmlXPopup({
    ribbon: myRibbon,   // ribbon instance inited in step 1
    id:     "some_id"   // ribbon's button to attach a popup to
});

Step 3. Fill the Popup with Data

To learn the ways of adding various data to Popup read the chapter Attaching Content to Popup.

In this example we will add a list to Popup with the help of the attachList method:

myPop.attachList("name,price", [
    {id: 1, name: "Audi A5 Coupe", price: "€ 31,550"},
    {id: 2, name: "Audi A5 Sportback", price: "€ 30,990"},
    myPop.separator,
    {id: 3, name: "Audi A6", price: "€ 30,990"},
    {id: 4, name: "Audi A6 Avant", price: "€ 37,450"},
    {id: 5, name: "Audi A6 Quattro", price: "€ 55,360"},
    myPop.separator,
    {id: 6, name: "Audi TT Coupe", price: "€ 29,830"},
    {id: 7, name: "Audi TT RS Coupe", price: "€ 59,800"}
]);

Related sample: Attach popup

Using dhtmlxRibbon inside DHTMLX components

You have the possibility to integrate ribbon into the following components:

  • Accordion
  • Layout
  • Tabbar
  • Windows

To integrate ribbon into one of these components, call the attachRibbon method for the component. The method returns a dhtmlxRibbon object:

// attach to Layout
var myRibbon = myLayout.attachRibbon();
var myRibbon = myLayout.cells(id).attachRibbon();

// attach to Window
var myRibbon = myWins.window(id).attachRibbon();

// attach to Accordion
var myRibbon = myAcc.cells(id).attachRibbon();

// attach to Tabbar
var myRibbon = myTabbar.tabs(id).attachRibbon();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Sidebar DHTMLX Docs

Documentation
  • Sidebar
    • dhtmlXSideBar API
    • dhtmlXSideBarCell API
    • Initializing Sidebar
    • Configuring Sidebar
    • Configuring Items
    • Single Cell Mode
    • Attaching Components
    • Attaching Menu/Status Bar
    • Attaching HTML
    • Attaching URL
    • Attaching Google Maps
    • Progress Bar
    • Different Content in the Same Cell
    • Coloring Text Selection
Start

Sidebar

dhtmlxSidebar presents a handy vertical navigation menu. You can place any items into Sidebar and attach other DHTMLX components to it. By selecting an item in Sidebar, you can view its content in the right part of the component.

API reference
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
Related resources
  • You may download dhtmlxSidebar from dhtmlx.com
  • Check online samples for dhtmlxSidebar
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Working with Sidebar

  • Initializing Sidebar
  • Configuring Sidebar
  • Configuring Items
  • Single Cell Mode
 Discusses the ways of Sidebar's initialization, as well as presents the possibilities of configuring this component and its items.

Operating the Content

  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
 Describes how you can integrate Sidebar with other DHTMLX components and 3rd party components.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXSideBar API DHTMLX Docs

Documentation
  • dhtmlXSideBar API
    • Methods
    • Events
    • Others
  • dhtmlXSideBarCell API
  • Initializing Sidebar
  • Configuring Sidebar
  • Configuring Items
  • Single Cell Mode
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

dhtmlXSideBar API

Methods
addItem | adds an item to Sidebar
attachEvent | adds any user-defined handler to available events
attachFooter | attaches footer to component's bottom
attachHeader | attaches header to component's top
attachMenu | attaches dhtmlxMenu to component's top
attachRibbon | attaches dhtmlxRibbon to component's top
attachStatusBar | attaches a status bar object to component's bottom
attachToolbar | attaches dhtmlxToolbar to component's top
cells | alias for items()
clearAll | removes all items and separators from sidebar
detachEvent | detaches a handler from an event
detachFooter | detaches footer from component's bottom
detachHeader | detaches header from component's top
detachMenu | detaches dhtmlxMenu from component's top
detachRibbon | detaches dhtmlxRibbon from component's top
detachStatusBar | detaches status bar object from component's bottom
detachToolbar | detaches dhtmlxToolbar from component's top
forEachCell | alias for forEachItem()
forEachItem | an iterator, calls a user-defined handler for each item
getActiveItem | returns id of the active item
getAllItems | returns an array of the sidebar items' ids
getAttachedMenu | returns dhtmlxMenu instance attached to component's top
getAttachedRibbon | returns dhtmlxRibbon instance attached to component's top
getAttachedStatusBar | returns status bar object attached to component's bottom
getAttachedToolbar | returns dhtmlxToolbar instance attached to component's top
getNumberOfItems | returns the number of items
goToNextItem | selects the item next to the active one or the first one, if nothing is selected
goToPrevItem | selects the item prevous to the active one or the first one, if nothing's selected
hideMenu | hides dhtmlxMenu attached to component's top
hideRibbon | hides dhtmlxRibbon attached to component's top
hideSide | hides the navigation panel
hideStatusBar | hides status bar object attached to component's bottom
hideToolbar | hides dhtmlxToolbar attached to component's top
items | returns dhtmlXSideBarCell instance (sidebar's item)
loadStruct | loads data to the component via XML or JSON, usually component config
progressOff | hides progress indicator for full component
progressOn | shows progress indicator for full component
removeSep | removes a separator by id
setOffsets | sets offsets for parent container from each side
setSideWidth | sets the width of sidebar
setSizes | adjusts the size of the sidebar when the parent's size is changed
setTemplate | applies a template for sidebar
showMenu | shows dhtmlxMenu attached to component's top
showRibbon | shows dhtmlxRibbon attached to component's top
showSide | shows the navigation panel
showStatusBar | shows status bar object attached to component's bottom
showToolbar | shows dhtmlxToolbar attached to component's bottom
unload | unloads sidebar (desctructor)
Events
onBeforeSelect | fires before an item is selected, cancelable
onBubbleClick | fires on clicking on a bubble
onContentLoaded | fires when content is loaded through url or url-ajax attaching
onSelect | fires when an item is selected
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Other
templates templates collection, you need it if you plan to create a custom template
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • addItem
    • attachEvent
    • attachFooter
    • attachHeader
    • attachMenu
    • attachRibbon
    • attachStatusBar
    • attachToolbar
    • cells
    • clearAll
    • detachEvent
    • detachFooter
    • detachHeader
    • detachMenu
    • detachRibbon
    • detachStatusBar
    • detachToolbar
    • forEachCell
    • forEachItem
    • getActiveItem
    • getAllItems
    • getAttachedMenu
    • getAttachedRibbon
    • getAttachedStatusBar
    • getAttachedToolbar
    • getNumberOfItems
    • goToNextItem
    • goToPrevItem
    • hideMenu
    • hideRibbon
    • hideSide
    • hideStatusBar
    • hideToolbar
    • items
    • loadStruct
    • progressOff
    • progressOn
    • removeSep
    • setOffsets
    • setSideWidth
    • setSizes
    • setTemplate
    • showMenu
    • showRibbon
    • showSide
    • showStatusBar
    • showToolbar
    • unload
  • Events
  • Others
Start Sidebar dhtmlXSideBar API

Methods

addItem | adds an item to Sidebar
attachEvent | adds any user-defined handler to available events
attachFooter | attaches footer to component's bottom
attachHeader | attaches header to component's top
attachMenu | attaches dhtmlxMenu to component's top
attachRibbon | attaches dhtmlxRibbon to component's top
attachStatusBar | attaches a status bar object to component's bottom
attachToolbar | attaches dhtmlxToolbar to component's top
cells | alias for items()
clearAll | removes all items and separators from sidebar
detachEvent | detaches a handler from an event
detachFooter | detaches footer from component's bottom
detachHeader | detaches header from component's top
detachMenu | detaches dhtmlxMenu from component's top
detachRibbon | detaches dhtmlxRibbon from component's top
detachStatusBar | detaches status bar object from component's bottom
detachToolbar | detaches dhtmlxToolbar from component's top
forEachCell | alias for forEachItem()
forEachItem | an iterator, calls a user-defined handler for each item
getActiveItem | returns id of the active item
getAllItems | returns an array of the sidebar items' ids
getAttachedMenu | returns dhtmlxMenu instance attached to component's top
getAttachedRibbon | returns dhtmlxRibbon instance attached to component's top
getAttachedStatusBar | returns status bar object attached to component's bottom
getAttachedToolbar | returns dhtmlxToolbar instance attached to component's top
getNumberOfItems | returns the number of items
goToNextItem | selects the item next to the active one or the first one, if nothing is selected
goToPrevItem | selects the item prevous to the active one or the first one, if nothing's selected
hideMenu | hides dhtmlxMenu attached to component's top
hideRibbon | hides dhtmlxRibbon attached to component's top
hideSide | hides the navigation panel
hideStatusBar | hides status bar object attached to component's bottom
hideToolbar | hides dhtmlxToolbar attached to component's top
items | returns dhtmlXSideBarCell instance (sidebar's item)
loadStruct | loads data to the component via XML or JSON, usually component config
progressOff | hides progress indicator for full component
progressOn | shows progress indicator for full component
removeSep | removes a separator by id
setOffsets | sets offsets for parent container from each side
setSideWidth | sets the width of sidebar
setSizes | adjusts the size of the sidebar when the parent's size is changed
setTemplate | applies a template for sidebar
showMenu | shows dhtmlxMenu attached to component's top
showRibbon | shows dhtmlxRibbon attached to component's top
showSide | shows the navigation panel
showStatusBar | shows status bar object attached to component's bottom
showToolbar | shows dhtmlxToolbar attached to component's bottom
unload | unloads sidebar (desctructor)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

addItem

adds an item to Sidebar

void addItem(object|array itemConf);

Parameters

itemConf object|array object with item config (or array for several items)

Example

// initialize sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// add one new item
mySidebar.addItem({
    id: "b1",
    text:   "New Item 1",
    icon:   "image1.png"
});

// to add several items at once, use an array
mySidebar.addItem([
    {id: "b1", text: "New Item 1", icon: "image1.png"},
    {id: "b2", text: "New Item 2", icon: "image2.png"}
]);

// to add a separator, use the "type" property
mySidebar.addItem([
    {id: "b1", text: "New Item 1", icon: "image1.png"},
    {id: "b2", text: "New Item 2", icon: "image2.png"},
    {type: "separator"},
    {id: "b3", text: "New Item 3", icon: "image3.png"}
]);

Details

if you're going to remove separator by using the removeSep() method, you should also specify id for the separator

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachFooter DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

attachFooter

attaches footer to component's bottom

void attachFooter(string|number|HTMLElement id, [number height] );

Parameters

id | string|number|HTMLElement | id or DOM element
height | number | optional, footer height

Example

dhxComponent.attachFooter("my_footer");

Details

If height is not specified, component will try to detect it automatically. In this case you'd better specify it in CSS:

#my_footer {
    padding-top: 2px;
    background-color: white;
}

#my_footer .my_footer_text {
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 10px;
    height: 70px; /* for autodetect */
    border: 1px solid #a4bed4
}
<div id="my_footer">
    <div class="my_footer_text">
        Hi! I'm footer!
    </div>
</div>

You can use visibility:hidden style for keeping your element hidden while it is not attached to a component, after attaching the style will be changed to visibility:visible.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHeader DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

attachHeader

attaches header to component's top

void attachHeader(string|number|HTMLElement id, [number height] );

Parameters

id | string|number|HTMLElement | id or DOM element
height | number | optional, header height

Example

dhxComponent.attachHeader("my_header");

Details

If height is not specified, component will try to detect it automatically. In this case you'd better specify it in CSS:

#my_header {
    padding-bottom: 2px;
    background-color: white;
}

#my_header .my_header_text {
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 10px;
    height: 70px; /* for autodetect */
    border: 1px solid #a4bed4
}
<div id="my_header">
    <div class="my_header_text">
        Hi! I'm header!
    </div>
</div>

You can use visibility:hidden style for keeping your element hidden while it is not attached to component. After attaching the style will be changed to visibility:visible.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMenu DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

attachMenu

attaches dhtmlxMenu to component's top

object attachMenu( [object conf] );

Parameters

conf object optional, menu config

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.attachMenu({
    icons_path: "imgs/menu/icons/",
    json: "data/json/menu.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachRibbon DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

attachRibbon

attaches dhtmlxRibbon to component's top

object attachRibbon( [object conf] );

Parameters

conf object optional, ribbon config

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.attachRibbon({
    icons_path: "imgs/ribbon/icons/",
    json: "data/json/ribbon.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachStatusBar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

attachStatusBar

attaches a status bar object to component's bottom

object attachStatusBar( [object conf] );

Parameters

conf object optional, status bar init params

Returns

object status bar object

Example

/* conf param properties */
{
    text:   "Text", // status bar init text
    height: 20      // status bar init height
}

/* init/attach status bar */

// default behaviour
var sbObj = dhxComponent.attachStatusBar();

// with text
var sbObj = dhxComponent.attachStatusBar({text: "Loading..."});

// with text and custom height
var sbObj = dhxComponent.attachStatusBar({text: "Loading...", height: 30});

/* operations with status bar object */

// set text
sbObj.setText("Page was successfuly loaded");

// get text
var text = sbObj.getText();

Change log

conf param was added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToolbar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

attachToolbar

attaches dhtmlxToolbar to component's top

object attachToolbar( [object conf] );

Parameters

conf object optional, toolbar config

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.attachToolbar({
    icons_path: "imgs/toolbar/icons/",
    json: "data/json/toolbar.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cells DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

cells

alias for items()

dhtmlXSideBarCell cells(string|number id);

Parameters

id string|number item id

Returns

dhtmlXSideBarCell dhtmlXSideBarCell instance

Example

var cell = mySidebar.cells(id);
cell.attachHTMLString("some text here");

Details

alias for items()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearAll DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

clearAll

removes all items and separators from sidebar

void clearAll();

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// removing everything
mySidebar.clearAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachFooter DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

detachFooter

detaches footer from component's bottom

void detachFooter();

Example

dhxComponent.detachFooter();

Details

footer DOM element will be attached to body with visibility:hidden css style

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachHeader DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

detachHeader

detaches header from component's top

void detachHeader();

Example

dhxComponent.detachHeader();

Details

header DOM element will be attached to body with visibility:hidden css style

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachMenu DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

detachMenu

detaches dhtmlxMenu from component's top

void detachMenu();

Example

var myMenu = dhxComponent.attachMenu();

// detach
dhxComponent.detachMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachRibbon DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

detachRibbon

detaches dhtmlxRibbon from component's top

void detachRibbon();

Example

var myRibbon = dhxComponent.attachRibbon();

// detach
dhxComponent.detachRibbon();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachStatusBar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

detachStatusBar

detaches status bar object from component's bottom

void detachStatusBar();

Example

var sbObj = dhxComponent.attachStatusBar();

// detach
dhxComponent.detachStatusBar();
sbObj = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachToolbar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

detachToolbar

detaches dhtmlxToolbar from component's top

void detachToolbar();

Example

var myToolbar = dhxComponent.attachToolbar();

// detach
dhxComponent.detachToolbar();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachCell DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

forEachCell

alias for forEachItem()

void forEachCell(function handler);

Parameters

handler function a user-defined handler to call, item object will be passed as a param

Example

mySidebar.forEachCell(function(item){
    console.log(item.getId());
});

Details

alias for forEachItem()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

forEachItem

an iterator, calls a user-defined handler for each item

void forEachItem(function handler);

Parameters

handler function a user-defined handler to call, item object will be passed as a param

Example

mySidebar.forEachItem(function(item){
    console.log(item.getId());
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getActiveItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

getActiveItem

returns id of the active item

string|number getActiveItem();

Returns

string|number the items's id or null if the item is not selected

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// get the active item
var actvId = mySidebar.getActiveItem();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllItems DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

getAllItems

returns an array of the sidebar items' ids

array getAllItems();

Returns

array array with items ids

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// get a list of items
var ids = mySidebar.getAllItems(); // -> ["a1", "a2"]

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedMenu DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

getAttachedMenu

returns dhtmlxMenu instance attached to component's top

dhtmlXMenuObject getAttachedMenu();

Returns

dhtmlXMenuObject dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.attachMenu();

// somewhere in other place
var attachedMenu = dhxComponent.getAttachedMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedRibbon DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

getAttachedRibbon

returns dhtmlxRibbon instance attached to component's top

dhtmlXRibbon getAttachedRibbon();

Returns

dhtmlXRibbon dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.attachRibbon();

// somewhere in other place
var attachedRibbon = dhxComponent.getAttachedRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedStatusBar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

getAttachedStatusBar

returns status bar object attached to component's bottom

object getAttachedStatusBar();

Returns

object StatusBar instance

Example

var myStatusBar = dhxComponent.attachStatusBar();

// somewhere in other place
var attachedStatusBar = dhxComponent.getAttachedStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedToolbar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

getAttachedToolbar

returns dhtmlxToolbar instance attached to component's top

dhtmlXToolbarObject getAttachedToolbar();

Returns

dhtmlXToolbarObject dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.attachToolbar();

// somewhere in other place
var attachedToolbar = dhxComponent.getAttachedToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getNumberOfItems DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

getNumberOfItems

returns the number of items

number getNumberOfItems();

Returns

number number of items

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// get the number of items
var itemsCount = mySidebar.getNumberOfItems(); // -> 2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


goToNextItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

goToNextItem

selects the item next to the active one or the first one, if nothing is selected

void goToNextItem(boolean callEvent);

Parameters

callEvent boolean set to 'true' to call onBeforeSelect/onSelect events

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png"},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// onSelect event callback
mySidebar.attachEvent("onSelect", function(id){
    // init cell or other action
});

// select 1st item and call event
mySidebar.goToNextItem(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


goToPrevItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

goToPrevItem

selects the item prevous to the active one or the first one, if nothing's selected

void goToPrevItem(boolean callEvent);

Parameters

callEvent boolean set to 'true' to call onBeforeSelect/onSelect events

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png"},
        {id: "a2", text: "Item 2", icon: "image2.png", selected: true}
    ]
});

// select a1
mySidebar.goToNextItem();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMenu DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

hideMenu

hides dhtmlxMenu attached to component's top

void hideMenu();

Example

dhxComponent.hideMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideRibbon DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

hideRibbon

hides dhtmlxRibbon attached to component's top

void hideRibbon();

Example

dhxComponent.hideRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideSide DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

hideSide

hides the navigation panel

void hideSide();

Example

mySidebar.hideSide();

Change log

added in version 4.5

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideStatusBar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

hideStatusBar

hides status bar object attached to component's bottom

void hideStatusBar();

Example

dhxComponent.hideStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideToolbar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

hideToolbar

hides dhtmlxToolbar attached to component's top

void hideToolbar();

Example

dhxComponent.hideToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


items DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

items

returns dhtmlXSideBarCell instance (sidebar's item)

dhtmlXSideBarCell items(string|number id);

Parameters

id string|number item id

Returns

dhtmlXSideBarCell dhtmlXSideBarCell instance

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// getting item
var item = mySidebar.items("a1");

// attaching something
var myGrid = item.attachGrid();

// the same but shorter
var myGrid = mySidebar.items("a1").attachGrid();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadStruct DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

loadStruct

loads data to the component via XML or JSON, usually component config

promise loadStruct(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.loadStruct('<data><node id="a1".../></data>');

// json/xml from server
myComponent.loadStruct("server/data.xml");

// local json/xml with callback
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.loadStruct('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.loadStruct("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.loadStruct(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure response has the header "Content-Type: text/xml" for XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOff DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

progressOff

hides progress indicator for full component

void progressOff();

Example

dhxComponent.progressOff();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOn DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

progressOn

shows progress indicator for full component

void progressOn();

Example

dhxComponent.progressOn();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


removeSep DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

removeSep

removes a separator by id

void removeSep(string|number id);

Parameters

id string|number id of the separator to remove

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"},
        {id: "sep1", type: "separator"},
        {id: "a3", text: "Item 3", icon: "image3.png"}
    ]
});

// removing the separator
mySidebar.removeSep("sep1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOffsets DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

setOffsets

sets offsets for parent container from each side

void setOffsets(object conf);

Parameters

conf object offsets config

Example

// init component
var myComponent = new dhtmlXComponent(...);

// setting offsets for parent container
// this also works for document.body init
myComponent.setOffsets({
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
});

// also you can specify offset only for a single direction
myComponent.setOffsets({
    bottom: 10
});

// or for several directions
myComponent.setOffsets({
    right: 10,
    left: 10
});

Change log

added in 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSideWidth DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

setSideWidth

sets the width of sidebar

void setSideWidth(number width);

Parameters

width number width of the sidebar in pixels

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// change width
mySidebar.setSideWidth(200);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSizes DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

setSizes

adjusts the size of the sidebar when the parent's size is changed

void setSizes();

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// if you change parent's size
document.getElementById("parentId").style.width = "800px";
document.getElementById("parentId").style.height = "600px";

// sidebar needs to be adjusted
mySidebar.setSizes();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setTemplate DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

setTemplate

applies a template for sidebar

void setTemplate(string template,string iconsPath);

Parameters

template | string | template name
iconsPath | string | path to the folder with icons (optional)

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// change template on the fly
mySidebar.setTemplate("tiles", "icons/32x32/");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMenu DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

showMenu

shows dhtmlxMenu attached to component's top

void showMenu();

Example

dhxComponent.showMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRibbon DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

showRibbon

shows dhtmlxRibbon attached to component's top

void showRibbon();

Example

dhxComponent.showRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showSide DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

showSide

shows the navigation panel

void showSide();

Example

mySidebar.showSide();

Change log

added in version 4.5

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showStatusBar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

showStatusBar

shows status bar object attached to component's bottom

void showStatusBar();

Example

dhxComponent.showStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showToolbar DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

showToolbar

shows dhtmlxToolbar attached to component's bottom

void showToolbar();

Example

dhxComponent.showToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • forEachCell
  • forEachItem
  • getActiveItem
  • getAllItems
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getNumberOfItems
  • goToNextItem
  • goToPrevItem
  • hideMenu
  • hideRibbon
  • hideSide
  • hideStatusBar
  • hideToolbar
  • items
  • loadStruct
  • progressOff
  • progressOn
  • removeSep
  • setOffsets
  • setSideWidth
  • setSizes
  • setTemplate
  • showMenu
  • showRibbon
  • showSide
  • showStatusBar
  • showToolbar
  • unload
Start Sidebar dhtmlXSideBar API Methods

unload

unloads sidebar (desctructor)

void unload();

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// unloading
mySidebar.unload();
mySidebar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onBeforeSelect
    • onBubbleClick
    • onContentLoaded
    • onSelect
    • onXLE
    • onXLS
  • Others
Start Sidebar dhtmlXSideBar API

Events

onBeforeSelect | fires before an item is selected, cancelable
onBubbleClick | fires on clicking on a bubble
onContentLoaded | fires when content is loaded through url or url-ajax attaching
onSelect | fires when an item is selected
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeSelect DHTMLX Docs

Documentation
  • onBeforeSelect
  • onBubbleClick
  • onContentLoaded
  • onSelect
  • onXLE
  • onXLS
Start Sidebar dhtmlXSideBar API Events

onBeforeSelect

fires before an item is selected, cancelable

boolean onBeforeSelect(string id,string lastId){ ... };

Parameters

id | string | id of the item to select
lastId | string | id of the previously selected item, if any

Returns

boolean true|false to allow/cancel selection

Example

mySidebar.attachEvent("onBeforeSelect", function(id, lastId){
    // your code here
    return true;
});

Related samples

  • onSelect/onBeforeSelect events
Details

return true|false to allow/cancel selection

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBubbleClick DHTMLX Docs

Documentation
  • onBeforeSelect
  • onBubbleClick
  • onContentLoaded
  • onSelect
  • onXLE
  • onXLS
Start Sidebar dhtmlXSideBar API Events

onBubbleClick

fires on clicking on a bubble

boolean onBubbleClick(string|number id,string|number content){ ... };

Parameters

id | string|number | the id of the sidebar's item
content | string|number | the bubble's content

Returns

boolean true to allow item selection

Example

mySidebar.attachEvent("onBubbleClick", function(id, content){
    // your code here
});

Related samples

  • Bubbles
See also
  • API
    • getBubble
    • setBubble
    • clearBubble
  • Articles
    • Configuring Sidebar
    • Change log

    added in 4.3

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


onContentLoaded DHTMLX Docs

Documentation
  • onBeforeSelect
  • onBubbleClick
  • onContentLoaded
  • onSelect
  • onXLE
  • onXLS
Start Sidebar dhtmlXSideBar API Events

onContentLoaded

fires when content is loaded through url or url-ajax attaching

void onContentLoaded(string|number id){ ... };

Parameters

id string|number item id

Example

mySidebar.attachEvent("onContentLoaded", function(id){
    // your code here
});

Related samples

  • onContentLoaded event
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelect DHTMLX Docs

Documentation
  • onBeforeSelect
  • onBubbleClick
  • onContentLoaded
  • onSelect
  • onXLE
  • onXLS
Start Sidebar dhtmlXSideBar API Events

onSelect

fires when an item is selected

void onSelect(string|number id,string|number lastId){ ... };

Parameters

id | string|number | id of the selected item
lastId | string|number | id of the previously active item, if any

Example

mySidebar.attachEvent("onSelect", function(id, lastId){
    // your code here
});

Related samples

  • onSelect/onBeforeSelect events
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onBeforeSelect
  • onBubbleClick
  • onContentLoaded
  • onSelect
  • onXLE
  • onXLS
Start Sidebar dhtmlXSideBar API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onBeforeSelect
  • onBubbleClick
  • onContentLoaded
  • onSelect
  • onXLE
  • onXLS
Start Sidebar dhtmlXSideBar API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • templates
Start Sidebar dhtmlXSideBar API

Others

templates templates collection, you need it if you plan to create a custom template
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


templates DHTMLX Docs

Documentation
  • templates
Start Sidebar dhtmlXSideBar API Others

templates

templates collection, you need it if you plan to create a custom template

object templates;

Related samples

  • Template [details]
  • Template [tiles]
  • Template [icons]
  • Template [icons_text]
  • Template [text]
Details

The default templates are: details, tiles, icons, icons_text, text (see the related samples)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXSideBarCell API DHTMLX Docs

Documentation
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
    • Methods
  • Initializing Sidebar
  • Configuring Sidebar
  • Configuring Items
  • Single Cell Mode
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

dhtmlXSideBarCell API

Methods
appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachEvent | adds any user-defined handler to available events
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
clearBubble | removes a bubble
detachEvent | detaches a handler from an event
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getBubble | returns the content of a bubble
getFrame | returns an iframe object when an URL is attached to a cell
getHeaderText | returns the header text of a particular item
getId | returns the id of a cell
getText | returns the text of an item
getViewName | returns the name of the current view
hide | hides the specified item
hideHeader | hides cell's header
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
isActive | returns the item's active/inactive state
isHeaderVisible | checks if the cell's header is visible
isVisible | returns the item's visible/hidden state
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
remove | removes the specified item
setActive | selects the specified item
setBubble | sets a bubble
setHeaderText | sets a header text for an item
setText | sets the text of an item
show | shows the specified item
showHeader | shows cell's header
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
unloadView | unloads the specified view
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • appendObject
    • attachAccordion
    • attachCarousel
    • attachChart
    • attachDataView
    • attachEditor
    • attachEvent
    • attachForm
    • attachGrid
    • attachHTMLString
    • attachLayout
    • attachList
    • attachMap
    • attachMenu
    • attachObject
    • attachRibbon
    • attachScheduler
    • attachSidebar
    • attachStatusBar
    • attachTabbar
    • attachToolbar
    • attachTree
    • attachTreeView
    • attachURL
    • attachVault
    • clearBubble
    • detachEvent
    • detachMenu
    • detachObject
    • detachRibbon
    • detachStatusBar
    • detachToolbar
    • getAttachedMenu
    • getAttachedObject
    • getAttachedRibbon
    • getAttachedStatusBar
    • getAttachedToolbar
    • getBubble
    • getFrame
    • getHeaderText
    • getId
    • getText
    • getViewName
    • hide
    • hideHeader
    • hideMenu
    • hideRibbon
    • hideStatusBar
    • hideToolbar
    • isActive
    • isHeaderVisible
    • isVisible
    • progressOff
    • progressOn
    • reloadURL
    • remove
    • setActive
    • setBubble
    • setHeaderText
    • setText
    • show
    • showHeader
    • showInnerScroll
    • showMenu
    • showRibbon
    • showStatusBar
    • showToolbar
    • showView
    • unloadView
Start Sidebar dhtmlXSideBarCell API

Methods

appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachEvent | adds any user-defined handler to available events
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
clearBubble | removes a bubble
detachEvent | detaches a handler from an event
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getBubble | returns the content of a bubble
getFrame | returns an iframe object when an URL is attached to a cell
getHeaderText | returns the header text of a particular item
getId | returns the id of a cell
getText | returns the text of an item
getViewName | returns the name of the current view
hide | hides the specified item
hideHeader | hides cell's header
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
isActive | returns the item's active/inactive state
isHeaderVisible | checks if the cell's header is visible
isVisible | returns the item's visible/hidden state
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
remove | removes the specified item
setActive | selects the specified item
setBubble | sets a bubble
setHeaderText | sets a header text for an item
setText | sets the text of an item
show | shows the specified item
showHeader | shows cell's header
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
unloadView | unloads the specified view
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


appendObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

appendObject

attaches an object to a cell without clearing cell content

void appendObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

dhxComponent.cells(id).appendObject("div_a");
dhxComponent.cells(id).appendObject("div_b");
dhxComponent.cells(id).appendObject("div_c");

Details

  • style "display:none" will be removed automatically after attaching, it's useful to keep content hidden while not attached

  • for this mode a cell will add scrolls automatically, there's no need to specify width/height to the attached object (divs without specified dimension are usually stretched to 100% of width and height adjusted to content)

<div id="div_a" style="display:none;"> ... </div>
<div id="div_b"> ... </div>
<div id="div_c"> ... </div>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachAccordion DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachAccordion

attaches dhtmlxAccordion to a cell

dhtmlXAccordion attachAccordion( [object conf] );

Parameters

conf object optional, accordion config for object-api init

Returns

dhtmlXAccordion dhtmlXAccordion instance

Example

var myAcc = dhxComponent.cells(id).attachAccordion();
myAcc.addItem("a1", "First item", true);
myAcc.addItem("a2", "Second item");

// or
var myAcc = dhxComponent.cells(id).attachAccordion({
    icons_path: "icons/",
    items: [
        { id: "a1", text: "Main Page", icon: "flag_red.png" },
        { id: "a2", text: "Navigation", icon: "flag_green.png" },
        { id: "a3", text: "Feedback", icon: "flag_blue.png" }
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachCarousel DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachCarousel

attaches a carousel object to a cell

object attachCarousel(number width,number height, [object conf] );

Parameters

width | number | the width of a carousel
height | number | the height of a carousel
conf | object | optional, the config of a carousel for object-api init

Returns

object dhtmlXCarousel instance

Example

var myCarousel = dhxComponent.cells(id).attachCarousel(400, 300, conf){
    ...
});

Change log

added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachChart DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachChart

attaches dhtmlxChart to a cell

dhtmlXChart attachChart(object conf);

Parameters

conf object chart conf (please, check chart docs for details)

Returns

dhtmlXChart dhtmlXChart instance

Example

var myChart = dhxComponent.cells(id).attachChart({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachDataView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachDataView

attaches dhtmlxDataView to a cell

dhtmlXDataView attachDataView(object conf);

Parameters

conf object dataview conf (please, check DataView docs for details)

Returns

dhtmlXDataView dhtmlXDataView instance

Example

var myDataView = dhxComponent.cells(id).attachDataView({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEditor DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachEditor

attaches dhtmlxEditor to a cell

dhtmlXEditor attachEditor();

Returns

dhtmlXEditor dhtmlXEditor instance

Example

var myEditor = dhxComponent.cells(id).attachEditor({
    // editor config here
});

Details

For details about Editor initialization, read the Object Constructor article.

More info about attaching Editor to other components is given in the article Adding Editor to DHTMLX Components.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachForm DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachForm

attaches dhtmlxForm to a cell

dhtmlXForm attachForm(object conf);

Parameters

conf object form conf (please, check form docs for details)

Returns

dhtmlXForm dhtmlXForm instance

Example

var myForm = dhxComponent.cells(id).attachForm({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachGrid DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachGrid

attaches dhtmlxGrid to a cell

dhtmlXGridObject attachGrid( [object config] );

Parameters

config object optional, an object with the Grid configuration

Returns

dhtmlXGridObject dhtmlXGridObject instance

Example

// without parameters
var myGrid = dhxComponent.cells(id).attachGrid();

// passing a config object as a parameter
grid1 = myLayout.cells("a").attachGrid({
    image_path:'codebase/imgs/',
    columns: [{
        label: "Column A",
        width: 100,
        type: "ro",
        sort: "int",
        align: "right"
    },{
        label: "Column B",
        width: 250,
        type: "ed",
        sort: "str",
        align: "left"
    }],
    multiselect: true,
    xml: "grid.xml"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHTMLString DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachHTMLString

attaches HTML content to a cell

void attachHTMLString(string htmlString);

Parameters

htmlString string an HTML string to attach

Example

dhxComponent.cells(id).attachHTMLString("<div>some content</div>");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachLayout DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachLayout

attaches dhtmlxLayout to a cell

dhtmlXLayoutObject attachLayout(string|object conf);

Parameters

conf string|object layout pattern or api-init config

Returns

dhtmlXLayoutObject dhtmlXLayoutObject instance

Example

// pattern only
var myLayout = dhxComponent.cells(id).attachLayout("4H");

// api-init config
var myLayout = dhxComponent.cells(id).attachLayout({
    pattern: "4H",
    cells: [
        {id: "a", text: "Navigation", width: 100, header: false},
        {id: "b", text: "Advertisement", height: 100},
        {id: "c", text: "Main Page"},
        {id: "d", text: "Links", collapse: true}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachList DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachList

attaches dhtmlxList to a cell

dhtmlXList attachList(object conf);

Parameters

conf object list conf (please, check List docs for details)

Returns

dhtmlXList dhtmlXList instance

Example

var myList = dhxComponent.cells(id).attachList({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMap DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachMap

attaches Google Maps to a cell

object attachMap( [object opts] );

Parameters

opts object optional, map options (please, check Google docs for details)

Returns

object google.maps.Map object

Example

var GMaps = dhxLayout.cells(id).attachMap();
//or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = dhxLayout.cells(id).attachMap(mapParams);

Details

Please, check Google docs for details.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachMenu

attaches dhtmlxMenu to a cell

object attachMenu( [object conf] );

Parameters

conf object optional, menu config

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.cells(id).attachMenu({
    icons_path: "imgs/menu/icons/",
    json: "data/json/menu.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachObject

attaches an HTML object to a cell

void attachObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

dhxComponent.cells(id).attachObject("objectId");

Details
  • style "display:none" (if set) will be removed automatically after attaching, useful to keep content hidden while not attached
<div id="objectId" style="display: none;">...</div>
  • for this mode cell will not render native scrolls, so you need to use the following style: "width: 100%; height: 100%; overflow: auto;" to make attached object's scrolls appear when necessary
div#objectId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}
See also
  • API
    • detachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


attachRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachRibbon

attaches dhtmlxRibbon to a cell

object attachRibbon( [object conf] );

Parameters

conf object optional, ribbon config

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.cells(id).attachRibbon({
    icons_path: "imgs/ribbon/icons/",
    json: "data/json/ribbon.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachScheduler DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachScheduler

attaches dhtmlxScheduler to a cell

object attachScheduler( [Date day,string mode,string contId,object scheduler] );

Parameters

day | Date | (optional) js date object, initial date in scheduler, current date by default
mode | string | (optional) name of the initial mode ("month", "day", "week"), "week" by default
contId | string | (optional) extended config, please see below
scheduler | object | (optional) dhtmlxScheduler object (another instance, only PRO version of scheduler)

Returns

object dhtmlXScheduler instance

Example

var myScheduler = dhxComponent.cells(id).attachScheduler();

// or
var myScheduler = dhxComponent.cells(id).attachScheduler(null, "month");

//or
var sTabs = '<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>'+
            '<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>'+
            '<div class="dhx_cal_tab" name="month_tab" style="right:280px;"></div>'+
            '<div class="dhx_cal_tab" name="timeline_tab" style="right:76px;"></div>';

var myScheduler = dhxComponent.cells(id).attachScheduler(null, "month", sTabs);

Details

There are two possible values of the contId parameter:

  • the id of the div that specifies the entire scheduler configuration
  • a string with the tabs' divs. In this case a scheduler will be rendered with the default configuration, except for the tabs: they can be presented by the default "day", "week", "month" members or by any other tabs' collection
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachSidebar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachSidebar

attaches dhtmlxSidebar to a cell

object attachSidebar( [object conf] );

Parameters

conf object optional, sidebar config for api-init

Returns

object dhtmlxSidebar instance

Example

var mySidebar = dhxComponent.cells(id).attachSidebar({
    items: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachStatusBar

attaches a status bar to a cell

obj attachStatusBar( [object conf] );

Parameters

conf object optional, status bar init params

Returns

obj status bar object

Example

/* conf param properties */
{
    text:   "Text", // status bar init text
    height: 20,     // status bar init height
    paging: true    // (optional) true to use for grid paging
}

/* init/attach status bar */

// default behavior
var sbObj = dhxComponent.cells(id).attachStatusBar();

// with text
var sbObj = dhxComponent.cells(id).attachStatusBar({text: "Loading..."});

// with text and custom height
var sbObj = dhxComponent.cells(id).attachStatusBar({text: "Loading...", height: 30});

/* operations with status bar object */

// set text
sbObj.setText("Page was successfully loaded");

// get text
var text = sbObj.getText();

Details

Since version 4.1 toolbar can be attached into statusbar in order to be used for paging in grid:

// first attach status bar
dhxComponent.cells(id).attachStatusBar({
    text:   "<div id='pagingArea'></div>",
    paging: true
});

// then init paging in grid
myGrid.enablePaging(true, 9, 3, "pagingArea");
myGrid.setPagingSkin("toolbar");
Change log
  • conf param was added in version 4.0
  • paging:true added in 4.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTabbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachTabbar

attaches dhtmlxTabbar to a cell

object attachTabbar( [object conf] );

Parameters

conf object optional, tabbar config for API-initialization

Returns

object dhtmlXTabbar instance

Example

var myTabbar = dhxComponent.cells(id).attachTabbar({
    align: "right",
    mode: "bottom",
    tabs: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Details

The old parameter used for tabbar initialization - "mode" is deprecated since version 4.0 and is replaced with "conf".

To set the tabs mode, use conf.mode:

// old deprecated
var myTabbar = dhxComponent.cells(id).attachTabbar("bottom");
// new usage
var myTabbar = dhxComponent.cells(id).attachTabbar({mode:"bottom"});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachToolbar

attaches dhtmlxToolbar to a cell

object attachToolbar( [object conf] );

Parameters

conf object optional, toolbar config

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.cells(id).attachToolbar({
    icons_path: "imgs/toolbar/icons/",
    json: "data/json/toolbar.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTree DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachTree

attaches dhtmlxTree to a cell

object attachTree( [string|number rootId] );

Parameters

rootId string|number (optional) tree root id (check Tree docs for details)

Returns

object dhtmlXTreeObject instance

Example

var myTree = dhxComponent.cells(id).attachTree();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTreeView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachTreeView

attaches dhtmlxTreeView to a cell

object attachTreeView( [object conf] );

Parameters

conf object optional, treeview config

Returns

object dhtmlXTreeViewObject instance

Example

var myTreeView = dhxComponent.cells(id).attachTreeView({
    items: [
        {id: 1, text: "Books", open: 1, items: [
            {id: 2, text: "Turned at Dark / C. C. Hunter"},
            {id: 3, text: "Daire Meets Ever / Alyson Noël"}
        ]}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachURL DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachURL

attaches the specified URL to a cell

void attachURL(string url, [boolean ajax,boolean|object postData] );

Parameters

url | string | URL to attach
ajax | boolean | (optional) if set to true, the URL will be loaded by AJAX (async GET), false by default
postData | boolean|object | (optional) performs POST request (true for a simple post or an object with params)

Example

/* iframe */
// GET
dhxComponent.cells(id).attachURL("page.html");
// POST
dhxComponent.cells(id).attachURL("page.html", null, true);
// POST with params
dhxComponent.cells(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

/* by ajax */
// GET
dhxComponent.cells(id).attachURL("page.html", true);
// POST
dhxComponent.cells(id).attachURL("page.html", true, true);
// POST with params
dhxComponent.cells(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Details

important notes:

  • to prevent caching in some browsers, an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • loading is async, so to proceed with content, you need onContentLoaded event
  • learn how to control attached content here
Change log

postData param and the ability to perform POST request are added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachVault DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

attachVault

attaches dhtmlxVault to a cell

dhtmlXVaultObject attachVault(object conf);

Parameters

conf object Vault config for object-api initialization

Returns

dhtmlXVaultObject dhtmlxVault instance

Example

var myVault = dhxComponent.cells(id).attachVault({
    uploadUrl:      "http://my_mega_server/upload_handler.php",
    swfUrl:         "http://my_mega_server/upload_handler.php",
    slUrl:          "http://my_mega_server/upload_handler.php",
    swfPath:        "dhxvault.swf",
    slXap:          "dhxvault.xap"
});

Details

if separate component files are used - dhtmlxvault.js should be included after dhtmlxcontainer.js

Change log

added in 3.6.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearBubble DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

clearBubble

removes a bubble

void clearBubble();

Example

mySidebar.cells(id).clearBubble();

Related samples

  • Bubbles
See also
  • API
    • setBubble
    • getBubble
    • onBubbleClick
  • Articles
    • Configuring Sidebar
    • Change log

    added in 4.3

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

detachMenu

detaches dhtmlxMenu from a cell

void detachMenu();

Example

var myMenu = dhxComponent.cells(id).attachMenu();

// detach
dhxComponent.cells(id).detachMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

detachObject

detaches any attached content from a cell

void detachObject( [boolean remove,string|number|HTMLElement moveTo] );

Parameters

remove | boolean | (optional) set to true to remove the content permanently, false by default
moveTo | string|number|HTMLElement | (optional) the object's id or the object itself to move content to (if the "remove" parameter is set to false)
Details

Let's consider possible behavior, depending on which we pass particular parameters to the method.

Assuming that we have attached Grid to the component's cell:

var myGrid = dhxComponent.cells(id).attachGrid();

In case we need to detach Grid later, there are several possible options:

1) calling the detachObject() method without parameters:

dhxComponent.cells(id).detachObject();

The Grid object won't be completely removed. It will be attached to the document.body outside the component's container and hidden with the display:none property.

2) calling the detachObject() method with the "remove" parameter set to true:

dhxComponent.cells(id).detachObject(true);

The cell will be cleared. You need to clear the Grid object to remove it permanently.

myGrid = null;

3) calling the detachObject() method with the "remove" parameter set to false and passing an object (object's id) as the second parameter:

// assuming that a node with the id="tempNode" exists
dhxComponent.cells(id).detachObject(false, "tempNode");

The Grid object won't be completely removed. It will be moved to the "tempNode" container and hidden with the display:none property.

Note also that if you call dhxComponent.unload(), the attached content will be removed permanently.

See also
  • API
    • attachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


detachRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

detachRibbon

detaches dhtmlxRibbon from a cell

void detachRibbon();

Example

var myRibbon = dhxComponent.cells(id).attachRibbon();

// detach
dhxComponent.cells(id).detachRibbon();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

detachStatusBar

detaches status bar from a cell

void detachStatusBar();

Example

var sbObj = dhxComponent.cells(id).attachStatusBar();

// detach
dhxComponent.cells(id).detachStatusBar();
sbObj = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

detachToolbar

detaches dhtmlxToolbar from a cell

void detachToolbar();

Example

var myToolbar = dhxComponent.cells(id).attachToolbar();

// detach
dhxComponent.cells(id).detachToolbar();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

getAttachedMenu

returns dhtmlxMenu instance attached to a cell

object getAttachedMenu();

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.cells(id).attachMenu();

// somewhere in a different place
var attachedMenu = dhxComponent.cells(id).getAttachedMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

getAttachedObject

returns the object attached to a cell

string|object getAttachedObject();

Returns

string|object attached object

Example

var myGrid = dhxComponent.cells(id).attachGrid({...});

// somewhere in other place
var obj = dhxComponent.cells(id).getAttachedObject();
if (typeof(window.dhtmlXGridObject) == "function" && obj instanceof dhtmlXGridObject) {
    // code related to grid
} else {
    // some other code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

getAttachedRibbon

returns dhtmlxRibbon instance attached to a cell

object getAttachedRibbon();

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.cells(id).attachRibbon();

// somewhere in other place
var attachedRibbon = dhxComponent.cells(id).getAttachedRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

getAttachedStatusBar

returns status bar object attached to a cell

object getAttachedStatusBar();

Returns

object status bar instance

Example

var myStatusBar = dhxComponent.cells(id).attachStatusBar();

// somewhere in a different place
var attachedStatusBar = dhxComponent.cells(id).getAttachedStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

getAttachedToolbar

returns dhtmlxToolbar instance attached to a cell

object getAttachedToolbar();

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.cells(id).attachToolbar();

// somewhere in a different  place
var attachedToolbar = dhxComponent.cells(id).getAttachedToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getBubble DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

getBubble

returns the content of a bubble

string|number getBubble();

Returns

string|number bubble's content

Example

var content = mySidebar.cells(id).getBubble();

Related samples

  • Bubbles
See also
  • API
    • setBubble
    • clearBubble
    • onBubbleClick
  • Articles
    • Configuring Sidebar
    • Change log

    added in 4.3

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


getFrame DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

getFrame

returns an iframe object when an URL is attached to a cell

HTMLElement getFrame();

Returns

HTMLElement an iframe object

Example

// as loading is async, you need to do it through an event
dhxComponent.attachEvent("onContentLoaded", function(id){

    // get frame
    var ifr = dhxComponent.cells(id).getFrame();

    // access to iframe's element
    var elem = ifr.contentWindow.document.getElementById("someId");
    elem.innerHTML = "some text";

    // access to iframe's function
    // make sure that the function is in the iframe's window scope
    ifr.contentWindow.someFunc();

});

// and then attach an URL
dhxComponent.cells(id).attachURL("server/page.php?param=value");

Details

You can learn how to manage the attached content from the article Attaching URL.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getHeaderText DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

getHeaderText

returns the header text of a particular item

string getHeaderText();

Returns

string the header text of an item

Example

var header = mySidebar.cells(id).getHeaderText();

Change log

added in version 4.5

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getId DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

getId

returns the id of a cell

string|number getId();

Returns

string|number the cell's id

Example

dhxComponent.forEachCell(function(cell){
    var id = cell.getId();
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getText DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

getText

returns the text of an item

string getText();

Returns

string the text of an item

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// getting text of an item
var text = mySidebar.items(id).getText();
// -> {text:"new text",icon:"new_icong.png", ...}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getViewName DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

getViewName

returns the name of the current view

string getViewName();

Returns

string view name

Example

var name = dhxComponent.cells(id).getViewName();

Details

The default view name is "def", it is created automatically when a cell is created

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hide DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

hide

hides the specified item

void hide( [string|boolean actvId] );

Parameters

actvId string|boolean (optional) if the specified item is selected, selects another item, true by default

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"},
        {id: "a3", text: "Item 3", icon: "image3.png"}
    ]
});

mySidebar.items("a1").hide(); // hide a1 and select a2
// or
mySidebar.items("a1").hide("a3"); // hide a1 and select a3
// or
mySidebar.items("a1").hide(false); // hide a1 and do not select any item

Details

if actvId is set to true - tries to select the nearest item, false - selects nothing. You can also specify id of the item to be selected.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideHeader DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

hideHeader

hides cell's header

void hideHeader();

Example

mySidebar.cells(id).hideHeader();

Change log

added in version 4.5

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

hideMenu

hides dhtmlxMenu attached to a cell

void hideMenu();

Example

dhxComponent.cells(id).hideMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

hideRibbon

hides dhtmlxRibbon attached to a cell

void hideRibbon();

Example

dhxComponent.cells(id).hideRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

hideStatusBar

hides status bar object attached to a cell

void hideStatusBar();

Example

dhxComponent.cells(id).hideStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

hideToolbar

hides dhtmlxToolbar attached to a cell

void hideToolbar();

Example

dhxComponent.cells(id).hideToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isActive DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

isActive

returns the item's active/inactive state

boolean isActive();

Returns

boolean true|false, if an item is active/inactive

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// getting the item's state
var isActv = mySidebar.items("a1").isActive();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isHeaderVisible DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

isHeaderVisible

checks if the cell's header is visible

boolean isHeaderVisible();

Returns

boolean true, if the header is visible, false otherwise

Example

var isVisible = mySidebar.cells(id).isHeaderVisible();

Change log

added in version 4.5

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isVisible DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

isVisible

returns the item's visible/hidden state

boolean isVisible();

Returns

boolean true|false, if an item is visible/hidden

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// getting the item's state
var isVis = mySidebar.items("a1").isVisible();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOff DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

progressOff

hides the progress indicator in a cell

void progressOff();

Example

dhxComponent.cells(id).progressOff();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOn DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

progressOn

shows the progress indicator in a cell

void progressOn();

Example

dhxComponent.cells(id).progressOn();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


reloadURL DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

reloadURL

reloads the attached URL in a cell

void reloadURL();

Example

dhxComponent.cells(id).reloadURL();

Details

reloads both iFrame/AJAX attached, keeps postData and params, if any

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


remove DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

remove

removes the specified item

void remove(string|number|boolean actvId);

Parameters

actvId string|number|boolean (optional) if the specified item is selected, selects another item, true by default

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"},
        {id: "a3", text: "Item 3", icon: "image3.png"}
    ]
});

mySidebar.items("a1").remove(); // remove a1 and select a2
// or
mySidebar.items("a1").remove("a3"); // remove a1 and select a3
// or
mySidebar.items("a1").remove(false); // remove a1 and do not select any item

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setActive DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

setActive

selects the specified item

void setActive();

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png"},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// selecting item
mySidebar.items("a2").setActive();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setBubble DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

setBubble

sets a bubble

void setBubble(string|number content);

Parameters

content string|number the bubble's content

Example

mySidebar.cells(id).setBubble(2);

Related samples

  • Bubbles
See also
  • API
    • getBubble
    • clearBubble
    • onBubbleClick
  • Articles
    • Configuring Sidebar
    • Change log

    added in 4.3

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setHeaderText DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

setHeaderText

sets a header text for an item

void setHeaderText(string headerText);

Parameters

headerText string a header text

Example

mySidebar.cells(id).setHeaderText(headerText);

Change log

added in version 4.5

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setText DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

setText

sets the text of an item

void setText(object text);

Parameters

text object the item's new data with text, icon and other attrs

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"}
    ]
});

// change text
mySidebar.items("a1").setText({text:"Item 1!!!"});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

show

shows the specified item

void show(boolean mode);

Parameters

mode boolean (optional), if set to true - selects the item after showing, false by default

Example

// init sidebar
var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    template: "details",
    icons_path: "icons/16x16/",
    width: 160,
    items: [
        {id: "a1", text: "Item 1", icon: "image1.png", selected: true},
        {id: "a2", text: "Item 2", icon: "image2.png"},
        {id: "a3", text: "Item 3", icon: "image3.png"}
    ]
});

mySidebar.items("a1").hide(); // hide a1 and select a2

// show item
mySidebar.items("a1").show(); // show a1, but a2 still selected
// or
mySidebar.items("a1").show(true); // show a1 and then select

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showHeader DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

showHeader

shows cell's header

void showHeader();

Example

mySidebar.cells(id).showHeader();

Change log

added in version 4.5

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showInnerScroll DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

showInnerScroll

shows inner cell scrolls

void showInnerScroll();

Example

dhxComponent.cells(id).showInnerScroll();

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

showMenu

shows dhtmlxMenu attached to a cell

void showMenu();

Example

dhxComponent.cells(id).showMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

showRibbon

shows dhtmlxRibbon attached to a cell

void showRibbon();

Example

dhxComponent.cells(id).showRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

showStatusBar

shows status bar object attached to a cell

void showStatusBar();

Example

dhxComponent.cells(id).showStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

showToolbar

shows dhtmlxToolbar attached to a cell

void showToolbar();

Example

dhxComponent.cells(id).showToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

showView

shows the specified view, creates a new one if it doesn't exist

boolean showView(string name);

Parameters

name string view name

Returns

boolean true if view was accessed first time, false otherwise

Example

// here is an example how to initialize content
// in several views on demand inside of a cell

// 1) for the default view "def" we will simply attach an URL
// 2) for the "grid" view  we will attach menu and grid
// 3) and for the "tree" view we will attach toolbar and tree

var myMenu;
var myGrid;
var myToolbar;
var myTree;

// the default view is ready right after component initialization
dhxComponent.cells(id).attachURL("http://somedomain.com/page.html");

function initView(name) {
    // assuming that this function will be called after some user action
    // like a button click or some other
    var state = dhxComponent.cells(id).showView(name);
    if (state == true) {
        // first call, initializes corresponding components
        if (name == "grid") {
            myMenu = dhxComponent.cells(id).attachMenu();
            myGrid = dhxComponent.cells(id).attachGrid();
        } else if (name == "tree") {
            myToolbar = dhxComponent.cells(id).attachToolbar();
            myTree = dhxComponent.cells(id).attachTree();
        }
    }
}

Details

The default view name is "def", it is created automatically when a cell is created

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unloadView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • clearBubble
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getBubble
  • getFrame
  • getHeaderText
  • getId
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isHeaderVisible
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • remove
  • setActive
  • setBubble
  • setHeaderText
  • setText
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Sidebar dhtmlXSideBarCell API Methods

unloadView

unloads the specified view

void unloadView(string name);

Parameters

name string view name

Example

// create test view and switch to it
var state = dhxComponent.cells(id).showView("test_view");
console.log(state); // true

// attach some content
dhxComponent.cells(id).attachMenu();
dhxComponent.cells(id).attachGrid();

// go back to default view
var state = dhxComponent.cells(id).showView("def");
console.log(state); // false

// unload test_view
dhxComponent.cells(id).unloadView("test_view");

// open test_view again
var state = dhxComponent.cells(id).showView("test_view");
console.log(state); // true

// attach some content
dhxComponent.cells(id).attachMenu();
dhxComponent.cells(id).attachGrid();

// unload test_view
dhxComponent.cells(id).unloadView("test_view");

// check active view
var name = dhxComponent.cells(id).getViewName();
console.log(name); // "test_view"

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing Sidebar DHTMLX Docs

Documentation
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
  • Initializing Sidebar
    • Sidebar source files
    • Constructor
    • Full-screen initialization
    • Init in an HTML element
    • Init in a window
    • Init in a cell
    • JSON structure
    • XML structure
    • Recommended init way
  • Configuring Sidebar
  • Configuring Items
  • Single Cell Mode
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

Initializing Sidebar

Sidebar source files

First, you need to include Sidebar's js/css files on a page. In order to use dhtmlxSidebar as a separate component, you need to include its source files on the page. There are two source files you should use:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxsidebar.css">
    <script src="codebase/dhtmlxsidebar.js"></script>
</head>

But if you're working with the whole DHTMLX Suite, there's no need to include extra files - dhtmlx js/css files will be enough:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
    <script src="codebase/dhtmlx.js"></script>
</head>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Constructor

var mySidebar = new dhtmlXSideBar({

    parent:         "sidebarObj",   // id/object, container for sidebar
    skin:           "dhx_skyblue",  // string, sidebar skin, optional
    template:       "details",      // string, used template, "details" by default
    icons_path:     "icons/",       // string, path to the folder with icons
    single_cell:    true,           // boolean, true to enable the single cell mode
    bubble:         6,              // number, marker to show number of notifications
    width:          200,            // number, width of the left part
    header:         true,           // boolean, true to enable the header
    autohide:       false,          // boolean, true to autohide the navigation bar
    xml:            "sidebar.xml",  // string, path to xml config, optional
    json:           "sidebar.json", // string, path to json config, optional
    onload:         function(){},   // function, callback for xml/json, optional
    items: [
        // items config
        {
            id:         "a1",       // item id
            text:       "Text",     // item text
            icon:       "a1.png",   // icon used for the item
            selected:   true        // boolean, true to select an item
        },
        // separator config
        {
            id:         "sep1",     // separator id
            type:       "separator" // item type, mandatory
        },
        {...},  // other items, if any
        {...}

    ]

});

The order of loading (if several params specified at a time) is: json, xml,items.

Full-screen initialization

Generally, to create a full-screen sidebar on a page, use the code as in:

<html>
<head>
<style>
    /* important to set width/height to 100% for fullscreen init */
    html, body {
        width:      100%;
        height:     100%;
        margin:     0px;
        padding:    0px;
        overflow:   hidden;
    }

</style>
<script>
    var mySidebar;
    function doOnLoad() {
        mySidebar = new dhtmlXSideBar({
            parent: document.body,  // parent container
            items: [...]            // items and other config
        });
    }
</script>
</head>
<body onload="doOnLoad();">

</body>
</html>

It's also possible to set offsets for Sidebar in the full screen mode.

Init in an HTML element

To initialize dhtmlxSidebar in an HTML element, do the following:

1) create an HTML element where the sidebar will be placed later, don't forget to specify width and height:

<div id="sidebarObj" style="position: relative; width: 400px; height: 300px;"></div>

2) create a dhtmlXSideBar object and place it into the HTML object that you've just created:

var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",   // id of parent container
    ...                     // other config
});

Init in a window

To create a sidebar in a window, do the following:

1) create a dhtmlXWindows object:

var dhxWins = new dhtmlXWindows();
var sidebarWin = dhxWins.createWindow("w1", 20, 20, 600, 400);

The following parameters are passed to dhxWins.createWindow():

  • w1 - the id of the window;
  • 20, 20 - the left and the top positions of the window;
  • 600, 400 - the width and the height of the window.

2) call the attachSidebar() method to render sidebar in the window:

var mySidebar = new sidebarWin.attachSidebar({
    // sidebar config
});

Init in a cell

To create a new sidebar in a cell of a layout, do the following:

1) create a dhtmlXLayoutObject object:

var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L"
});

2) attach sidebar to a cell of layout by the attachSidebar() method:

var mySidebar = myLayout.cells("a").attachSidebar();
// or with more extended config
var mySidebar = myLayout.cells("a").attachSidebar({
    // sidebar config
});

JSON structure

JSON structure is needed for json init. In this case Sidebar can load config and partially data from an external json file.

It is used for the following init:

var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    json: "sidebar.json",
    onload: function(){
        console.log("JSON has been loaded and items are rendered. Ready to work.");
    }
});
// or
var mySidebar = new dhtmlXSideBar("sidebarObj");
mySidebar.loadStruct("sidebar.json");

sidebar.json

{
    items: [
        {id: "recent", text: "Recent", icon: "recent.png", selected: true},
        {type: "separator"},
        {}, // more items, if any
        {}
    ]
}

Related sample: Init from json

XML structure

XML struct is needed for xml init. In this case sidebar can load config and partially data from an external xml file.

It is used for the following init:

var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    xml: "sidebar.xml",
    onload: function(){
        console.log("XML has been loaded and items are rendered. Ready to work.");
    }
});
// or
var mySidebar = new dhtmlXSideBar("sidebarObj");
mySidebar.loadStruct("sidebar.xml");

sidebar.xml

<?xml version="1.0" encoding="UTF-8"?>
<sidebar>
    <item id="recent" text="Recent" icon="recent.png" selected="true"/>
    <item type="separator"/>
    ... more items, if any
</sidebar>

Related sample: Init from xml

Recommended init way

<html>
<head>
<script>
    var mySidebar;
    function doOnLoad() {
        mySidebar = new dhtmlXSideBar({
            // config here
        });
    }

</script>
</head>
<body onload="doOnLoad();">

</body>
</html>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring Sidebar DHTMLX Docs

Documentation
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
  • Initializing Sidebar
  • Configuring Sidebar
    • Predefined templates
    • Custom templates
    • Setting skins
    • Setting offsets
    • Sizing sidebar
    • Adding bubbles
    • Setting header
    • Using autohide mode
  • Configuring Items
  • Single Cell Mode
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

Configuring Sidebar

Predefined templates

There are 5 predefined templates for sidebar items which are used for displaying items' elements and can be customized. They are "details", "tiles", "icons", "icons_text", "text":

You can apply this or that template during the dhtmlxSidebar initialization:

var mySidebar = new dhtmlXSideBar({
    template: "details"
});

Each default template contains either an icon (16x16 or 32x32) or a text, or an icon and a text. In any case, in order to add a new item, the following attributes are used:

  • icon - for icons,
  • text - for texts.

It means that no matter what template you've chosen, you should use the following key names:

mySidebar.addItem({
    text: "items text",
    icon: "item icon"
});

Related sample: Template [details]

Custom templates

You can also create your own template. For this purpose, you should complete several simple steps:

1) First of all, you need to decide what name the template will have. Let it be "myview".

2) Next, you should define the template structure. For example, we'll use the one shown in the picture (an icon 32x32 on the left, 2 text lines on the right):

3) Now you can add html markup for one item:

dhtmlXSideBar.prototype.templates.myview =
    // icon 32x32
    "<img class='dhxsidebar_item_icon' src='#icons_path##icon#' border='0'>"+
    // general area for text
    "<div class='dhxsidebar_item_text'>"+
        "<div class='line_one'>#text#</div>"+ // 1st line of text
        "<div class='line_two'>#text2#</div>"+ // 2nd line of text
    "</div>";

In this code we use common sidebar styles for the icon and the text (as usual classes are used). But we should correct them a little bit (to define the height, line-height, paddings and so on).

4) Let's also add some CSS code. The names of classes will be placed in the container which has the name of our new view: "dhxsidebar_tpl_myview"

You should set the height of the whole item

.dhxsidebar_tpl_myview div.dhxsidebar_item {
    height: 43px;
    line-height: 43px;
}

and specify coordinates for the icon (by default it has the position: absolute parameter specified)

.dhxsidebar_tpl_myview img.dhxsidebar_item_icon {
    left: 8px !important;
    top: 6px!important;
}

Here you can either add !important or use the full classname to override the sidebar defaults.

As for the text lines, you should specify the line-height, margin-left and margin-top properties for them:

.dhxsidebar_tpl_myview div.line_one {
    margin-left: 51px;
    margin-top: 4px;
    line-height: 16px;
    font-size: 11px;
}
.dhxsidebar_tpl_myview div.line_two {
    margin-left: 51px;
    margin-top: 1px;
    line-height: 16px;
    font-size: 10px;
    color: #515151;
}

That's all. Now let's try to initialize Sidebar and see the result:

var mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    icons_path: "icons/win_32x32/",
    template: "myview",
    width: 150,
    items: [
        {id: "a1", text: "Documents", text2: "2 objects", icon: "documents.png"},
        {id: "a2", text: "Music", text2: "16 objects", icon: "music.png"},
        {id: "a3", text: "Pictures", text2: "1 object", icon: "pictures.png"},
        {id: "a4", text: "Video", text2: "Empty", icon: "video.png"}
    ]
});

Related sample: Custom template

Related sample: Custom template 2

Setting skins

You can choose one of the 4 available skins for Sidebar:

The "material" skin is used by default.

A skin can be set during the dhtmlxSidebar initialization:

var mySidebar = new dhtmlXSideBar({
    skin: "dhx_web"
});

Related sample: Skins

Setting offsets

dhtmlxSidebar supports offsets that can be useful in full-screen init. For example, to add a logo to the header or company's info to the footer.

1) you can set offset on init:

var mySidebar = new dhtmlXSidebar({
    parent: document.body,  // parent container
    items: [...],
    offsets: {
        top: 10,
        right: 20,
        bottom: 30,
        left: 40
    }
});

2) or you can set it from JS code:

mySidebar.setOffsets({
    top: 10,
    right: 20,
    bottom: 30,
    left: 40
});

Sizing sidebar

There's a possibility to adjust sidebar if its parent element's size was changed:

var mySidebar = new dhtmlXSideBar("parentId");

// if you change parent's size
document.getElementById("parentId").style.width = "800px";
document.getElementById("parentId").style.height = "600px";

// sidebar needs to be adjusted
mySidebar.setSizes();

If the sidebar is attached to another DHTMLX component, the method is called automatically.

Adding bubbles

You can add a colored circle marker (bubble) next to each Sidebar item. It can inform about the number of unread notifications, for example.

To set a bubble you need to specify the bubble property in the sidebar definition and specify its content:

mySidebar = new dhtmlXSideBar({
    parent: "sidebarObj",
    items: [
        {id: "recent", text: "Recent", icon: "recent.png", selected: true},
        {id: "desktop", text: "Desktop", icon: "desktop.png"},
        {id: "downloads", text: "Downloads", icon: "downloads.png", bubble: 6},
        ...
    ]
});

Related sample: Bubbles

It is also possible to set a bubble by means of the method setBubble:

mySidebar.cells(id).setBubble(text);

To get the bubble text is easy with the help of the getBubble method:

var text = mySidebar.cells(id).getBubble();

If you need to remove a bubble from an item, make use of the clearBubble method:

mySidebar.cells(id).clearBubble();

For specifying some action on clicking a bubble, use the onBubbleClick event handler:

mySidebar.attachEvent("onBubbleClick", function(id, text) {
    // your code here
    return true; // allow item to be selected
});

Setting header

You can specify the header in the right part of Sidebar to display the text of the chosen Sidebar item.

To enable header rendering, you need to specify the header property with the true value in the Sidebar configuration:

var mySidebar = new dhtmlXSideBar({
    header:true
});

Related sample: Show header

Operations with header

Getting header text

To get the header text of a Sidebar item, use the getHeaderText method:

var header = mySidebar.cells(id).getHeaderText();

Setting header text

To set a header text for an item, make use of setHeaderText:

mySidebar.cells(id).setHeaderText(headerText);

where

  • headerText - (string) a new header text for an item

Hiding header

You can also hide the header of a particular cell with the help of the hideHeader method:

mySidebar.cells(id).hideHeader();

Showing header

To show the cell's header if it was hidden, use the showHeader method:

mySidebar.cells(id).showHeader();

Checking header visibility

One more possibility is to check, whether the cell's header is visible. Use the isHeaderVisible for this purpose:

var isVisible = mySidebar.cells(id).isHeaderVisible();

The method returns true to indicate that the header is visible or false if the header is invisible.

Using autohide mode

In the autohide mode the navigation bar is hidden and appears by clicking the header icon. Only the icon and the text of the chosen item are shown in the header.

To use the autohide mode, you need to have the header property enabled and set the autohide property to true in the Sidebar configuration.

var mySidebar = new dhtmlXSideBar({
    header:true,
    autohide:true
});

In order to make the navigation bar hide and show, apply the hideSide and showSide methods, correspondingly.

Related sample: Autohide mode

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring Items DHTMLX Docs

Documentation
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
  • Initializing Sidebar
  • Configuring Sidebar
  • Configuring Items
    • Setting/getting an item's text
    • Showing/hiding an existing item
    • Adding/removing an item
    • Setting/getting the active item
  • Single Cell Mode
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

Configuring Items

Setting/getting an item's text

To set the text of an item, use the setText() method:

mySidebar.items(id).setText({
    text: "new text",
    icon: "new_icon.png"
});

To get the text of an item, use the getText() method:

var text = mySidebar.items(id).getText(); // -> {text:"new text",icon:"new_icong.png", ...}

Related sample: Item text manipulation

Showing/hiding an existing item

To show an item, use the show() method:

mySidebar.items(id).show();

To hide an item, use the hide() method:

mySidebar.items(id).hide();

Related sample: Show/hide items

Adding/removing an item

To add an item, use the addItem() method:

mySidebar.addItem("itemId");

To remove an item from sidebar, use the remove() method:

mySidebar.items(id).remove();

Related sample: Add/remove items

Setting/getting the active item

To select an item, use the setActive() method:

mySidebar.items(id).setActive();

To get the active item, use the method getActiveItem():

// get active item
var actvId = mySidebar.getActiveItem();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Single Cell Mode DHTMLX Docs

Documentation
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
  • Initializing Sidebar
  • Configuring Sidebar
  • Configuring Items
  • Single Cell Mode
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

Single Cell Mode

By default, each item on a sidebar (on the left side) has a cell linked to it (on the right).

Single cell mode implies that all items on the left are linked to a common cell on the right. It means, no matter what item is selected on the left, only one existing cell is always visible on the right.

To activate this mode, use the single_cell property with the true value.

var mySidebar = new dhtmlXSideBar({
    single_cell: true
    // and other config here
});

To access cell's content you can optionally omit the cell id. But if you're working with the items on the left side, you still need to specify the id.

var mySidebar = new dhtmlXSideBar({
    single_cell: true,
    ...
});
mySidebar.cells().attachComponent();
mySidebar.cells("someId").setActive();

Related sample: Single cell mode

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Components DHTMLX Docs

Documentation
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
  • Initializing Sidebar
  • Configuring Sidebar
  • Configuring Items
  • Single Cell Mode
  • Attaching Components
    • Getting the attached component
    • Detaching components
    • Scheduler specificity
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

Attaching Components

Almost all DHTMLX components can be attached directly to a cell by the corresponding method.

Accordion
dhxComponent.cells(id).attachAccordion();
Carousel
dhxComponent.cells(id).attachCarousel();
Chart
dhxComponent.cells(id).attachChart();
DataView
dhxComponent.cells(id).attachDataView();
Editor
dhxComponent.cells(id).attachEditor();
Form
dhxComponent.cells(id).attachForm();
Grid
dhxComponent.cells(id).attachGrid();
Layout
dhxComponent.cells(id).attachLayout();
List
dhxComponent.cells(id).attachList();
Menu
dhxComponent.cells(id).attachMenu();
Ribbon
dhxComponent.cells(id).attachRibbon();
Scheduler
dhxComponent.cells(id).attachScheduler();
Sidebar
dhxComponent.cells(id).attachSidebar();
StatusBar
dhxComponent.cells(id).attachStatusBar();
Tabbar
dhxComponent.cells(id).attachTabbar();
Toolbar
dhxComponent.cells(id).attachToolbar();
Tree
dhxComponent.cells(id).attachTree();
TreeView
dhxComponent.cells(id).attachTreeView();

We highly recommend you to follow this way of attaching components, as it guarantees proper rendering and correct resizing of embedded components in relation to their parent container.

Please note that attaching of Menu, Ribbon, Toolbar and StatusBar into a cell has some peculiarities. For details check the article Attaching Menu/Status Bar.

Make sure you've included the corresponding .js/.css files of the related component on a page, for example:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxgrid.css">
    <script src="dhtmlxgrid.js"></script>
</head>

Getting the attached component

There is a possibility to get link to the attached component:

var attached = dhxComponent.cells(id).getAttachedObject();
if (window.dhtmlXGridObject != null && attached instanceof window.dhtmlXGridObject) {
    console.log("An attached grid detected");
}

Detaching components

// attach
var myAcc = dhxComponent.cells(id).attachAccordion({...});

// detach later
dhxComponent.cells(id).detachObject(true);
myAcc = null;

Scheduler specificity

Please note, the attachScheduler method differs from other attaching methods. The difference is that attachScheduler not only attaches the component but also initializes it - creates an instance with the predefined structure.

Therefore:

  • The attachScheduler method doesn't return a component object;
  • The attachScheduler method can be called only once;
  • If you need to set some configuration options for the scheduler, set them before attaching scheduler to the layout.
var myLayout = new dhtmlXLayoutObject(document.body, "3L");
myLayout.cells("a").setWidth(800);

// configure scheduler if needed
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
// then attach it to layout
myLayout.cells("a").attachScheduler(new Date(), "month");
// load some data
scheduler.load("../common/events.xml");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Menu/Status Bar DHTMLX Docs

Documentation
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
  • Initializing Sidebar
  • Configuring Sidebar
  • Configuring Items
  • Single Cell Mode
  • Attaching Components
  • Attaching Menu/Status Bar
    • Attaching Menu
    • Attaching Toolbar
    • Attaching Ribbon
    • Attaching StatusBar
    • What else?
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

Attaching Menu/Status Bar

You can use Menu, Toolbar and Ribbon components as a menu bar and attach them to the top of a cell. A cell can also have a simple status bar at the bottom added with the help of the StatusBar component.

You can attach several of these components at a time together with other content of a Layout-based component.

Attaching Menu

1) Include dhtmlxMenu source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxmenu.css">
    <script src="dhtmlxmenu.js"></script>
</head>

2) Call the corresponding function:

var myMenu = dhxComponent.cells(id).attachMenu({
    // menu conf here
});

3) Learn more about dhtmlxMenu from the related documentation.

Attaching Toolbar

1) Include dhtmlxToolbar source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxtoolbar.css">
    <script src="dhtmlxtoolbar.js"></script>
</head>

2) Call the corresponding function:

var myToolbar = dhxComponent.cells(id).attachToolbar({
    // toolbar conf here
});

3) Learn more about dhtmlxToolbar from the related documentation.

Attaching Ribbon

1) Include dhtmlxRibbon source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxribbon.css">
    <script src="dhtmlxribbon.js"></script>
</head>

2) Call the corresponding function:

var myRibbon = dhxComponent.cells(id).attachRibbon({
    // ribbon conf here
});

3) Learn more about dhtmlxRibbon from the related documentation.

Attaching StatusBar

1) There's no need to include extra .js/.css files.

2) Call the corresponding function:

var sbObj = dhxComponent.cells(id).attachStatusBar({
    // status bar config here, optional
    text:   "some text here",   // status bar text
    height: 35                  // custom height
});

// set status bar text
sbObj.setText("New text");

// get status bar text
var text = sbObj.getText();

What else?

1) You can show/hide any attached control without unloading it from memory, for example:

dhxComponent.cells(id).showMenu();
dhxComponent.cells(id).hideMenu();

2) You can detach and unload the attached control completely, for example:

// init
var myMenu = dhxComponent.cells(id).attachMenu({...});

// detach later
dhxComponent.cells(id).detachMenu();
myMenu = null;

3) You can get link to the component's instance:

var myMenu = dhxComponent.cells(id).getAttachedMenu();
if (myMenu == null) {
    // not inited
    myMenu = dhxComponent.cells(id).attachMenu({...});
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching HTML DHTMLX Docs

Documentation
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
  • Initializing Sidebar
  • Configuring Sidebar
  • Configuring Items
  • Single Cell Mode
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
    • Attaching HTML object
    • Appending HTML object
    • Attaching HTML string
    • Detaching object
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

Attaching HTML

There is a possibility to attach HTML objects and HTML strings to a cell. Several HTML objects can be attached at a time.

Attaching HTML object

<div id="objId">Some text</div>
// attach by id
dhxComponent.cells(id).attachObject("objId");
// or attach by link
var obj = document.getElementById("objId");
dhxComponent.cells(id).attachObject(obj);

in this mode a cell doesn't render scrolls by default, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Appending HTML object

This way is the same as attaching an object, but the current cell's content isn't removed:

dhxComponent.cells(id).appendObject("otherObjId");

in this mode a cell will add scrolls automatically, so there's no need to specify width/height to the attached object.

Attaching HTML string

dhxComponent.cells(id).attachHTMLString('<div id="objId">Some text</div>');

in this mode scrolls aren't rendered by default as well, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Detaching object

Any attached object or HTML string can be detached from a cell with the help of the detachObject() method:

// attach
dhxComponent.cells(id).attachObject("objId");

// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to "true", the object will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching URL DHTMLX Docs

Documentation
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
  • Initializing Sidebar
  • Configuring Sidebar
  • Configuring Items
  • Single Cell Mode
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
    • Attaching via iFrame
    • Attaching via AJAX
    • Using onContentLoaded event
    • Accessing the attached content
    • Accessing parent from attached page
    • Detaching URLs
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

Attaching URL

A cell has a possibility to attach URLs. It can be done by using iFrames and AJAX calls.

In the case of iFrames call, an iFrame will be created inside of a cell, and your URL will be attached as a separate page (it will have access to your code as you will have control over the content inside of the iFrame).

In the case of AJAX call, the content returned by the server will be placed inside of a div.

  • a common function used for both methods is attachURL(), the only difference is that the 2nd argument is set to true for AJAX call
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
  • loading is async, so to proceed with content, you need to use the "onContentLoaded" event

Attaching via iFrame

GET request

dhxComponent.cells(id).attachURL("page.html");

POST request without params

dhxComponent.cells(id).attachURL("page.html", null, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

Attaching via AJAX

GET request

dhxComponent.cells(id).attachURL("page.html", true);

POST request without params

dhxComponent.cells(id).attachURL("page.html", true, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Using onContentLoaded event

As it was said above, loading is async, so to proceed with content, you need to use the "onContentLoaded" event:

// firstly add the event
dhxComponent.attachEvent("onContentLoaded", function(id){
    // page.html id loaded, your code here
});

// now attach a URL
dhxComponent.cells(id).attachURL("page.html");

Accessing the attached content

This part is related to the iFrame-mode only.

Assuming the code below has been attached:

<html>
<head>
    <script>
        function myFunc() {
            console.log("I'm attached function");
        }
    </script>
</head>
<body>
    <div id="attachedObject">
        Some text here
    </div>
</body>
</html>

Firstly, you need to get an iFrame object from the cell where the attached content is located:

var ifr = dhxComponent.cells(id).getFrame();

Now you can access the elements:

// make sure an element exists
var elem = ifr.contentWindow.document.getElementById("attachedObject");
elem.innerHTML = "Some new text here";

and call some JS code:

// make sure function exists and located in the iFrame's window scope
ifr.contentWindow.someFunc();

Accessing parent from attached page

This part is related to the iFrame-mode only.

If you need to make some actions with a cell from the attached page (for example, hide the window by clicking some button on the page or collapse a layout's cell) this can be done in the following way:

<!-- this attached page.html -->
<script>
    function controlParent() {
        parent.myLayout.cells(id).collapse();   // collapse layout's cell
        parent.myWins.window(id).hide();        // hiding a window
    }
</script>

Any variable or function can be acccessed but make sure it is declared in a global window scope.

Detaching URLs

Any attached URL can be detached from a cell by using the detachObject() method:

// attach
dhxComponent.cells(id).attachURL("page.html");

// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to true, the object (iFrame or a div with AJAX content) will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Google Maps DHTMLX Docs

Documentation
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
  • Initializing Sidebar
  • Configuring Sidebar
  • Configuring Items
  • Single Cell Mode
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

Attaching Google Maps

There's a possibility to attach Google Maps to a cell.

Firstly, include the corresponding .js file on your page:

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>

And then initialize a cell with a map inside on the page:

var GMaps = myLayout.cells("b").attachMap(); // applies default parameters

// or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = myLayout.cells(id).attachMap(mapParams);

Related sample: Integration with Google Maps

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Progress Bar DHTMLX Docs

Documentation
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
  • Initializing Sidebar
  • Configuring Sidebar
  • Configuring Items
  • Single Cell Mode
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

Progress Bar

A progress control is a state indicator. It can be used to indicate content loading or updating. While the cell is visually disabled and not accessible for user actions the progress is enabled.

This functionality will not start automatically when some content is loaded into a cell, it needs to be triggered by calling the appropriate API method.

Here is the code for a cell's progress control:

// turning progress on
dhxComponent.cells(id).progressOn();

// turning progress off
dhxComponent.cells(id).progressOff();

In practical scenario, you can place the progressOn() call before loading data in some component, and progressOff() in data loading callback, for example:

var myLayout;
var myGrid;

// init layout and attach grid
function initControls() {
    myLayout = new dhtmlXLayoutObject({
        parent: "layoutObj",
        pattern: "2U"
    });
    myGrid = myLayout.cells("a").attachGrid();
    loadGridData(true);
}

// load/reload grid data
function loadGridData(firstLoad) {
    myLayout.cells("a").progressOn();
    if (firstLoad == true) {
        myGrid.load("server.php", doOnGridLoaded);
    } else {
        myGrid.updateFromXML("server.php", true, false, doOnGridLoaded);
    }
}

// grid dataload callback
function doOnGridLoaded() {
    myLayout.cells("a").progressOff();
}
<body onload="initControls();">
    <div id="layoutObj" style="width: 600px; height: 400px;"></div>
    <input type="button" value="refresh grid" onclick="loadGridData();"></div>
</body>

Each time you will click the button, the loadGridData() method will be called and you will see the progress of loading over the cell with grid.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Different Content in the Same Cell DHTMLX Docs

Documentation
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
  • Initializing Sidebar
  • Configuring Sidebar
  • Configuring Items
  • Single Cell Mode
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

Different Content in the Same Cell

Cells have a possibility to show different content in the same cell. This feature is called "views". Each cell shows the view "def" by default. You can easily switch to the other view and init different content.

Let's see how it works. We will create a "3L" layout and attach some components to the cell "b".

var myLayout = new dhtmlXLayoutObject("layoutObj", "3L");

Currently, the view "def" is selected. There's no need to call any extra commands to make it active, just attach the content you need:

var myMenu = myLayout.cells("b").attachMenu();
var myGrid = myLayout.cells("b").attachGrid();

Now let's show another view and attach some other content to it:

myLayout.cells("b").showView("tree");

At this moment the cell hides the currently active views ("def" in our case) and shows the requested one. You can name the view as you wish, it's necessary just to determine which view to show. As we haven't attached any components, the "tree" view looks like an empty cell.

Now let's attach some content to the view "tree":

myTree = myLayout.cells("b").attachTree();
myToolbar = myLayout.cells("b").attachToolbar();

Now let's go back to the view "def" and see what happens:

myLayout.cells("b").showView("def");

As you can see, now the view "tree" becomes hidden and the view "def" is restored and active.

In the above example we're using layout just to show you how the described functionality works. Views are the feature of a cell, so they are enabled in all the components that use cells: accordion, layout, tabbar and windows.

Related sample: Views

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Coloring Text Selection DHTMLX Docs

Documentation
  • dhtmlXSideBar API
  • dhtmlXSideBarCell API
  • Initializing Sidebar
  • Configuring Sidebar
  • Configuring Items
  • Single Cell Mode
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
Start Sidebar

Coloring Text Selection

Sometimes you need to make the selected text look like a common skin. To set a custom color for the selection, use the following technique:

1) Define a CSS class with ::selection and ::-moz-selection pseudo-elements inside:

.my_style::selection {
    color: #454544;
    background-color: #fffcda;
}
.my_style::-moz-selection {
    color: #454544;
    background-color: #fffcda;
}

2) Set the above specified CSS class for the required object:

<div id="layoutObj"></div>
<div id="objId">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
<div id="objId2" class="my_style">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "2U",
    cells: [
        {id: "a", text: "Default selection"},
        {id: "b", text: "Custom selection"}
    ]
});

myLayout.cells("a").attachObject("objId");
myLayout.cells("b").attachObject("objId2");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Slider DHTMLX Docs

Documentation
  • Slider
    • dhtmlXSlider API
    • Initializing Slider
    • Object Constructor
    • Skinning Slider
    • Configuring Slider
    • Range Mode
    • Handling Events
    • Migration from 3.6 to 4.0
Start

Slider

dhtmlxSlider allows embedding vertical or horizontal slider bars into web pages. The component is really easy to implement and customize. There is a number of predefined skins available and you can create any custom appearance as well. Complete JavaScript API is provided to help users save time on configuring.

API reference
  • dhtmlXSlider API
Related resources
  • You may download dhtmlxSlider from dhtmlx.com
  • Check online samples for dhtmlxSlider
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Working with Slider

  • Initializing Slider
  • Object Constructor
  • Skinning Slider
  • Configuring Slider
  • Range Mode
  • Handling Events
 Discusses the initialization of Slider and the main techniques of manipulating this component.

Other

  • Migration from 3.6 to 4.0
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXSlider API DHTMLX Docs

Documentation
  • dhtmlXSlider API
    • Methods
    • Events
  • Initializing Slider
  • Object Constructor
  • Skinning Slider
  • Configuring Slider
  • Range Mode
  • Handling Events
  • Migration from 3.6 to 4.0
Start Slider

dhtmlXSlider API

Methods
attachEvent | adds any user-defined handler to available events
detachEvent | detaches a handler from an event
disable | disables dhtmlxSlider
disableTooltip | disables a slider's tooltip
enable | enables dhtmlxSlider
enableTooltip | enables/disables a tooltip
getMax | returns current maximal value of a slider
getMin | returns current minimal value of a slider
getRunnerIndex | returns the index of the active runner
getStep | returns the slider's step value
getValue | returns the current value of a slider control
hide | hides dhtmlxSlider
init | initialization of dhtmlxSlider object
isEnabled | returns "true" if the slider is enabled
isVisible | returns "true" if the slider is visible
linkTo | links the slider to other controls
setImagePath | sets the path to the folder with images
setMax | sets the maximal value for a slider
setMin | set the minimal value for a slider
setOnChangeHandler | sets the function called when the slider's value is changed
setSize | sets the size of the slider control
setSkin | sets skin for the Slider control
setStep | sets a new step value for the slider
setValue | sets the current value of a slider control
show | shows dhtmlxSlider
unload | destructor, unloads dhtmlxSlider
Events
onChange | fires after the slider's value was changed
onMouseDown | fires on clicking the runner
onMouseUp | fires on releasing the runner
onSlideEnd | fires on the slide end
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • attachEvent
    • detachEvent
    • disable
    • disableTooltip
    • enable
    • enableTooltip
    • getMax
    • getMin
    • getRunnerIndex
    • getStep
    • getValue
    • hide
    • init
    • isEnabled
    • isVisible
    • linkTo
    • setImagePath
    • setMax
    • setMin
    • setOnChangeHandler
    • setSize
    • setSkin
    • setStep
    • setValue
    • show
    • unload
  • Events
Start Slider dhtmlXSlider API

Methods

attachEvent | adds any user-defined handler to available events
detachEvent | detaches a handler from an event
disable | disables dhtmlxSlider
disableTooltip | disables a slider's tooltip
enable | enables dhtmlxSlider
enableTooltip | enables/disables a tooltip
getMax | returns current maximal value of a slider
getMin | returns current minimal value of a slider
getRunnerIndex | returns the index of the active runner
getStep | returns the slider's step value
getValue | returns the current value of a slider control
hide | hides dhtmlxSlider
init | initialization of dhtmlxSlider object
isEnabled | returns "true" if the slider is enabled
isVisible | returns "true" if the slider is visible
linkTo | links the slider to other controls
setImagePath | sets the path to the folder with images
setMax | sets the maximal value for a slider
setMin | set the minimal value for a slider
setOnChangeHandler | sets the function called when the slider's value is changed
setSize | sets the size of the slider control
setSkin | sets skin for the Slider control
setStep | sets a new step value for the slider
setValue | sets the current value of a slider control
show | shows dhtmlxSlider
unload | destructor, unloads dhtmlxSlider
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disable DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

disable

disables dhtmlxSlider

void disable();

Example

mySlider.disable();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disableTooltip DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

disableTooltip

disables a slider's tooltip

void disableTooltip();

Example

mySlider.disableTooltip();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enable DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

enable

enables dhtmlxSlider

void enable();

Example

mySlider.enable();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableTooltip DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

enableTooltip

enables/disables a tooltip

void enableTooltip();

Example

mySlider.enableTooltip();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getMax DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

getMax

returns current maximal value of a slider

number getMax();

Returns

number current maximal value

Example

mySlider.getMax();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getMin DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

getMin

returns current minimal value of a slider

number getMin();

Returns

number current minimal value

Example

mySlider.getMin();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getRunnerIndex DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

getRunnerIndex

returns the index of the active runner

number getRunnerIndex();

Returns

number the index of the active runner (-1 if not active)

Example

var mySlider = new dhtmlXSlider({
    range: true // and other conf
});
mySlider.attachEvent("onChange", function(value){
    console.log(this.getRunnerIndex())
});

Change log

added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getStep DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

getStep

returns the slider's step value

number getStep();

Returns

number step value

Example

mySlider.getStep();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getValue DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

getValue

returns the current value of a slider control

number|array getValue();

Returns

number|array a value or an array of value pairs for the range mode

Example

var value = mySlider.getValue();

Change log

array as a returned value is added in v4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hide DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

hide

hides dhtmlxSlider

void hide();

Example

mySlider.hide():

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


init DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

init

initialization of dhtmlxSlider object

void init();

Deprecated

from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isEnabled DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

isEnabled

returns "true" if the slider is enabled

boolean isEnabled();

Returns

boolean true/false

Example

mySlider.isEnabled();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isVisible DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

isVisible

returns "true" if the slider is visible

boolean isVisible();

Returns

boolean true/false

Example

mySlider.isVisible():

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


linkTo DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

linkTo

links the slider to other controls

void linkTo(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement the id of a linked object, or the linked object itself

Example

mySlider.linkTo(obj);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setImagePath DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

setImagePath

sets the path to the folder with images

void setImagePath();

Deprecated

since version 4.0 the function is deprecated, as it is no longer needed

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setMax DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

setMax

sets the maximal value for a slider

void setMax(number val);

Parameters

val number max value of a slider, 99 by default

Example

mySlider.setMax(val);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setMin DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

setMin

set the minimal value for a slider

void setMin(number val);

Parameters

val number min value, 0 by default

Example

mySlider.setMin(val);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOnChangeHandler DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

setOnChangeHandler

sets the function called when the slider's value is changed

void setOnChangeHandler();

Deprecated

from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSize DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

setSize

sets the size of the slider control

void setSize(number value);

Parameters

value number new size of the slider

Example

mySlider.setSize(value);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

setSkin

sets skin for the Slider control

void setSkin(string skin);

Parameters

skin string the skin's name

Example

mySlider.setSkin(skin);

Details

Available skins:

  • "dhx_skyblue"
  • "dhx_web"
  • "dhx_terrace"
  • "material"
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setStep DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

setStep

sets a new step value for the slider

void setStep(number val);

Parameters

val number a new step's value, 1 by default

Example

mySlider.setStep(val);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setValue DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

setValue

sets the current value of a slider control

void setValue(number|array value,boolean callEvent);

Parameters

value | number|array | a new value or array with value pairs for the range mode
callEvent | boolean | true to call the "onChange" event, false by default

Example

mySlider.setValue(1);

Change log

array as a 1st param is added in v4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

show

shows dhtmlxSlider

void show();

Example

mySlider.show():

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
  • disable
  • disableTooltip
  • enable
  • enableTooltip
  • getMax
  • getMin
  • getRunnerIndex
  • getStep
  • getValue
  • hide
  • init
  • isEnabled
  • isVisible
  • linkTo
  • setImagePath
  • setMax
  • setMin
  • setOnChangeHandler
  • setSize
  • setSkin
  • setStep
  • setValue
  • show
  • unload
Start Slider dhtmlXSlider API Methods

unload

destructor, unloads dhtmlxSlider

void unload();

Example

mySlider.unload();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onChange
    • onMouseDown
    • onMouseUp
    • onSlideEnd
Start Slider dhtmlXSlider API

Events

onChange | fires after the slider's value was changed
onMouseDown | fires on clicking the runner
onMouseUp | fires on releasing the runner
onSlideEnd | fires on the slide end
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onChange DHTMLX Docs

Documentation
  • onChange
  • onMouseDown
  • onMouseUp
  • onSlideEnd
Start Slider dhtmlXSlider API Events

onChange

fires after the slider's value was changed

void onChange(number newValue,object sliderObj){ ... };

Parameters

newValue | number | slider's new value
sliderObj | object | dhtmlXSlider current instance

Example

mySlider.attachEvent("onChange", function(newValue, sliderObj) {
    alert("New value is "+newValue);
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseDown DHTMLX Docs

Documentation
  • onChange
  • onMouseDown
  • onMouseUp
  • onSlideEnd
Start Slider dhtmlXSlider API Events

onMouseDown

fires on clicking the runner

void onMouseDown(number index){ ... };

Parameters

index number runner index

Example

mySlider.attachEvent("onMouseDown", function(index){
    // your code here
});

Change log

added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseUp DHTMLX Docs

Documentation
  • onChange
  • onMouseDown
  • onMouseUp
  • onSlideEnd
Start Slider dhtmlXSlider API Events

onMouseUp

fires on releasing the runner

void onMouseUp(number index){ ... };

Parameters

index number runner index

Example

mySlider.attachEvent("onMouseUp", function(index){
    // your code here
});

Change log

added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSlideEnd DHTMLX Docs

Documentation
  • onChange
  • onMouseDown
  • onMouseUp
  • onSlideEnd
Start Slider dhtmlXSlider API Events

onSlideEnd

fires on the slide end

void onSlideEnd(number value){ ... };

Parameters

value number the current slider's value

Example

mySlider.attachEvent("onSlideEnd", function(value){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing Slider DHTMLX Docs

Documentation
  • dhtmlXSlider API
  • Initializing Slider
    • Making Preparations
    • Minimal Initialization
    • Extended Initialization
    • Initialization by Object Notation
    • Inline Initialization
  • Object Constructor
  • Skinning Slider
  • Configuring Slider
  • Range Mode
  • Handling Events
  • Migration from 3.6 to 4.0
Start Slider

Initializing Slider

dhtmlxSlider can be initialized on page using one of the following initialization schemes:

  • Minimal Initialization
  • Extended Initialization
  • Initialization by Object Notation
  • Inline Initialization

Making Preparations

The first things that need to be done for any type of dhtmlxSlider's initialization are the following:

  • Download the dhtmlxSlider package from the server and place it in a folder
  • Create an HTML file;
  • Place full paths to dhtmlxSlider's CSS and JS files into the header of the created HTML file;

If you use dhtmlxSlider standalone you need to include 2 files:

  • dhtmlxslider.js
  • dhtmlxslider.css
<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" href="../codebase/dhtmlxslider.css">
        <script src="../codebase/dhtmlxslider.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

If you use dhtmlxSlider as a part of "dhtmlxSuite" package you need to include 2 files:

  • dhtmlx.js
  • dhtmlx.css
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Minimal Initialization

The user needs to create an object where dhtmlxSlider will be placed later. In this example the object is a <div> element on page which is placed in the <body> tag:

<div id="sliderObj"></div>

The next step is to create a new dhtmlxSlider and place it after the <div> element (object) that we've just created:

var mySlider = new dhtmlXSlider(parent, size);

The parameters in the above mentioned code string are the following:

  • parent - (id) id of the object inside which the Slider will be created
  • size - (number) the size of the slider (in pixels)

When the page is loaded, the slider will be displayed on a page with the minimum value set in it.

Related sample: Init from HTML

Extended Initialization

While creating a Slider with extended initialization, the user should call the same commands described in the Minimal Initialization section.

The code for extended initialization should be like this:

var mySlider = new dhtmlXSlider(parent, size, skin, vertical, min, max, value, step);

The parameters the user should indicate are as follows:

  • parent - (id) id of the object inside which Slider will be created
  • size - (number) the size of the slider (in pixels)
  • skin - (string) the name of the applied skin
  • vertical - (boolean) vertical orientation flag, set to false by default
  • minValue - (number) minimum slider's value
  • maxValue - (number) maximum slider's value
  • value - (number) slider's current value
  • step - (number) step of the slider

When the page is loaded, the slider will be displayed on page with the current value set in it.

Related sample: Init with arguments

Initialization by Object Notation

Initialization of this kind is similar to the above mentioned types. The only difference is that the second parameter is an object containing all the initialization parameters:

<div id="slider"></div>
<script>
    var mySlider = new dhtmlXSlider({
        parent: "sliderObj",
        size:   100,
        step:   1,
        min:    1,
        max:    100,
        value:  50
    });
</script>

Other available parameters are enumerated in the article Object Constructor.

Related sample: Init from object

Inline Initialization

This type of initialization presupposes that Slider can be created without indicating an object for it. It should be noted that Slider will be created at the same place where the initialization script was called:

var mySlider = new dhtmlXSlider(null, 300);
//or
var mySlider = new dhtmlXSlider(null, {
    size:100,
    skin: "ball",
    vertical:false,
    step:1,
    min:1,
    max:100,
    value:50
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • dhtmlXSlider API
  • Initializing Slider
  • Object Constructor
  • Skinning Slider
  • Configuring Slider
  • Range Mode
  • Handling Events
  • Migration from 3.6 to 4.0
Start Slider

Object Constructor

var mySlider = new dhtmlXSlider({
    parent:     "objId",
    size:       150,
    value:      5,
    step:       1,
    min:        -10,
    max:        150,
    vertical:   true,
    linkTo:     "inp",
    inverse:    true
});

where

  • parent - (id) id of an HTML element which will be used as parent (or object itself), mandatory
  • linkTo - (string|object) links slider to other control (linkTo())
  • size - (number) size in pixels (slider adjusts to the container's size by default)
  • skin - (string) name of the skin, optional
  • vertical - (boolean) if set to true, slider will be rendered as a vertical one, false by default
  • min - (number) min value of slider, 0 by default
  • max - (number) max value of slider, 99 by default
  • value - (number) current value of slider, 0 by default
  • step - (number) step of slider, 1 by default
  • disabled - (boolean) if set to true, slider is initially inactive, to make it active call the enable() method, false by default
  • tooltip - (boolean) if true, a tooltip with the current slider's value is displayed on hovering a mouse pointer over the handler, false by default
  • visible - (boolean) if set to false, slider is initially hidden and will be shown on calling the method show(), true by default
  • inverse - (boolean) if set to true, the slider shows values from max to min (added in version 4.1)
<div id='my_slider_here'></div>
<script>
    //common init code
    var mySlider = new dhtmlXSlider({parent: "my_slider_here", size: 100});
</script>

There's also a possibility to initialize slider by passing a set of arguments.

var mySlider = new dhtmlXSlider(parent,size,skin,vertical,min,max,value,step);

Related sample: Init from object

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Skinning Slider DHTMLX Docs

Documentation
  • dhtmlXSlider API
  • Initializing Slider
  • Object Constructor
  • Skinning Slider
    • Available Skins
  • Configuring Slider
  • Range Mode
  • Handling Events
  • Migration from 3.6 to 4.0
Start Slider

Skinning Slider

The skin can be set for dhtmlxSlider in one of the following ways:

  • Through one of initialization parameters:
var mySlider = new dhtmlXSlider("slider", 100, "dhx_web", ...);
// or
var mySlider = new dhtmlXSlider("slider", {
    skin: "dhx_web",
    ...
});
  • Through the setSkin() method called after slider's initialization:
mySlider.setSkin(skin);

where:

  • skin - (string) the skin name

Available Skins

The following skins are available for this component:

material (default)
dhx_skyblue
dhx_web
dhx_terrace

Related sample: Skins

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring Slider DHTMLX Docs

Documentation
  • dhtmlXSlider API
  • Initializing Slider
  • Object Constructor
  • Skinning Slider
  • Configuring Slider
    • Setting Minimum/Maximum/Current Values
    • Setting Step
    • Setting Tooltip
    • Linking Slider to Object
  • Range Mode
  • Handling Events
  • Migration from 3.6 to 4.0
Start Slider

Configuring Slider

Setting Minimum/Maximum/Current Values

There are two possible ways for setting minimum, maximum, and current values in dhtmlxSlider:

  • Through one of initialization parameters:
    var mySlider = new dhtmlXSlider(container,size,skin,vertical,min,max,value,...);
//or
var mySlider = new dhtmlXSlider("slider", {
    min:1,
    max:100,
    value: 50,
    ...
});
  • Through setMin(), setMax(), and setValue() methods called after slider's initialization:
    mySlider.setMin(10); // leftmost position
mySlider.setMax(10); // rightmost position
mySlider.setValue(50); // current position
    The current slider's value can be got with the help of method (getValue):
    var value = mySlider.getValue(); // returns current slider's position

Setting Step

It is possible to set minimal allowed difference between slider's values (step) in the following way:

  • Through one of initialization parameters:
    var mySlider = new dhtmlXSlider(container,size,skin,vertical,min,max,value,step);
//or
var mySlider = new dhtmlXSlider("slider", {
step: 1,
...
});
  • Through the setStep() method called after slider's initialization:
    mySlider.setStep(1);

Setting Tooltip

There is a method that enables/disables slider's tooltip easily:

mySlider.enableTooltip(true/false); // true by default

This tooltip displays changeable values of the slider when the user moves the slider's thumb.

Related sample: Enable / disable tooltip

Linking Slider to Object

Slider can be linked to some objects on page. In this case, the linkTo() method is used. The slider can be linked to:

  • An HTML input;
  • An HTML textarea;
  • An HTML select;
  • Any HTML container tag.
mySlider.linkTo(objectId);

The example provided below shows the way how the slider can be linked to an HTML input:

<input type="text" id="input">
<script>
    var mySlider = new dhtmlXSlider(null, 500);
    mySlider.linkTo("input");
</script>

Related sample: Link slider to object

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Range Mode DHTMLX Docs

Documentation
  • dhtmlXSlider API
  • Initializing Slider
  • Object Constructor
  • Skinning Slider
  • Configuring Slider
  • Range Mode
  • Handling Events
  • Migration from 3.6 to 4.0
Start Slider

Range Mode

In this mode you can use two handles for selecting some range of values. The same as a one-handle slider the two-handle one can be either horizontal or vertical. It can work with decimal values and tooltips, and runs flawlessly in the inversed mode. All the standard dhtmlxSlider API is supported.

To enable the range mode, you need to set the range property to true and specify an array of two values: min and max values of the range:

mySlider = new dhtmlXSlider({
    parent: "sliderObj",
    linkTo: ["sliderLink", "sliderLink2"],
    step: 1,
    min: 10,
    max: 30,
    value: [15, 25],
    range: true
});

Related sample: Range mode

Note that the "linkTo" and "value" attributes should have the array type and contain a pair of values for both handles.

The same concerns the getValue method. For the range mode it returns an array with a pair of values. The first parameter for setValue should be an array, respectively.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXSlider API
  • Initializing Slider
  • Object Constructor
  • Skinning Slider
  • Configuring Slider
  • Range Mode
  • Handling Events
    • Attaching events
    • Detaching events
    • The list of events
  • Migration from 3.6 to 4.0
Start Slider

Handling Events

Attaching events

You can attach several handlers to the same event using the method attachEvent():

mySlider.attachEvent("onClick", function(){
    // your code here
});

Several handlers can be attached to one and the same event, and all of them will be executed.

The names of the events are case-insensitive.

Detaching events

To detach an event use the method detachEvent():

mySlider.detachEvent(myEvent);

The list of events

You can find the full list of events in the Slider API.

Related sample: Events

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration from 3.6 to 4.0 DHTMLX Docs

Documentation
  • dhtmlXSlider API
  • Initializing Slider
  • Object Constructor
  • Skinning Slider
  • Configuring Slider
  • Range Mode
  • Handling Events
  • Migration from 3.6 to 4.0
Start Slider

Migration from 3.6 to 4.0

1) In the new version of DHTMLX Library the names of some methods were changed. We've made these changes as the previous names of the methods under question didn't reflect their functionality precisely, which could cause ambiguity or misunderstanding.

2) Since the release of the latest version of DHTMLX library some functionality has been removed. It was made as this functionality is no longer needed and therefore isn't supported.

Up to version 3.6 | From version 4.0
Function names changed
new dhtmlxSlider() | new dhtmlXSlider()
mySlider.setOnChangeHandler(function(){}) | mySlider.attachEvent("onChange", function(){})
Functionality was removed
mySlider.init() | no longer used, inited on constructor stage
mySlider.setImagePath() | no longer used
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Tabbar DHTMLX Docs

Documentation
  • Tabbar
    • dhtmlXTabBar API
    • dhtmlXTabBarCell API
    • Initializing Tabbar
    • Configuring Tabbar
    • Configuring Tabs
    • Attaching Components
    • Attaching Menu/Status Bar
    • Attaching HTML
    • Attaching URL
    • Attaching Google Maps
    • Progress Bar
    • Different Content in the Same Cell
    • Coloring Text Selection
    • Migration from 3.6 to 4.0
Start

Tabbar

dhtmlxTabbar is a JavaScript tab bar control for creating dynamic interfaces with handy tabbed navigation. With this component, you can add feature-rich, nice-looking Ajax tabs to your website or application within a few minutes.

API reference
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
Related resources
  • You may download dhtmlxTabbar from dhtmlx.com
  • Check online samples for dhtmlxTabbar
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Working with Tabbar

  • Initializing Tabbar
  • Configuring Tabbar
  • Configuring Tabs
 Guides you through the ways of Tabbar's initialization, as well as gives info on the possibilities of configuring Tabbar and its tabs.

Operating the Content

  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
 Covers how you can integrate Tabbar with other dhtmlx components and third-party components.

Other

  • Migration from 3.6 to 4.0
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXTabBar API DHTMLX Docs

Documentation
  • dhtmlXTabBar API
    • Methods
    • Events
  • dhtmlXTabBarCell API
  • Initializing Tabbar
  • Configuring Tabbar
  • Configuring Tabs
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

dhtmlXTabBar API

Methods
addTab | adds a new tab to Tabbar
adjustOuterSize | adjusts the tabbar's size when the parent's size was changed
attachEvent | adds any user-defined handler to available events
attachFooter | attaches footer to component's bottom
attachHeader | attaches header to component's top
attachMenu | attaches dhtmlxMenu to component's top
attachRibbon | attaches dhtmlxRibbon to component's top
attachStatusBar | attaches a status bar object to component's bottom
attachToolbar | attaches dhtmlxToolbar to component's top
cells | returns dhtmlXTabBarCell instance (tabbar's tab)
clearAll | removes all tabs
destructor | unloads the tabbar
detachEvent | detaches a handler from an event
detachFooter | detaches footer from component's bottom
detachHeader | detaches header from component's top
detachMenu | detaches dhtmlxMenu from component's top
detachRibbon | detaches dhtmlxRibbon from component's top
detachStatusBar | detaches status bar object from component's bottom
detachToolbar | detaches dhtmlxToolbar from component's top
disableTab | disables the specified tab in the tabbar
enableAutoReSize | enables/disables automatic adjusting of height and width to the outer container
enableAutoSize | enables/disables auto adjusting of height and width to the inner content
enableContentZone | enables/disables the content zone
enableForceHiding | enables/disables the force hiding mode
enableScroll | enables/disables scrolls (enabled by default)
enableTab | enables the specified tab in the tabbar
enableTabCloseButton | enables/disables a "close" button for tabs
forEachCell | an iterator, calls a user-defined handler for each tab
forEachTab | an iterator, calls a user-defined handler for each tab
forceLoad | reloads the URL attached to a cell
getActiveTab | returns id of the active tab
getAllTabs | returns an array of the tabbar tabs' ids
getAttachedMenu | returns dhtmlxMenu instance attached to component's top
getAttachedRibbon | returns dhtmlxRibbon instance attached to component's top
getAttachedStatusBar | returns status bar object attached to component's bottom
getAttachedToolbar | returns dhtmlxToolbar instance attached to component's top
getIndex | returns the tab's index
getLabel | returns the tab's text
getNumberOfTabs | returns the number of tabs
goToNextTab | selects the tab next to the active one
goToPrevTab | selects the tab prev to the active one
hideMenu | hides dhtmlxMenu attached to component's top
hideRibbon | hides dhtmlxRibbon attached to component's top
hideStatusBar | hides status bar object attached to component's bottom
hideTab | hides the specified tab
hideToolbar | hides dhtmlxToolbar attached to component's top
loadStruct | loads data to the component via XML or JSON, usually component config
loadXML | loads tabs config via xml
loadXMLString | loads tabs config via xml string
moveTab | moves the specified tab to the specified position
normalize | reformats the tabbar to remove the tab's scrolls
progressOff | hides progress indicator for full component
progressOn | shows progress indicator for full component
removeTab | removes the specified tab from the tabbar
setAlign | aligns tabs within the tabbar
setArrowsMode | sets the mode for auto show/hide left-right tabs arrows
setContent | sets the content of a tab
setContentHTML | sets the content of a tab as an HTML string
setContentHref | sets the content as the href to an external file
setCustomStyle | sets some specific colors for the specific tab
setHrefMode | sets the mode that allows loading of external content
setImagePath | sets the path to the image's folder
setLabel | sets the text of a tab
setMargin | sets the distance between tabs
setOffset | sets an offset before the first tab in the tabbar
setOffsets | sets offsets for parent container from each side
setSize | sets control size
setSizes | adjusts the size of the tabbar when the parent's size is changed
setSkin | changes the tabbar's skin
setSkinColors | allows setting skin to the specific color
setStyle | sets tab style
setTabActive | selects the specified tab
setTabInActive | unselects any selected tab
setTabsMode | sets tabs' mode (top or bottom)
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to component's top
showRibbon | shows dhtmlxRibbon attached to component's top
showStatusBar | shows status bar object attached to component's bottom
showTab | shows the specified tab
showToolbar | shows dhtmlxToolbar attached to component's bottom
tabWindow | returns iframe when an URL is attached to a cell
tabs | returns dhtmlXTabBarCell instance (tabbar's tab)
unload | unloads tabbar (destructor)
Events
onContentLoaded | fires when content is loaded through URL or URL-Ajax attaching
onSelect | fires when a tab is selected
onTabClick | fires when the user clicks on a tab
onTabClose | fires when the user presses the "Close" button on a tab
onTabContentLoaded | fires when the content of a tab is loaded (for Ajax-HTML mode only)
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • addTab
    • adjustOuterSize
    • attachEvent
    • attachFooter
    • attachHeader
    • attachMenu
    • attachRibbon
    • attachStatusBar
    • attachToolbar
    • cells
    • clearAll
    • destructor
    • detachEvent
    • detachFooter
    • detachHeader
    • detachMenu
    • detachRibbon
    • detachStatusBar
    • detachToolbar
    • disableTab
    • enableAutoReSize
    • enableAutoSize
    • enableContentZone
    • enableForceHiding
    • enableScroll
    • enableTab
    • enableTabCloseButton
    • forEachCell
    • forEachTab
    • forceLoad
    • getActiveTab
    • getAllTabs
    • getAttachedMenu
    • getAttachedRibbon
    • getAttachedStatusBar
    • getAttachedToolbar
    • getIndex
    • getLabel
    • getNumberOfTabs
    • goToNextTab
    • goToPrevTab
    • hideMenu
    • hideRibbon
    • hideStatusBar
    • hideTab
    • hideToolbar
    • loadStruct
    • loadXML
    • loadXMLString
    • moveTab
    • normalize
    • progressOff
    • progressOn
    • removeTab
    • setAlign
    • setArrowsMode
    • setContent
    • setContentHTML
    • setContentHref
    • setCustomStyle
    • setHrefMode
    • setImagePath
    • setLabel
    • setMargin
    • setOffset
    • setOffsets
    • setSize
    • setSizes
    • setSkin
    • setSkinColors
    • setStyle
    • setTabActive
    • setTabInActive
    • setTabsMode
    • showInnerScroll
    • showMenu
    • showRibbon
    • showStatusBar
    • showTab
    • showToolbar
    • tabWindow
    • tabs
    • unload
  • Events
Start Tabbar dhtmlXTabBar API

Methods

addTab | adds a new tab to Tabbar
adjustOuterSize | adjusts the tabbar's size when the parent's size was changed
attachEvent | adds any user-defined handler to available events
attachFooter | attaches footer to component's bottom
attachHeader | attaches header to component's top
attachMenu | attaches dhtmlxMenu to component's top
attachRibbon | attaches dhtmlxRibbon to component's top
attachStatusBar | attaches a status bar object to component's bottom
attachToolbar | attaches dhtmlxToolbar to component's top
cells | returns dhtmlXTabBarCell instance (tabbar's tab)
clearAll | removes all tabs
destructor | unloads the tabbar
detachEvent | detaches a handler from an event
detachFooter | detaches footer from component's bottom
detachHeader | detaches header from component's top
detachMenu | detaches dhtmlxMenu from component's top
detachRibbon | detaches dhtmlxRibbon from component's top
detachStatusBar | detaches status bar object from component's bottom
detachToolbar | detaches dhtmlxToolbar from component's top
disableTab | disables the specified tab in the tabbar
enableAutoReSize | enables/disables automatic adjusting of height and width to the outer container
enableAutoSize | enables/disables auto adjusting of height and width to the inner content
enableContentZone | enables/disables the content zone
enableForceHiding | enables/disables the force hiding mode
enableScroll | enables/disables scrolls (enabled by default)
enableTab | enables the specified tab in the tabbar
enableTabCloseButton | enables/disables a "close" button for tabs
forEachCell | an iterator, calls a user-defined handler for each tab
forEachTab | an iterator, calls a user-defined handler for each tab
forceLoad | reloads the URL attached to a cell
getActiveTab | returns id of the active tab
getAllTabs | returns an array of the tabbar tabs' ids
getAttachedMenu | returns dhtmlxMenu instance attached to component's top
getAttachedRibbon | returns dhtmlxRibbon instance attached to component's top
getAttachedStatusBar | returns status bar object attached to component's bottom
getAttachedToolbar | returns dhtmlxToolbar instance attached to component's top
getIndex | returns the tab's index
getLabel | returns the tab's text
getNumberOfTabs | returns the number of tabs
goToNextTab | selects the tab next to the active one
goToPrevTab | selects the tab prev to the active one
hideMenu | hides dhtmlxMenu attached to component's top
hideRibbon | hides dhtmlxRibbon attached to component's top
hideStatusBar | hides status bar object attached to component's bottom
hideTab | hides the specified tab
hideToolbar | hides dhtmlxToolbar attached to component's top
loadStruct | loads data to the component via XML or JSON, usually component config
loadXML | loads tabs config via xml
loadXMLString | loads tabs config via xml string
moveTab | moves the specified tab to the specified position
normalize | reformats the tabbar to remove the tab's scrolls
progressOff | hides progress indicator for full component
progressOn | shows progress indicator for full component
removeTab | removes the specified tab from the tabbar
setAlign | aligns tabs within the tabbar
setArrowsMode | sets the mode for auto show/hide left-right tabs arrows
setContent | sets the content of a tab
setContentHTML | sets the content of a tab as an HTML string
setContentHref | sets the content as the href to an external file
setCustomStyle | sets some specific colors for the specific tab
setHrefMode | sets the mode that allows loading of external content
setImagePath | sets the path to the image's folder
setLabel | sets the text of a tab
setMargin | sets the distance between tabs
setOffset | sets an offset before the first tab in the tabbar
setOffsets | sets offsets for parent container from each side
setSize | sets control size
setSizes | adjusts the size of the tabbar when the parent's size is changed
setSkin | changes the tabbar's skin
setSkinColors | allows setting skin to the specific color
setStyle | sets tab style
setTabActive | selects the specified tab
setTabInActive | unselects any selected tab
setTabsMode | sets tabs' mode (top or bottom)
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to component's top
showRibbon | shows dhtmlxRibbon attached to component's top
showStatusBar | shows status bar object attached to component's bottom
showTab | shows the specified tab
showToolbar | shows dhtmlxToolbar attached to component's bottom
tabWindow | returns iframe when an URL is attached to a cell
tabs | returns dhtmlXTabBarCell instance (tabbar's tab)
unload | unloads tabbar (destructor)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addTab DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

addTab

adds a new tab to Tabbar

void addTab(string|number id,string text,number width,number position,boolean active,boolean close);

Parameters

id | string|number | tab id
text | string | tab text
width | number | (optional) tab width, null by default, if not number - will be adjusted automatically
position | number | (optional) tab position, null by default (last tab)
active | boolean | (optional) set to true to select the added tab, false by default
close | boolean | (optional) set to true to render the Close button, false by default, overrides enableTabCloseButton()

Example

var myTabbar = new dhtmlXTabBar("parentId");

// closable, autowidth, select after add
myTabbar.addTab("a1", "Rage", null, null, true, true);

// simple tab
myTabbar.addTab("a2", "Motorhead");

// fixed width, 1st in a row, not active,
// not closable even if enableTabCloseButton() set to true
myTabbar.addTab("a3", "Poisonblack", 300, 0, false, false);

Change log

The "active" and "close" parameters are added in v4.0.

The "row" param (index of a row) is no longer used, 4.0 tabbar has only 1 row.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


adjustOuterSize DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

adjustOuterSize

adjusts the tabbar's size when the parent's size was changed

void adjustOuterSize();

Deprecated

new usage

myTabbar.setSizes();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachFooter DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

attachFooter

attaches footer to component's bottom

void attachFooter(string|number|HTMLElement id, [number height] );

Parameters

id | string|number|HTMLElement | id or DOM element
height | number | optional, footer height

Example

dhxComponent.attachFooter("my_footer");

Details

If height is not specified, component will try to detect it automatically. In this case you'd better specify it in CSS:

#my_footer {
    padding-top: 2px;
    background-color: white;
}

#my_footer .my_footer_text {
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 10px;
    height: 70px; /* for autodetect */
    border: 1px solid #a4bed4
}
<div id="my_footer">
    <div class="my_footer_text">
        Hi! I'm footer!
    </div>
</div>

You can use visibility:hidden style for keeping your element hidden while it is not attached to a component, after attaching the style will be changed to visibility:visible.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHeader DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

attachHeader

attaches header to component's top

void attachHeader(string|number|HTMLElement id, [number height] );

Parameters

id | string|number|HTMLElement | id or DOM element
height | number | optional, header height

Example

dhxComponent.attachHeader("my_header");

Details

If height is not specified, component will try to detect it automatically. In this case you'd better specify it in CSS:

#my_header {
    padding-bottom: 2px;
    background-color: white;
}

#my_header .my_header_text {
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 10px;
    height: 70px; /* for autodetect */
    border: 1px solid #a4bed4
}
<div id="my_header">
    <div class="my_header_text">
        Hi! I'm header!
    </div>
</div>

You can use visibility:hidden style for keeping your element hidden while it is not attached to component. After attaching the style will be changed to visibility:visible.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMenu DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

attachMenu

attaches dhtmlxMenu to component's top

object attachMenu( [object conf] );

Parameters

conf object optional, menu config

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.attachMenu({
    icons_path: "imgs/menu/icons/",
    json: "data/json/menu.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachRibbon DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

attachRibbon

attaches dhtmlxRibbon to component's top

object attachRibbon( [object conf] );

Parameters

conf object optional, ribbon config

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.attachRibbon({
    icons_path: "imgs/ribbon/icons/",
    json: "data/json/ribbon.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachStatusBar DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

attachStatusBar

attaches a status bar object to component's bottom

object attachStatusBar( [object conf] );

Parameters

conf object optional, status bar init params

Returns

object status bar object

Example

/* conf param properties */
{
    text:   "Text", // status bar init text
    height: 20      // status bar init height
}

/* init/attach status bar */

// default behaviour
var sbObj = dhxComponent.attachStatusBar();

// with text
var sbObj = dhxComponent.attachStatusBar({text: "Loading..."});

// with text and custom height
var sbObj = dhxComponent.attachStatusBar({text: "Loading...", height: 30});

/* operations with status bar object */

// set text
sbObj.setText("Page was successfuly loaded");

// get text
var text = sbObj.getText();

Change log

conf param was added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToolbar DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

attachToolbar

attaches dhtmlxToolbar to component's top

object attachToolbar( [object conf] );

Parameters

conf object optional, toolbar config

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.attachToolbar({
    icons_path: "imgs/toolbar/icons/",
    json: "data/json/toolbar.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cells DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

cells

returns dhtmlXTabBarCell instance (tabbar's tab)

dhtmlXTabBarCell cells(string|number id);

Parameters

id string|number tab id

Returns

dhtmlXTabBarCell dhtmlXTabBarCell instance

Example

var cell = myTabbar.cells(id);
cell.attachHTMLString("some text here");

Details

alias for tabs()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearAll DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

clearAll

removes all tabs

void clearAll();

Example

var myTabbar = new dhtmlXTabBar("parentId");

// adding tabs
myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");

// remove all
myTabbar.clearAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


destructor DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

destructor

unloads the tabbar

void destructor();

Deprecated

new usage

myTabbar.unload();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachFooter DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

detachFooter

detaches footer from component's bottom

void detachFooter();

Example

dhxComponent.detachFooter();

Details

footer DOM element will be attached to body with visibility:hidden css style

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachHeader DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

detachHeader

detaches header from component's top

void detachHeader();

Example

dhxComponent.detachHeader();

Details

header DOM element will be attached to body with visibility:hidden css style

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachMenu DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

detachMenu

detaches dhtmlxMenu from component's top

void detachMenu();

Example

var myMenu = dhxComponent.attachMenu();

// detach
dhxComponent.detachMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachRibbon DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

detachRibbon

detaches dhtmlxRibbon from component's top

void detachRibbon();

Example

var myRibbon = dhxComponent.attachRibbon();

// detach
dhxComponent.detachRibbon();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachStatusBar DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

detachStatusBar

detaches status bar object from component's bottom

void detachStatusBar();

Example

var sbObj = dhxComponent.attachStatusBar();

// detach
dhxComponent.detachStatusBar();
sbObj = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachToolbar DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

detachToolbar

detaches dhtmlxToolbar from component's top

void detachToolbar();

Example

var myToolbar = dhxComponent.attachToolbar();

// detach
dhxComponent.detachToolbar();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disableTab DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

disableTab

disables the specified tab in the tabbar

void disableTab();

Deprecated

new usage

myTabbar.tabs(id).disable();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoReSize DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

enableAutoReSize

enables/disables automatic adjusting of height and width to the outer container

void enableAutoReSize();

Example

myTabbar.enableAutoReSize();

Details

Tabbar will be automatically adjusted in the fullscreen mode.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoSize DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

enableAutoSize

enables/disables auto adjusting of height and width to the inner content

void enableAutoSize();

Deprecated

from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableContentZone DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

enableContentZone

enables/disables the content zone

void enableContentZone(boolean mode);

Parameters

mode boolean true/false to enable/disable, enabled by default

Example

var myTabbar = new dhtmlXTabBar("parentId");

// disabling content zone
myTabbar.enableContentZone(false);

// then adding tabs
myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");

Details

used to show custom content in a custom area

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableForceHiding DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

enableForceHiding

enables/disables the force hiding mode

void enableForceHiding();

Deprecated

from version 4.0

Details

solves IE problems with iframes in HTML content, but can cause problems for other dhtmlx components inside tabs

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableScroll DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

enableScroll

enables/disables scrolls (enabled by default)

void enableScroll();

Deprecated

from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableTab DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

enableTab

enables the specified tab in the tabbar

void enableTab();

Deprecated

new usage

myTabbar.tabs(id).enable();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableTabCloseButton DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

enableTabCloseButton

enables/disables a "close" button for tabs

void enableTabCloseButton(boolean mode);

Parameters

mode boolean true/false to enable/disable, disabled by default

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage"); // without close button
myTabbar.addTab("a2", "Motorhead", null, null, null, true); // with close button

// enable close button for new tabs
myTabbar.enableTabCloseButton(true);

myTabbar.addTab("a3", "Poisonblack"); // with close button
myTabbar.addTab("a4", "Manowar", null, null, null, false); // without close button

Details

affects only the tabs added after, can be overridden by "close" param in addTab()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachCell DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

forEachCell

an iterator, calls a user-defined handler for each tab

void forEachCell(function handler);

Parameters

handler function a user-defined handler to call, tab object will be passed as a param
Details

alias for forEachTab()

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachTab DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

forEachTab

an iterator, calls a user-defined handler for each tab

void forEachTab(function handler);

Parameters

handler function a user-defined handler to call, tab object will be passed as a param

Example

var myTabbar = new dhtmlXTabBar("parentId");

// as an example - disable all tabs
myTabbar.forEachTab(function(tab){
    // your code here
    tab.disable();
    // to get id
    var id = tab.getId();
});

// the same in a different way
var ids = myTabbar.getAllTabs();
for (var q=0; q<ids.length; q++) {
    myTabbar.tabs(ids[q]).disable();
}

Details

can be useful when you need to perform the same operation for all tabs

function(tab){...} - here "tab" param is the same object which is returned by myTabbar.tabs(id)

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forceLoad DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

forceLoad

reloads the URL attached to a cell

void forceLoad(string|number id);

Deprecated

new usage

myTabbar.cells(id).reloadURL();

Parameters

id string|number tab id
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getActiveTab DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

getActiveTab

returns id of the active tab

string|number getActiveTab();

Returns

string|number the tab's id or null if tab not selected

Example

var myTabbar = new dhtmlXTabBar("parentId");

// get active tab
var actvId = myTabbar.getActiveTab();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllTabs DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

getAllTabs

returns an array of the tabbar tabs' ids

array getAllTabs();

Returns

array array with tabs ids

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");

// get list of tabs
var ids = myTabbar.getAllTabs(); // -> ["a1", "a2"]

Change log

added in 3.5

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedMenu DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

getAttachedMenu

returns dhtmlxMenu instance attached to component's top

dhtmlXMenuObject getAttachedMenu();

Returns

dhtmlXMenuObject dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.attachMenu();

// somewhere in other place
var attachedMenu = dhxComponent.getAttachedMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedRibbon DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

getAttachedRibbon

returns dhtmlxRibbon instance attached to component's top

dhtmlXRibbon getAttachedRibbon();

Returns

dhtmlXRibbon dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.attachRibbon();

// somewhere in other place
var attachedRibbon = dhxComponent.getAttachedRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedStatusBar DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

getAttachedStatusBar

returns status bar object attached to component's bottom

object getAttachedStatusBar();

Returns

object StatusBar instance

Example

var myStatusBar = dhxComponent.attachStatusBar();

// somewhere in other place
var attachedStatusBar = dhxComponent.getAttachedStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedToolbar DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

getAttachedToolbar

returns dhtmlxToolbar instance attached to component's top

dhtmlXToolbarObject getAttachedToolbar();

Returns

dhtmlXToolbarObject dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.attachToolbar();

// somewhere in other place
var attachedToolbar = dhxComponent.getAttachedToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getIndex DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

getIndex

returns the tab's index

number getIndex();

Deprecated

new usage

var ind = myTabbar.tabs(id).getIndex();

Returns

number the tab's index or -1 if tab doesn't exist
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getLabel DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

getLabel

returns the tab's text

string getLabel();

Deprecated

new usage

var text = myTabbar.tabs(id).getText();

Returns

string tab text
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getNumberOfTabs DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

getNumberOfTabs

returns the number of tabs

number getNumberOfTabs();

Returns

number the number of tabs

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");

// get number of tabs
var tabsCount = myTabbar.getNumberOfTabs(); // -> 2

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


goToNextTab DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

goToNextTab

selects the tab next to the active one

void goToNextTab();

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");
myTabbar.addTab("a3", "Poisonblack");

myTabbar.disableTab("a2");
// -> state: a1 - selected, a2 - disabled not selected, a3 - not selected

myTabbar.goToNextTab();
// -> state: a1 - not selected, a2 - disabled selected, a3 - not selected

myTabbar.setTabInActive();
// -> state: a1 - not selected, a2 - disabled not selected, a3 - not selected

myTabbar.goToNextTab();
// -> state: a1 - selected, a2 - disabled not selected, a3 - not selected

Details

skips hidden tabs; selects disabled tabs if any; selects the first tab, if no one selected; if the last tab selected, does nothing

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


goToPrevTab DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

goToPrevTab

selects the tab prev to the active one

void goToPrevTab();

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage");
myTabbar.addTab("a2", "Motorhead");
myTabbar.addTab("a3", "Poisonblack", null, null, true);

myTabbar.disableTab("a2");
// -> state: a1 - not selected, a2 - disabled not selected, a3 - selected

myTabbar.goToPrevTab();
// -> state: a1 - not selected, a2 - disabled selected, a3 - not selected

myTabbar.setTabInActive();
// -> state: a1 - not selected, a2 - disabled not selected, a3 - not selected

myTabbar.goToPrevTab();
// -> state: a1 - selected, a2 - disabled not selected, a3 - not selected

Details

skips hidden tabs; selects disabled tabs if any; selects the first tab, if no one selected; if the first tab selected, does nothing

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMenu DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

hideMenu

hides dhtmlxMenu attached to component's top

void hideMenu();

Example

dhxComponent.hideMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideRibbon DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

hideRibbon

hides dhtmlxRibbon attached to component's top

void hideRibbon();

Example

dhxComponent.hideRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideStatusBar DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

hideStatusBar

hides status bar object attached to component's bottom

void hideStatusBar();

Example

dhxComponent.hideStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideTab DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

hideTab

hides the specified tab

void hideTab();

Deprecated

new usage

myTabbar.tabs(id).hide();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideToolbar DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

hideToolbar

hides dhtmlxToolbar attached to component's top

void hideToolbar();

Example

dhxComponent.hideToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadStruct DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

loadStruct

loads data to the component via XML or JSON, usually component config

promise loadStruct(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.loadStruct('<data><node id="a1".../></data>');

// json/xml from server
myComponent.loadStruct("server/data.xml");

// local json/xml with callback
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.loadStruct('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.loadStruct("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.loadStruct(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure response has the header "Content-Type: text/xml" for XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadXML DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

loadXML

loads tabs config via xml

void loadXML(string xmlUrl,function doOnLoad);

Deprecated

new usage

myTabbar.loadStruct(xmlUrl, function(){});

Parameters

xmlUrl | string | xml url
doOnLoad | function | (optional) calls a user-defined handler after xml is loaded and tabs are rendered
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadXMLString DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

loadXMLString

loads tabs config via xml string

void loadXMLString(string xmlString,function doOnLoad);

Deprecated

new usage

myTabbar.loadStruct(xmlString, function(){});

Parameters

xmlString | string | xml string
doOnLoad | function | (optional) calls a user-defined handler after xml is loaded and tabs are rendered
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveTab DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

moveTab

moves the specified tab to the specified position

void moveTab(string|number id,number index);

Parameters

id | string|number | tab id
index | number | the new tab position

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");

myTabbar.moveTab("a1", 1); // new order -> "Motorhead", "Rage"

Change log

added in version 3.6

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


normalize DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

normalize

reformats the tabbar to remove the tab's scrolls

void normalize();

Deprecated

from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOff DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

progressOff

hides progress indicator for full component

void progressOff();

Example

dhxComponent.progressOff();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOn DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

progressOn

shows progress indicator for full component

void progressOn();

Example

dhxComponent.progressOn();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


removeTab DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

removeTab

removes the specified tab from the tabbar

void removeTab();

Deprecated

new usage

myTabbar.tabs(id).close();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setAlign DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setAlign

aligns tabs within the tabbar

void setAlign(string align);

Parameters

align string "left" or "right", "left" by default

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.setAlign("right");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");
myTabbar.addTab("a3", "Poisonblack");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setArrowsMode DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setArrowsMode

sets the mode for auto show/hide left-right tabs arrows

void setArrowsMode(string mode);

Parameters

mode string the mode of showing tabs arrows: "auto" or "always"

Example

myTabbar.setArrowsMode(mode);

Details
  • the "auto" mode allows automatically show/hide tabs arrows
  • in the "always" mode tabs arrows are always shown
Change log

added in 4.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setContent DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setContent

sets the content of a tab

void setContent(string|number id,string|number|HTMLElement obj);

Deprecated

new usage

myTabbar.cells(id).attachObject(obj);

Parameters

id | string|number | the tab id
obj | string|number|HTMLElement | an HTML object to attach or the object id
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setContentHTML DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setContentHTML

sets the content of a tab as an HTML string

void setContentHTML(string|number id,string htmlString);

Deprecated

new usage

myTabbar.tabs(id).attachHTMLString(htmlString);

Parameters

id | string|number | the tab id
htmlString | string | an HTML string to attach
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setContentHref DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setContentHref

sets the content as the href to an external file

void setContentHref(string|number id,string href);

Deprecated

new usage

myTabbar.tabs(id).attachURL(href);

Parameters

id | string|number | the tab id
href | string | the link to an external file (another URL)
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCustomStyle DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setCustomStyle

sets some specific colors for the specific tab

void setCustomStyle();

Deprecated

from version 4.0, if you need to change the tab's text style:

myTabbar.tabs(id).setText(id, "<span style='color:red;'>Tab</span>");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setHrefMode DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setHrefMode

sets the mode that allows loading of external content

void setHrefMode(string mode);

Deprecated

new usage:

// for iframe/iframes mode
myTabbar.tabs(id).attachURL(url);

// for ajax mode
myTabbar.tabs(id).attachURL(url, true);

Parameters

mode string href mode - "iframe" / "iframes" / "ajax"
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setImagePath DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setImagePath

sets the path to the image's folder

void setImagePath();

Deprecated

since version 4.0 the function is deprecated, as it is no longer needed

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setLabel DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setLabel

sets the text of a tab

void setLabel();

Deprecated

new usage

myTabbar.tabs(id).setText(text);
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setMargin DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setMargin

sets the distance between tabs

void setMargin();

Deprecated

from version 4.0, controlled by skin

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOffset DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setOffset

sets an offset before the first tab in the tabbar

void setOffset();

Deprecated

from version 4.0, controlled by skin

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOffsets DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setOffsets

sets offsets for parent container from each side

void setOffsets(object conf);

Parameters

conf object offsets config

Example

// init component
var myComponent = new dhtmlXComponent(...);

// setting offsets for parent container
// this also works for document.body init
myComponent.setOffsets({
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
});

// also you can specify offset only for a single direction
myComponent.setOffsets({
    bottom: 10
});

// or for several directions
myComponent.setOffsets({
    right: 10,
    left: 10
});

Change log

added in 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSize DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setSize

sets control size

void setSize();

Deprecated

from version 4.0

Details

to change size you need to change the parent's size and then to call setSizes()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSizes DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setSizes

adjusts the size of the tabbar when the parent's size is changed

void setSizes();

Example

var myTabbar = new dhtmlXTabBar("parentId");

// if you change parent's size
document.getElementById("parentId").style.width = "800px";
document.getElementById("parentId").style.height = "600px";

// tabbar needs to be adjusted
myTabbar.setSizes();

Details

added in version 4.0 in fullscreen mode and if the tabbar is attached to another dhtmlx component - called automatically

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setSkin

changes the tabbar's skin

void setSkin(string skin);

Parameters

skin string skin name, "dhx_skyblue" (default), "dhx_web" and "dhx_terrace" supported

Example

var myTabbar = new dhtmlXTabBar("parentId");
myTabbar.setSkin("dhx_skyblue");

// or
window.dhx.skin = "dhx_web";
var myTabbar = new dhtmlXTabBar("parentId"); // web skin will be applied

Details

on init stage a tabbar has the following skin autodetect logic:

  • if a tabbar is attached to another dhtmlx component - inherits its skin, if not:
  • checks window.dhx.skin property (new in version 4.0) and uses value if set, if not:
  • checks window.dhtmlx.skin (please, use dhx.skin instead of this one), if not:
  • tries to detect the skin automatically (depending on the attached css file, if several files attached, takes the skin of the last one)
  • if all prev attempts failed - uses the default skin - "dhx_skyblue"
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkinColors DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setSkinColors

allows setting skin to the specific color

void setSkinColors();

Deprecated

from version 4.0, please use online SkinBuilder

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setStyle DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setStyle

sets tab style

void setStyle();

Deprecated

from version 4.0, only predefined skins available:

myTabbar.setSkin(skin);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setTabActive DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setTabActive

selects the specified tab

void setTabActive();

Deprecated

new usage

myTabbar.tabs(id).setActive();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setTabInActive DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setTabInActive

unselects any selected tab

void setTabInActive();

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");
myTabbar.addTab("a3", "Poisonblack");

myTabbar.setTabInActive(); // deselect a1

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setTabsMode DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

setTabsMode

sets tabs' mode (top or bottom)

void setTabsMode(string mode);

Parameters

mode string "top" or "bottom", "top" by default

Example

// mode can be set by specifying 2nd param in the constructor
var myTabbar = new dhtmlXTabBar("parentId", "bottom");

// or using function
myTabbar.setTabsMode("bottom");

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showInnerScroll DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

showInnerScroll

shows inner cell scrolls

void showInnerScroll();

Deprecated

new usage

myTabbar.tabs(id).showInnerScroll();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMenu DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

showMenu

shows dhtmlxMenu attached to component's top

void showMenu();

Example

dhxComponent.showMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRibbon DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

showRibbon

shows dhtmlxRibbon attached to component's top

void showRibbon();

Example

dhxComponent.showRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showStatusBar DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

showStatusBar

shows status bar object attached to component's bottom

void showStatusBar();

Example

dhxComponent.showStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showTab DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

showTab

shows the specified tab

void showTab();

Deprecated

new usage

myTabbar.tabs(id).show();
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showToolbar DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

showToolbar

shows dhtmlxToolbar attached to component's bottom

void showToolbar();

Example

dhxComponent.showToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


tabWindow DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

tabWindow

returns iframe when an URL is attached to a cell

void tabWindow();

Deprecated

new usage

var ifr = myTabbar.tabs(id).getFrame();
See also
  • API
    • getFrame
    • Change log

    deprecated from version 4.0

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


tabs DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

tabs

returns dhtmlXTabBarCell instance (tabbar's tab)

dhtmlXTabBarCell tabs(string|number id);

Parameters

id string|number the tab id

Returns

dhtmlXTabBarCell dhtmlXTabBarCell instance

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");

// getting tab
var tab = myTabbar.tabs("a1");

// attaching something
var myGrid = tab.attachGrid();

// the same but shorter
var myGrid = myTabbar.tabs("a1").attachGrid();

Details

Used to attach content, menu/toolbar/status, show/hide progress, perform some tabs operations.

Please, check dhtmlXTabBarCell API.

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • addTab
  • adjustOuterSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • cells
  • clearAll
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disableTab
  • enableAutoReSize
  • enableAutoSize
  • enableContentZone
  • enableForceHiding
  • enableScroll
  • enableTab
  • enableTabCloseButton
  • forEachCell
  • forEachTab
  • forceLoad
  • getActiveTab
  • getAllTabs
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getIndex
  • getLabel
  • getNumberOfTabs
  • goToNextTab
  • goToPrevTab
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideTab
  • hideToolbar
  • loadStruct
  • loadXML
  • loadXMLString
  • moveTab
  • normalize
  • progressOff
  • progressOn
  • removeTab
  • setAlign
  • setArrowsMode
  • setContent
  • setContentHTML
  • setContentHref
  • setCustomStyle
  • setHrefMode
  • setImagePath
  • setLabel
  • setMargin
  • setOffset
  • setOffsets
  • setSize
  • setSizes
  • setSkin
  • setSkinColors
  • setStyle
  • setTabActive
  • setTabInActive
  • setTabsMode
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showTab
  • showToolbar
  • tabWindow
  • tabs
  • unload
Start Tabbar dhtmlXTabBar API Methods

unload

unloads tabbar (destructor)

void unload();

Example

var myTabbar = new dhtmlXTabBar("parentId");

// unload
myTabbar.unload();
myTabbar = null;

Details

if a tabbar is attached to the cell of any dhtmlx component, unload will be called automatically when you unload parent component by closing window/tab or calling parentComponent.unload()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onContentLoaded
    • onSelect
    • onTabClick
    • onTabClose
    • onTabContentLoaded
    • onXLE
    • onXLS
Start Tabbar dhtmlXTabBar API

Events

onContentLoaded | fires when content is loaded through URL or URL-Ajax attaching
onSelect | fires when a tab is selected
onTabClick | fires when the user clicks on a tab
onTabClose | fires when the user presses the "Close" button on a tab
onTabContentLoaded | fires when the content of a tab is loaded (for Ajax-HTML mode only)
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onContentLoaded DHTMLX Docs

Documentation
  • onContentLoaded
  • onSelect
  • onTabClick
  • onTabClose
  • onTabContentLoaded
  • onXLE
  • onXLS
Start Tabbar dhtmlXTabBar API Events

onContentLoaded

fires when content is loaded through URL or URL-Ajax attaching

void onContentLoaded(string|number id){ ... };

Parameters

id string|number tab id

Example

var myTabbar = new dhtmlXTabBar("parentId");
myTabbar.addTab("a1", "Some Page A", null, null, true);
myTabbar.addTab("a2", "Some Page B");

myTabbar.attachEvent("onContentLoaded", function(id){
    // your code here
});

myTabbar.attachURL("http://some.address.com/some.page.a.html");
myTabbar.attachURL("http://some.address.com/some.page.b.html", true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelect DHTMLX Docs

Documentation
  • onContentLoaded
  • onSelect
  • onTabClick
  • onTabClose
  • onTabContentLoaded
  • onXLE
  • onXLS
Start Tabbar dhtmlXTabBar API Events

onSelect

fires when a tab is selected

boolean onSelect(string|number id,string|number lastId){ ... };

Parameters

id | string|number | clicked tab id
lastId | string|number | id of the previously active tab, if any

Returns

boolean true|false to allow/cancel selection

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.attachEvent("onSelect", function(id, lastId){
    // your code here
    return true;
});

Details

Fires only for enabled tabs, return true|false to allow/cancel selecting

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onTabClick DHTMLX Docs

Documentation
  • onContentLoaded
  • onSelect
  • onTabClick
  • onTabClose
  • onTabContentLoaded
  • onXLE
  • onXLS
Start Tabbar dhtmlXTabBar API Events

onTabClick

fires when the user clicks on a tab

void onTabClick(string|number id,string|number lastId){ ... };

Parameters

id | string|number | id of the clicked tab
lastId | string|number | id of the previously active tab, if any

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.attachEvent("onTabClick", function(id, lastId){
    // your code here
});

Details

Fires both for enabled and disabled tabs, not cancelable.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onTabClose DHTMLX Docs

Documentation
  • onContentLoaded
  • onSelect
  • onTabClick
  • onTabClose
  • onTabContentLoaded
  • onXLE
  • onXLS
Start Tabbar dhtmlXTabBar API Events

onTabClose

fires when the user presses the "Close" button on a tab

boolean onTabClose(string|number id){ ... };

Parameters

id string|number the tab id

Returns

boolean true|false to allow/cancel closing

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.attachEvent("onTabClose", function(id){
    // your code here
    return true;
});

Details

Fires both for enabled and disabled tabs, return true|false to allow/cancel closing

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onTabContentLoaded DHTMLX Docs

Documentation
  • onContentLoaded
  • onSelect
  • onTabClick
  • onTabClose
  • onTabContentLoaded
  • onXLE
  • onXLS
Start Tabbar dhtmlXTabBar API Events

onTabContentLoaded

fires when the content of a tab is loaded (for Ajax-HTML mode only)

void onTabContentLoaded(string|number id){ ... };

Deprecated

new usage

myTabbar.attachEvent("onContentLoaded", function(id){
    // your code here
});

Parameters

id string|number the tab id
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onContentLoaded
  • onSelect
  • onTabClick
  • onTabClose
  • onTabContentLoaded
  • onXLE
  • onXLS
Start Tabbar dhtmlXTabBar API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onContentLoaded
  • onSelect
  • onTabClick
  • onTabClose
  • onTabContentLoaded
  • onXLE
  • onXLS
Start Tabbar dhtmlXTabBar API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXTabBarCell API DHTMLX Docs

Documentation
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
    • Methods
  • Initializing Tabbar
  • Configuring Tabbar
  • Configuring Tabs
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

dhtmlXTabBarCell API

Methods
appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
close | closes (unloads) the specified tab from the tabbar
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
disable | disables the specified tab in the tabbar
enable | enables the specified tab in the tabbar
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getFrame | returns an iframe object when an URL is attached to a cell
getId | returns the id of a cell
getIndex | returns the tab's index
getText | returns the tab's text
getViewName | returns the name of the current view
hide | hides the specified tab
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
isActive | returns the tab's active/inactive state
isEnabled | returns the tab's enabled/disabled state
isVisible | returns the tab's visible/hidden state
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
setActive | selects the specified tab
setText | sets the text of a tab
show | shows the specified tab
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
unloadView | unloads the specified view
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • appendObject
    • attachAccordion
    • attachCarousel
    • attachChart
    • attachDataView
    • attachEditor
    • attachForm
    • attachGrid
    • attachHTMLString
    • attachLayout
    • attachList
    • attachMap
    • attachMenu
    • attachObject
    • attachRibbon
    • attachScheduler
    • attachSidebar
    • attachStatusBar
    • attachTabbar
    • attachToolbar
    • attachTree
    • attachTreeView
    • attachURL
    • attachVault
    • close
    • detachMenu
    • detachObject
    • detachRibbon
    • detachStatusBar
    • detachToolbar
    • disable
    • enable
    • getAttachedMenu
    • getAttachedObject
    • getAttachedRibbon
    • getAttachedStatusBar
    • getAttachedToolbar
    • getFrame
    • getId
    • getIndex
    • getText
    • getViewName
    • hide
    • hideMenu
    • hideRibbon
    • hideStatusBar
    • hideToolbar
    • isActive
    • isEnabled
    • isVisible
    • progressOff
    • progressOn
    • reloadURL
    • setActive
    • setText
    • show
    • showInnerScroll
    • showMenu
    • showRibbon
    • showStatusBar
    • showToolbar
    • showView
    • unloadView
Start Tabbar dhtmlXTabBarCell API

Methods

appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
close | closes (unloads) the specified tab from the tabbar
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
disable | disables the specified tab in the tabbar
enable | enables the specified tab in the tabbar
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getFrame | returns an iframe object when an URL is attached to a cell
getId | returns the id of a cell
getIndex | returns the tab's index
getText | returns the tab's text
getViewName | returns the name of the current view
hide | hides the specified tab
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
isActive | returns the tab's active/inactive state
isEnabled | returns the tab's enabled/disabled state
isVisible | returns the tab's visible/hidden state
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
setActive | selects the specified tab
setText | sets the text of a tab
show | shows the specified tab
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
unloadView | unloads the specified view
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


appendObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

appendObject

attaches an object to a tab without clearing cell content

void appendObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

myTabbar.tabs(id).appendObject("div_a");
myTabbar.tabs(id).appendObject("div_b");
myTabbar.tabs(id).appendObject("div_c");

Details

  • style "display:none" will be removed automatically after attaching, it's useful to keep content hidden while not attached

  • for this mode a tab will add scrolls automatically, there's no need to specify width/height to the attached object (divs without specified dimension are usually stretched to 100% of width and height adjusted to content)

<div id="div_a" style="display:none;"> ... </div>
<div id="div_b"> ... </div>
<div id="div_c"> ... </div>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachAccordion DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachAccordion

attaches dhtmlxAccordion to a cell

dhtmlXAccordion attachAccordion( [object conf] );

Parameters

conf object optional, accordion config for object-api init

Returns

dhtmlXAccordion dhtmlXAccordion instance

Example

var myAcc = myTabbar.tabs(id).attachAccordion();
myAcc.addItem("a1", "First item", true);
myAcc.addItem("a2", "Second item");

// or
var myAcc = myTabbar.tabs(id).attachAccordion({
    icons_path: "icons/",
    items: [
        { id: "a1", text: "Main Page", icon: "flag_red.png" },
        { id: "a2", text: "Navigation", icon: "flag_green.png" },
        { id: "a3", text: "Feedback", icon: "flag_blue.png" }
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachCarousel DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachCarousel

attaches a carousel object to a tab

dhtmlXCarousel attachCarousel(number width,number height,object conf);

Parameters

width | number | the width of a carousel
height | number | the height of a carousel
conf | object | optional, the config of a carousel for object-api init

Returns

dhtmlXCarousel dhtmlXCarousel instance

Example

var myCarousel = myTabbar.tabs(id).attachCarousel(400, 300, conf){
    ...
});

Change log

added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachChart DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachChart

attaches dhtmlxChart to a tab

dhtmlXChart attachChart(object conf);

Parameters

conf object chart conf (please, check chart docs for details)

Returns

dhtmlXChart dhtmlXChart instance

Example

var myChart = myTabbar.tabs(id).attachChart({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachDataView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachDataView

attaches dhtmlxDataView to a tab

dhtmlXDataView attachDataView(object conf);

Parameters

conf object dataview conf (please, check DataView docs for details)

Returns

dhtmlXDataView dhtmlXDataView instance

Example

var myDataView = myTabbar.tabs(id).attachDataView({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEditor DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachEditor

attaches dhtmlxEditor to a tab

dhtmlXEditor attachEditor();

Returns

dhtmlXEditor dhtmlXEditor instance

Example

var myEditor = myTabbar.tabs(id).attachEditor();

Details

For details about Editor initialization, read the Object Constructor article.

More info about attaching Editor to other components is given in the article Adding Editor to DHTMLX Components.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachForm DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachForm

attaches dhtmlxForm to a tab

dhtmlXForm attachForm(object conf);

Parameters

conf object form conf (please, check form docs for details)

Returns

dhtmlXForm dhtmlXForm instance

Example

var myForm = myTabbar.tabs(id).attachForm({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachGrid DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachGrid

attaches dhtmlxGrid to a tab

dhtmlXGridObject attachGrid( [object config] );

Parameters

config object optional, an object with the Grid configuration

Returns

dhtmlXGridObject dhtmlXGridObject instance

Example

var myGrid = myTabbar.tabs(id).attachGrid();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHTMLString DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachHTMLString

attaches html content to a tab

void attachHTMLString(string htmlString);

Parameters

htmlString string an HTML string to attach

Example

myTabbar.tabs(id).attachHTMLString("<div>some content</div>");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachLayout DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachLayout

attaches dhtmlxLayout to a tab

dhtmlXLayoutObject attachLayout(string|object conf);

Parameters

conf string|object layout pattern or api-init config

Returns

dhtmlXLayoutObject dhtmlXLayoutObject instance

Example

// pattern only
var myLayout = myTabbar.tabs(id).attachLayout("4H");

// api-init config
var myLayout = myTabbar.tabs(id).attachLayout({
    pattern: "4H",
    cells: [
        {id: "a", text: "Navigation", width: 100, header: false},
        {id: "b", text: "Advertisement", height: 100},
        {id: "c", text: "Main Page"},
        {id: "d", text: "Links", collapse: true}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachList DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachList

attaches dhtmlxList to a tab

dhtmlXList attachList(object conf);

Parameters

conf object list conf (please, check List docs for details)

Returns

dhtmlXList dhtmlXList instance

Example

var myList = myTabbar.tabs(id).attachList({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMap DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachMap

attaches Google Maps to a tab

object attachMap( [object opts] );

Parameters

opts object optional, map options (please, check Google docs for details)

Returns

object google.maps.Map object

Example

var GMaps = myTabbar.tabs(id).attachMap();
//or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = myTabbar.tabs(id).attachMap(mapParams);

Details

Please, check Google docs for details.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachMenu

attaches dhtmlxMenu to a tab

object attachMenu( [object conf] );

Parameters

conf object optional, menu config

Returns

object dhtmlXMenuObject instance

Example

var myMenu = myTabbar.tabs(id).attachMenu({
    icons_path: "imgs/menu/icons/",
    json: "data/json/menu.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachObject

attaches an html object to a tab

void attachObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

myTabbar.tabs(id).attachObject("objectId");

Details
  • style "display:none" (if set) will be removed automatically after attaching, useful to keep content hidden while not attached
<div id="objectId" style="display: none;">...</div>
  • for this mode cell will not render native scrolls, so you need to use the following style: "width: 100%; height: 100%; overflow: auto;" to make attached object's scrolls appear when necessary
div#objectId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}
See also
  • API
    • detachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


attachRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachRibbon

attaches dhtmlxRibbon to a tab

object attachRibbon( [object conf] );

Parameters

conf object optional, ribbon config

Returns

object dhtmlXRibbon instance

Example

var myRibbon = myTabbar.tabs(id).attachRibbon({
    icons_path: "imgs/ribbon/icons/",
    json: "data/json/ribbon.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachScheduler DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachScheduler

attaches dhtmlxScheduler to a tab

object attachScheduler( [Date day,string mode,string contId,object scheduler] );

Parameters

day | Date | (optional) js date object, initial date in scheduler, current date by default
mode | string | (optional) name of the initial mode ("month", "day", "week"), "week" by default
contId | string | (optional) extended config, please see below
scheduler | object | (optional) dhtmlxScheduler object (another instance, only PRO version of scheduler)

Returns

object dhtmlXScheduler instance

Example

var myScheduler = myTabbar.tabs(id).attachScheduler();

// or
var myScheduler = myTabbar.tabs(id).attachScheduler(null, "month");

//or
var sTabs = '<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>'+
            '<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>'+
            '<div class="dhx_cal_tab" name="month_tab" style="right:280px;"></div>'+
            '<div class="dhx_cal_tab" name="timeline_tab" style="right:76px;"></div>';

var myScheduler = myTabbar.tabs(id).attachScheduler(null, "month", sTabs);

Details

There are two possible values of the contId parameter:

  • the id of the div that specifies the entire scheduler configuration
  • a string with the tabs' divs. In this case a scheduler will be rendered with the default configuration, except for the tabs: they can be presented by the default "day", "week", "month" members or by any other tabs' collection
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachSidebar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachSidebar

attaches dhtmlxSidebar to a tab

object attachSidebar( [object conf] );

Parameters

conf object optional, sidebar config for api-init

Returns

object dhtmlxSidebar instance

Example

var mySidebar = myTabbar.tabs(id).attachSidebar({
    items: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachStatusBar

attaches a status bar to a tab

obj attachStatusBar( [object conf] );

Parameters

conf object optional, status bar init params

Returns

obj status bar object

Example

/* conf param properties */
{
    text:   "Text", // status bar init text
    height: 20      // status bar init height
}

/* init/attach status bar */

// default behaviour
var sbObj = myTabbar.tabs(id).attachStatusBar();

// with text
var sbObj = myTabbar.tabs(id).attachStatusBar({text: "Loading..."});

// with text and custom height
var sbObj = myTabbar.tabs(id).attachStatusBar({text: "Loading...", height: 30});

/* operations with status bar object */

// set text
sbObj.setText("Page was successfuly loaded");

// get text
var text = sbObj.getText();

Details

Since version 4.1 toolbar can be attached into statusbar in order to be used for paging in grid:

// first attach status bar
myTabbar.tabs(id).attachStatusBar({
    text:   "<div id='pagingArea'></div>",
    paging: true
});

// then init paging in grid
myGrid.enablePaging(true, 9, 3, "pagingArea");
myGrid.setPagingSkin("toolbar");
Change log
  • conf param was added in version 4.0
  • paging:true added in 4.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTabbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachTabbar

attaches dhtmlxTabbar to a tab

object attachTabbar( [object conf] );

Parameters

conf object optional, tabbar config for API-initialization

Returns

object dhtmlXTabbar instance

Example

var myTabbar = myTabbar.tabs(id).attachTabbar({
    align: "right",
    mode: "bottom",
    tabs: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Details

The old parameter used for tabbar initialization - "mode" is deprecated since version 4.0 and replaced with "conf".

To set the tabs mode, use conf.mode:

// old deprecated
var myTabbar = myTabbar.tabs(id).attachTabbar("bottom");
// new usage
var myTabbar = myTabbar.tabs(id).attachTabbar({mode:"bottom"});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachToolbar

attaches dhtmlxToolbar to a tab

object attachToolbar( [object conf] );

Parameters

conf object optional, toolbar config

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = myTabbar.tabs(id).attachToolbar({
    icons_path: "imgs/toolbar/icons/",
    json: "data/json/toolbar.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTree DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachTree

attaches dhtmlxTree to a tab

object attachTree( [string|number rootId] );

Parameters

rootId string|number (optional) tree root id (check Tree docs for details)

Returns

object dhtmlXTreeObject instance

Example

var myTree = myTabbar.tabs(id).attachTree();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTreeView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachTreeView

attaches dhtmlxTreeView to a tab

object attachTreeView( [object conf] );

Parameters

conf object optional, treeview config

Returns

object dhtmlXTreeViewObject instance

Example

var myTreeView = myTabbar.tabs(id).attachTreeView({
    items: [
        {id: 1, text: "Books", open: 1, items: [
            {id: 2, text: "Turned at Dark / C. C. Hunter"},
            {id: 3, text: "Daire Meets Ever / Alyson Noël"}
        ]}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachURL DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachURL

attaches the specified URL to a tab

void attachURL(string url, [boolean ajax,boolean|object postData] );

Parameters

url | string | URL to attach
ajax | boolean | (optional) if set to true, the URL will be loaded by AJAX (async GET), false by default
postData | boolean|object | (optional) performs POST request (true for a simple post or an object with params)

Example

/* iframe */
// GET
myTabbar.tabs(id).attachURL("page.html");
// POST
myTabbar.tabs(id).attachURL("page.html", null, true);
// POST with params
myTabbar.tabs(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

/* by ajax */
// GET
myTabbar.tabs(id).attachURL("page.html", true);
// POST
myTabbar.tabs(id).attachURL("page.html", true, true);
// POST with params
myTabbar.tabs(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Details

important notes:

  • to prevent caching in some browsers, an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • loading is async, so to proceed with content, you need onContentLoaded event
  • learn how to control attached content here
Change log

postData param and the ability to perform POST request are added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachVault DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

attachVault

attaches dhtmlxVault to a tab

dhtmlXVaultObject attachVault(object conf);

Parameters

conf object Vault config for object-api initialization

Returns

dhtmlXVaultObject dhtmlxVault instance

Example

var myVault = myTabbar.tabs(id).attachVault({
    uploadUrl:      "http://my_mega_server/upload_handler.php",
    swfUrl:         "http://my_mega_server/upload_handler.php",
    slUrl:          "http://my_mega_server/upload_handler.php",
    swfPath:        "dhxvault.swf",
    slXap:          "dhxvault.xap"
});

Details

if separate component files are used - dhtmlxvault.js should be included after dhtmlxcontainer.js

Change log

added in 3.6.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


close DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

close

closes (unloads) the specified tab from the tabbar

void close( [string|number|boolean actvId] );

Parameters

actvId string|number|boolean (optional) if the specified tab is selected - selects the nearest tab or specifies its id, default true

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");
myTabbar.addTab("a3", "Poisonblack");

myTabbar.tabs("a1").close(); // close "a1" and select "a2"
// or
myTabbar.tabs("a1").close("a3"); // close "a1" and select "a3"
// or
myTabbar.tabs("a1").close(false); // close "a1" and don't select anything

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

detachMenu

detaches dhtmlxMenu from a tab

void detachMenu();

Example

var myMenu = myTabbar.tabs(id).attachMenu();

// detach
myTabbar.tabs(id).detachMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

detachObject

detaches any attached content from a tab

void detachObject( [boolean remove,string|number|HTMLElement moveTo] );

Parameters

remove | boolean | (optional) set to true to remove the content permanently, false by default
moveTo | string|number|HTMLElement | (optional) the object's id or the object itself to move content to (if the "remove" parameter is set to false)
Details

Let's consider possible behavior, depending on which parameters we pass to the method.

Assuming that we have attached Grid to the Tabbar's tab:

var myGrid = myTabbar.tabs(id).attachGrid();

In case we need to detach Grid later, there are several possible options:

1) calling the detachObject() method without parameters:

myTabbar.tabs(id).detachObject();

The Grid object won't be completely removed. It will be attached to the document.body outside the Tabbar container and hidden with the display:none property.

2) calling the detachObject() method with the "remove" parameter set to true:

myTabbar.tabs(id).detachObject(true);

The cell will be cleared. You need to clear the Grid object to remove it permanently.

myGrid = null;

3) calling the detachObject() method with the "remove" parameter set to false and passing an object (object's id) as the second parameter:

// assuming that a node with the id="tempNode" exists
myTabbar.tabs(id).detachObject(false, "tempNode");

The Grid object won't be completely removed. It will be moved to the "tempNode" container and hidden with the display:none property.

Note also that if you call myTabbar.unload(), the attached content will be removed permanently.

See also
  • API
    • attachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


detachRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

detachRibbon

detaches dhtmlxRibbon from a tab

void detachRibbon();

Example

var myRibbon = myTabbar.tabs(id).attachRibbon();

// detach
myTabbar.tabs(id).detachRibbon();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

detachStatusBar

detaches status bar from a tab

void detachStatusBar();

Example

var sbObj = myTabbar.tabs(id).attachStatusBar();

// detach
myTabbar.tabs(id).detachStatusBar();
sbObj = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

detachToolbar

detaches dhtmlxToolbar from a tab

void detachToolbar();

Example

var myToolbar = myTabbar.tabs(id).attachToolbar();

// detach
myTabbar.tabs(id).detachToolbar();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disable DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

disable

disables the specified tab in the tabbar

void disable(string|boolean activateId);

Parameters

activateIdstring|boolean (optional) set to "true" to select the next tab or
to specify its id (if disabled tab selected), false by default

Example

var myTabbar = new dhtmlXTabBar("parentId");

// disable only, tab still active
myTabbar.tabs("a1").disable();

// disable and select next one (if "a1" was selected)
myTabbar.tabs("a1").disable(true);

// disable and select specified (if "a1" was selected)
myTabbar.tabs("a1").disable("a3");

Details

disabled tabs ignore user clicks, but they can be selected by script

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enable DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

enable

enables the specified tab in the tabbar

void enable(boolean mode);

Parameters

mode boolean (optional) set to true to select tab after enable, default false

Example

var myTabbar = new dhtmlXTabBar("parentId");

// enable only
myTabbar.tabs("a1").enable();

// enable and then select
myTabbar.tabs("a1").enableTab(true);

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

getAttachedMenu

returns dhtmlxMenu instance attached to a tab

object getAttachedMenu();

Returns

object dhtmlXMenuObject instance

Example

var myMenu = myTabbar.tabs(id).attachMenu();

// somewhere in a different place
var attachedMenu = myTabbar.tabs(id).getAttachedMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

getAttachedObject

returns object attached to a tab

string|object getAttachedObject();

Returns

string|object attached object

Example

var myGrid = myTabbar.tabs(id).attachGrid({...});

// somewhere in a different place
var obj =  myTabbar.tabs(id).getAttachedObject();
if (typeof(window.dhtmlXGridObject) == "function" && obj instanceof dhtmlXGridObject) {
    // code related to grid
} else {
    // some other code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

getAttachedRibbon

returns dhtmlxRibbon instance attached to a tab

object getAttachedRibbon();

Returns

object dhtmlXRibbon instance

Example

var myRibbon = myTabbar.tabs(id).attachRibbon();

// somewhere in a different place
var attachedRibbon = myTabbar.tabs(id).getAttachedRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

getAttachedStatusBar

returns status bar object attached to a tab

object getAttachedStatusBar();

Returns

object status bar instance

Example

var myStatusBar = myTabbar.tabs(id).attachStatusBar();

// somewhere in a different place
var attachedStatusBar = myTabbar.tabs(id).getAttachedStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

getAttachedToolbar

returns dhtmlxToolbar instance attached to a tab

object getAttachedToolbar();

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = myTabbar.tabs(id).attachToolbar();

// somewhere in a different place
var attachedToolbar = myTabbar.tabs(id).getAttachedToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFrame DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

getFrame

returns an iframe object when an URL is attached to a tab

HTMLElement getFrame();

Returns

HTMLElement an iframe object

Example

// as loading is async, you need to do it through an event
myTabbar.attachEvent("onContentLoaded", function(id){

    // get frame
    var ifr = myTabbar.tabs(id).getFrame();

    // access to iframe's element
    var elem = ifr.contentWindow.document.getElementById("someId");
    elem.innerHTML = "some text";

    // access to iframe's function
    // make sure that the function is in the iframe's window scope
    ifr.contentWindow.someFunc();

});

// and then attach an URL
myTabbar.tabs(id).attachURL("server/page.php?param=value");

Details

learn how to manage the attached content from the article Attaching URL

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getId DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

getId

returns the id of a tab

string|number getId();

Returns

string|number the tab's id

Example

myTabbar.forEachTab(function(tab){
    var id = tab.getId();
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getIndex DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

getIndex

returns the tab's index

number getIndex();

Returns

number the tab's index or -1 if the tab doesn't exist

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");

// get index
var i1 = myTabbar.tabs("a1").getIndex(); // -> 0
var i2 = myTabbar.tabs("a2").getIndex(); // -> 1
var i3 = myTabbar.tabs("a3").getIndex(); // -> -1

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getText DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

getText

returns the tab's text

string getText();

Returns

string tab's text

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");

// get tab text
var text = myTabbar.tabs("a1").getText(); // -> "Rage"

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getViewName DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

getViewName

returns the name of the current view

string getViewName();

Returns

string view name

Example

var name = myTabbar.tabs(id).getViewName();

Details

The default view name is "def", it is created automatically when a tab is created

See also
  • API
    • showView
    • unloadView
  • Articles
    • Different Content in the Same Cell
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


hide DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

hide

hides the specified tab

void hide( [string|number|boolean actvId] );

Parameters

actvId string|number|boolean (optional) if the specified tab is selected - selects another tab, default true, see details

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");
myTabbar.addTab("a3", "Poisonblack");

myTabbar.tabs("a1").hide(); // hide a1 and select a2
// or
myTabbar.tabs("a1").hide("a3"); // hide a1 and select a3
// or
myTabbar.tabs("a1").hide(false); // hide a1 and do not select any tab

Details

If actvId set to true - tries to select the nearest tab, false - selects nothing. You can also specify id of the tab to be selected.

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

hideMenu

hides dhtmlxMenu attached to a tab

void hideMenu();

Example

myTabbar.tabs(id).hideMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

hideRibbon

hides dhtmlxRibbon attached to a tab

void hideRibbon();

Example

myTabbar.tabs(id).hideRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

hideStatusBar

hides status bar object attached to a tab

void hideStatusBar();

Example

myTabbar.tabs(id).hideStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

hideToolbar

hides dhtmlxToolbar attached to a tab

void hideToolbar();

Example

myTabbar.tabs(id).hideToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isActive DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

isActive

returns the tab's active/inactive state

boolean isActive();

Returns

boolean true/false if a tab is active/inactive

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");
myTabbar.addTab("a3", "Poisonblack");

var isActv = myTabbar.tabs("a1").isActive();

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isEnabled DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

isEnabled

returns the tab's enabled/disabled state

boolean isEnabled();

Returns

boolean true/false if a tab is enabled/disabled

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");
myTabbar.addTab("a3", "Poisonblack");

var isEn = myTabbar.tabs("a1").isEnabled();

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isVisible DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

isVisible

returns the tab's visible/hidden state

boolean isVisible();

Returns

boolean true/false if a tab is visible/hidden

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");
myTabbar.addTab("a3", "Poisonblack");

var isVis = myTabbar.tabs("a1").isVisible();

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOff DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

progressOff

hides the progress indicator in a tab

void progressOff();

Example

myTabbar.tabs(id).progressOff();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOn DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

progressOn

shows the progress indicator in a tab

void progressOn();

Example

myTabbar.tabs(id).progressOn();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


reloadURL DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

reloadURL

reloads the attached URL in a tab

void reloadURL();

Example

myTabbar.tabs(id).reloadURL();

Details

reloads both iFrame/AJAX attached, keeps postData and params, if any

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setActive DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

setActive

selects the specified tab

void setActive();

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage");
myTabbar.addTab("a2", "Motorhead");
myTabbar.addTab("a3", "Poisonblack");

// select tab
myTabbar.tabs("a1").setActive();

Details

a disabled tab can also be selected

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setText DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

setText

sets the text of a tab

void setText(string text);

Parameters

text string tab's text

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");

// change text
myTabbar.tabs("a1").setText("Rage!!!");

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

show

shows the specified tab

void show(boolean mode);

Parameters

mode boolean (optional) if set to true - selects the tab after show, default false

Example

var myTabbar = new dhtmlXTabBar("parentId");

myTabbar.addTab("a1", "Rage", null, null, true);
myTabbar.addTab("a2", "Motorhead");
myTabbar.addTab("a3", "Poisonblack");

myTabbar.tabs("a1").hide(); // hide a1 and select a2

// show tab
myTabbar.tabs("a1").show(); // show a1, but a2 still selected
// or
myTabbar.tabs("a1").show(true); // show a1 and then select

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showInnerScroll DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

showInnerScroll

shows inner tab scrolls

void showInnerScroll();

Example

myTabbar.tabs(id).showInnerScroll();

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

showMenu

shows dhtmlxMenu attached to a tab

void showMenu();

Example

myTabbar.tabs(id).showMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

showRibbon

shows dhtmlxRibbon attached to a tab

void showRibbon();

Example

myTabbar.tabs(id).showRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

showStatusBar

shows status bar object attached to a tab

void showStatusBar();

Example

myTabbar.tabs(id).showStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

showToolbar

shows dhtmlxToolbar attached to a tab

void showToolbar();

Example

myTabbar.tabs(id).showToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

showView

shows the specified view, creates a new one if it doesn't exist

boolean showView(string name);

Parameters

name string view name

Returns

boolean true if view was accessed first time, false otherwise

Example

// here is an example how to initialize content
// in several views on demand inside of a tab

// 1) for the default view "def" we will simply attach an URL
// 2) for the "grid" view  we will attach menu and grid
// 3) and for the "tree" view we will attach toolbar and tree

var myMenu;
var myGrid;
var myToolbar;
var myTree;

// the default view is ready right after component initialization
myTabbar.tabs(id).attachURL("http://somedomain.com/page.html");

function initView(name) {
    // assuming that this function will be called after some user action
    // like a button click or some other
    var state = myTabbar.tabs(id).showView(name);
    if (state == true) {
        // first call, initializes corresponding components
        if (name == "grid") {
            myMenu = myTabbar.tabs(id).attachMenu();
            myGrid = myTabbar.tabs(id).attachGrid();
        } else if (name == "tree") {
            myToolbar = myTabbar.tabs(id).attachToolbar();
            myTree = myTabbar.tabs(id).attachTree();
        }
    }
}

Details

The default view name is "def", it is created automatically when a cell is created

See also
  • API
    • showView
    • unloadView
  • Articles
    • Different Content in the Same Cell
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


unloadView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • close
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • disable
  • enable
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getIndex
  • getText
  • getViewName
  • hide
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isActive
  • isEnabled
  • isVisible
  • progressOff
  • progressOn
  • reloadURL
  • setActive
  • setText
  • show
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Tabbar dhtmlXTabBarCell API Methods

unloadView

unloads the specified view

void unloadView(string name);

Parameters

name string view name

Example

// create test view and switch to it
var state = myTabbar.tabs(id).showView("test_view");
console.log(state); // true

// attach some content
myTabbar.tabs(id).attachMenu();
myTabbar.tabs(id).attachGrid();

// go back to default view
var state = myTabbar.tabs(id).showView("def");
console.log(state); // false

// unload test_view
myTabbar.tabs(id).unloadView("test_view");

// open test_view again
var state = myTabbar.tabs(id).showView("test_view");
console.log(state); // true

// attach some content
myTabbar.tabs(id).attachMenu();
myTabbar.tabs(id).attachGrid();

// unload test_view
myTabbar.tabs(id).unloadView("test_view");

// check active view
var name = myTabbar.tabs(id).getViewName();
console.log(name); // "test_view"

See also
  • API
    • showView
    • getViewName
  • Articles
    • Different Content in the Same Cell
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


Initializing Tabbar DHTMLX Docs

Documentation
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
  • Initializing Tabbar
    • Tabbar source files
    • Constructor
    • Full-screen init
    • Init in an HTML element
    • Init in a window
    • Init in a cell of layout
    • Init tabbar from html
    • JSON struct
    • XML struct
    • Recommended init way
  • Configuring Tabbar
  • Configuring Tabs
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

Initializing Tabbar

Tabbar source files

To start working with dhtmlxTabbar, you need to include tabbar js/css files on a page.

In order to use dhtmlxTabbar as a separate component, you need to include its source files on the page. There are two of them:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxtabbar.css">
    <script src="codebase/dhtmlxtabbar.js"></script>
</head>

If you use dhtmlxTabbar as a part of "dhtmlxSuite" package, you need to have 2 files included:

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

dhtmlxtabbar.js/.css files are part of dhtmlx.js/.css, so there is no need to include them separately.

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Constructor

After you've included the necessary source files, you can initialize Tabbar object.

var myTabbar = new dhtmlXTabBar({

    parent:             "tabbarObj",    // id/object, container for tabbar
    skin:               "dhx_skyblue",  // string, optional, tabbar skin
    mode:               "top",          // string, optional, top or bottom tabs mode
    align:              "left",         // string, optional, left or right tabs align
    close_button:       true,           // boolean, opt., render Close button on tabs
    content_zone:       true,           // boolean, opt., enable/disable content zone
    xml:                "tabbar.xml",   // string, optional, path to XML config
    json:               "tabbar.json",  // string, optional, path to JSON config
    onload:             function(){},   // function, optional, callback for XML/JSON
    arrows_mode:        "auto"          // mode of showing tabs arrows (auto, always)

    tabs: [ // tabs config

        {
            id:      "a1",      // tab id
            text:    "Text",    // tab text
            width:   null,      // numeric for tab width or null for auto, optional
            index:   null,      // numeric for tab index or null for last position,opt.
            active:  true,      // boolean, make tab active after adding, optional
            enabled: false,     // boolean, false to disable tab on init
            close:   true       // boolean, render close button on tab, optional
        },
        {...},  // other tabs if any
        {...}

    ]

});

1) the order of loading (if several params specified at a time) is: json, xml, tabs

2) tabs: [{close: true/false}] override close_button params, i.e. if you set close_button:true, all tabs will have a close button. To hide this button for the specified tab, you need to set tabs: [{close: false}]

3) content_zone implies the area below tabs (or the above one for the mode: "bottom") where the attached content is located. You can disable it and show any other content

Full-screen init

Generally, to create a full-screen tabbar on a page, use the code as in:

<html>
<head>
<style>
    /* important to set width/heigth to 100% for fullscreen init */
    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        overflow: hidden;
    }

</style>
<script>
    var myTabbar;
    function doOnLoad() {
        myTabbar = new dhtmlXTabBar({
            parent: document.body,  // parent container
            tabs: [...]             // tabs and other config
        });
    }
</script>
</head>
<body onload="doOnLoad();">

</body>
</html>

It's also possible to set offsets for Tabbar in the full screen mode.

Init in an HTML element

To initialize dhtmlxTabbar in an HTML element, do the following:

1) create an HTML element where the tabbar will be placed later, do not forget to specify width and height:

<div id="tabbarObj" style="position: relative; width: 400px; height: 300px;"></div>

2) create a dhtmlXTabBar object and place it into the HTML object that you've just created:

var myTabbar = new dhtmlXTabBar({
    parent: "tabbarObj",    // id or object for parent container
    tabs: [...]             // tabs and other config
});
//or
var myTabbar = new dhtmlXTabBar({
    parent: document.getElementById("tabbarObj"),
    tabs: [...]
});
// old way still works
var myTabbar = new dhtmlXTabBar("tabbarObj");

Init in a window

To create a tabbar in a window, do the following:

1) create a dhtmlXWindows object:

var dhxWins = new dhtmlXWindows();
var tabbarWin = dhxWins.createWindow("w1", 20, 20, 600, 400);

The following parameters are passed to dhxWins.createWindow():

  • w1 - the id of the window;
  • 20, 20 - the left and the top positions of the window;
  • 600, 400 - the width and the height of the window.

2) call the attachTabbar method to render tabbar in the window:

var myTabbar = tabbarWin.attachTabbar();
// or with more extended config
var myTabbar = tabbarWin.attachTabbar({
    tabs: [...]
});

Init in a cell of layout

To create a new tabbar in a cell of a layout, do the following:

1) create a dhtmlXLayoutObject object:

var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L"
});

2) attach tabbar to a cell of layout with the attachTabbar method:

var myTabbar = myLayout.cells("a").attachTabbar();
// or with more extended config
var myTabbar = myLayout.cells("a").attachTabbar({
    tabs: [...]
});

Init tabbar from html

All you need is to specify class="dhtmlxTabBar" of the div element which is container for the tabbar, and tabbar object will be initialized inside automatically.

<head>
    <script>
        function doOnInit(){
            // tabbar inited and ready
            // your code here
        }
    </script>
<head>
<body>
    <div id="myTabbar" class="dhtmlxTabBar"
      style="width:390px; height:390px;" oninit="doOnInit()">
        <div id="a1" name="Tab 1">Content 1</div>
        <div id="a2" name="Tab 2">Content 2</div>
        <div id="a3" name="Tab 3">Content 3</div>
    </div>
</body>

Container DIV attributes to use:

  • mode - tabs orientation - top/bottom;
  • align - tabs align - right/left;
  • select - id of selected tab;
  • onbeforeinit - action called exactly before tabbar creation ( samples/tab_content_auto3.html );
  • oninit - action called exactly after tabbar creation ( samples/tab_content_auto3.html ).

Tab DIVs attributes to use:

  • id - tab id;
  • name - tab text;
  • width - width of tab in pixels;
  • href - url of tab content;
  • onbeforeinit - action called exactly before tabbar creation;
  • oninit - action called exactly after tabbar creation

In this case the content of the tab should be placed inside tab DIV tags.

After tabbar is initialized you can work with it from script using its id (id attribute of container DIV) as object reference. In sample above it will work as follows:

myTabbar.tabs("a2").setActive();

JSON struct

JSON struct is needed for json init. In this case tabbar can load config and partially data from an external json file.

It is used for the following init:

var myTabbar = new dhtmlXTabBar({
    parent: "tabbarObj",
    json: "tabbar.json",
    onload: function(){
        console.log("JSON has been loaded and tabs are rendered. Ready to work.");
    }
});
// or
var myTabbar = new dhtmlXTabBar("tabbarObj");
myTabbar.loadStruct("tabbar.json");

tabbar.json content

{
    settings: {
        align:              "right",        // tabs align, optional
        skin:               "dhx_skyblue",  // skin, optional
        close_button:       true,           // render closing button on tabs, optional
        hrefmode:           "ajax"          // load hrefs via ajax, optional
    },
    tabs: [
        {
            id:      "a1",      // tab id
            text:    "Text",    // tab text
            width:   null,      // numeric for tab width or null for auto, optional
            index:   null,      // numeric for tab index or null for last position, optional
            active:  true,      // boolean, make tab active after adding, optional
            enabled: false,     // boolean, false to disable tab on init
            close:   true       // boolean, render close button on tab, optional
        },
        {}, // more tabs if any
        {}
    ]
}

XML struct

XML struct is needed for xml init. In this case tabbar can load config and partially data from an external xml file.

It's used for the following init

var myTabbar = new dhtmlXTabBar({
    parent: "tabbarObj",
    xml: "tabbar.xml",
    onload: function(){
        console.log("XML has been loaded and tabs are rendered. Ready to work.");
    }
});
// or
var myTabbar = new dhtmlXTabBar("tabbarObj");
myTabbar.loadStruct("tabbar.xml");

tabbar.xml content

<?xml version="1.0"?>
<tabbar skin="dhx_skyblue" align="left" closeButton="1" hrefmode="ajax">
    <tab id="a1" width="auto" close="1" enabled="0" active="1" href="url">
    Tab text
        <content>
        This content will be attached to a tab via attachHTMLString()
        </content>
    </tab>
    ... more tabs if any
</tabbar>

<!-- tabbar common -->
skin            tabbar skin, optional
align           tabs align, optional
closeButton     render closing button on tabs
hrefmode        set to "ajax" to load herfs via ajax, optional

<!-- tabs -->
id              tab id
width           numeric for tab width or auto, optional
close           render close button on tab, optional
enabled         tab can be disabled on init, optional
active          make tab active on init, optional
href            load url into tab after adding via attachURL

Recommended init way

<html>
<head>
<script>
    var myTabbar;
    function doOnLoad() {
        myTabbar = new dhtmlXTabBar({
            // config here
        });
    }

</script>
</head>
<body onload="doOnLoad();">

</body>
</html>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring Tabbar DHTMLX Docs

Documentation
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
  • Initializing Tabbar
  • Configuring Tabbar
    • Skinning Tabbar
    • Setting Tabbar Offsets
    • Setting Custom Text Style
    • Sizing Tabbar
  • Configuring Tabs
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

Configuring Tabbar

Skinning Tabbar

There are 4 skins available for tabbar:

"material" (the default one)

"dhx_skyblue"

"dhx_web"

"dhx_terrace"

To set a skin for tabbar use the method setSkin()

// on init stage
var myTabbar = new dhtmlXTabBar({
    parent: "tabbarObj",
    skin:   "dhx_web"
});

// using setSkin
myTabbar.setSkin("dhx_web");

Setting Tabbar Offsets

dhtmlxTabbar supports offsets that can be useful in the full screen init. For example, to add a logo to the header or company's info to the footer.

1) you can set offset on init:

var myTabbar = new dhtmlXTabBar({
    parent: document.body,
    tabs: [...],
    offsets: {
        top: 10,
        right: 20,
        bottom: 30,
        left: 40
    }
});

2) or you can set it from JS code:

myTabbar.setOffsets({
    top: 10,
    right: 20,
    bottom: 30,
    left: 40
});

Setting Custom Text Style

You can define custom style of text in each tab separately by using the following construction:

myTabbar.tabs(id).setText(id, "<span style='color:red;'>Tab</span>");

Sizing Tabbar

There's a possibility to adjust tabbar if parent element size was changed:

var myTabbar = new dhtmlXTabBar("parentId");

// if you change parent's size
document.getElementById("parentId").style.width = "800px";
document.getElementById("parentId").style.height = "600px";

// tabbar needs to be adjusted
myTabbar.setSizes();

If the tabbar is attached to another DHTMLX component, the method is called automatically.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring Tabs DHTMLX Docs

Documentation
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
  • Initializing Tabbar
  • Configuring Tabbar
  • Configuring Tabs
    • Closing Button for Each Tab
    • Setting/Getting Tab's Text
    • Showing/Hiding Existing Tab
    • Adding/Removing Tab
    • Enabling/Disabling Tab
    • Setting/Getting the Active Tab
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

Configuring Tabs

Closing Button for Each Tab

1) You can enable close button for all tabs from init:

// on init stage
var myTabbar = new dhtmlXTabBar({
    parent:         "tabbarObj",
    close_button:   true
});

2) You can enable close button with the help of the enableTabCloseButton() method

// in code but before tabs adding
myTabbar.enableTabCloseButton(true);

3) If you enabled closing button but want to hide it on certain tab, you need to specify close:false for this tab:

// on init stage
var myTabbar = new dhtmlXTabBar({
    parent:         "tabbarObj",
    close_button:   true,
    tabs: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"},
        {id: "a3", text: "Tab 3", close: false} // tab w/o close button
    ]
});

// from js
// params: id, text, width, position, active, close);
myTabbar.addTab(
    "a4",       // id
    "Tab 4",    // tab text
    null,       // auto width
    null,       // last position
    false,      // inactive
    false       // disable close button <-- this one
);

Related sample: Closing button

Setting/Getting Tab's Text

To set the text of a tab use the setText() method:

myTabbar.tabs(id).setText(text);

To get the text of a tab use the getText() method:

var text = myTabbar.tabs(id).getText();

Showing/Hiding Existing Tab

To show a tab use the show() method:

myTabbar.tabs(id).show();

To hide a tab use the hide() method:

myTabbar.tabs(id).hide();

Adding/Removing Tab

To add a tab use the addTab() method:

myTabbar.addTab("tabId", "Tab Text");

To remove a tab from tabbar use the close() method:

myTabbar.tabs(id).close();

Enabling/Disabling Tab

To enable a tab use the enable() method:

myTabbar.tabs(id).enable();

To disable a tab use the disable() method:

myTabbar.tabs(id).disable();

Setting/Getting the Active Tab

To select a tab use the setActive() method:

myTabbar.tabs(id).setActive();

To get the active tab use the method getActiveTab():

// get active tab
var actvId = myTabbar.getActiveTab();

There's no possibility to drag-n-drop the tabs of Tabbar.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Components DHTMLX Docs

Documentation
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
  • Initializing Tabbar
  • Configuring Tabbar
  • Configuring Tabs
  • Attaching Components
    • Getting the attached component
    • Detaching components
    • Scheduler specificity
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

Attaching Components

Almost all DHTMLX components can be attached directly to a cell by the corresponding method.

Accordion
myTabbar.tabs(id).attachAccordion();
Carousel
myTabbar.tabs(id).attachCarousel();
Chart
myTabbar.tabs(id).attachChart();
DataView
myTabbar.tabs(id).attachDataView();
Editor
myTabbar.tabs(id).attachEditor();
Form
myTabbar.tabs(id).attachForm();
Grid
myTabbar.tabs(id).attachGrid();
Layout
myTabbar.tabs(id).attachLayout();
List
myTabbar.tabs(id).attachList();
Menu
myTabbar.tabs(id).attachMenu();
Ribbon
myTabbar.tabs(id).attachRibbon();
Scheduler
myTabbar.tabs(id).attachScheduler();
Sidebar
myTabbar.tabs(id).attachSidebar();
StatusBar
myTabbar.tabs(id).attachStatusBar();
Tabbar
myTabbar.tabs(id).attachTabbar();
Toolbar
myTabbar.tabs(id).attachToolbar();
Tree
myTabbar.tabs(id).attachTree();
TreeView
myTabbar.tabs(id).attachTreeView();

We highly recommend you to follow this way of attaching components, as it guarantees proper rendering and correct resizing of embedded components in relation to their parent container.

Make sure you've included the corresponding JS/CSS files of the related component on a page, for example:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxgrid.css">
    <script src="dhtmlxgrid.js"></script>
</head>

Related sample: Integration with dhtmlxGrid

Getting the attached component

There is a possibility to get link to the attached component:

var attached = myTabbar.tabs(id).getAttachedObject();
if (window.dhtmlXGridObject != null && attached instanceof window.dhtmlXGridObject) {
    console.log("An attached grid detected");
}

Detaching components

// attach
var myAcc = myTabbar.tabs(id).attachAccordion({...});

// detach later
myTabbar.tabs(id).detachObject(true);
myAcc = null;

Scheduler specificity

Please note, the attachScheduler method differs from other attaching methods. The difference is that attachScheduler not only attaches the component but also initializes it - creates an instance with the predefined structure.

Therefore:

  • The attachScheduler method doesn't return a component object;
  • The attachScheduler method can be called only once;
  • If you need to set some configuration options for the scheduler, set them before attaching scheduler to the tabbar.
myTabbar = new dhtmlXTabBar("my_tabbar");

myTabbar.addTab("a1", "Tab 1-1", null, null, true);
myTabbar.addTab("a2", "Tab 1-2");

// configure scheduler if needed
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
// then attach it to the tabbar
myTabbar.tabs("a1").attachScheduler(new Date(), "month");
// load some data
scheduler.load("../common/events.xml");

Related sample: Integration with dhtmlxScheduler

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Menu/Status Bar DHTMLX Docs

Documentation
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
  • Initializing Tabbar
  • Configuring Tabbar
  • Configuring Tabs
  • Attaching Components
  • Attaching Menu/Status Bar
    • Attaching a menu
    • Attaching a toolbar
    • Attaching a ribbon
    • Attaching a status bar
    • Operations with attached components
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

Attaching Menu/Status Bar

You can use Menu, Toolbar and Ribbon components as a menu bar and attach them to the top of a tab. A tab can also have a simple status bar at the bottom added with the help of the StatusBar component.

You can attach several of these components at a time together with other content of Tabbar.

Attaching a menu

1) Include dhtmlxMenu source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxmenu.css">
    <script src="dhtmlxmenu.js"></script>
</head>

2) Call the corresponding function:

var myMenu = myTabbar.tabs(id).attachMenu({
    // menu configuration
});

3) Learn more about dhtmlxMenu from the related documentation.

Attaching a toolbar

1) Include dhtmlxToolbar source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxtoolbar.css">
    <script src="dhtmlxtoolbar.js"></script>
</head>

2) Call the corresponding function:

var myToolbar = myTabbar.tabs(id).attachToolbar({
    // toolbar configuration
});

3) Learn more about dhtmlxToolbar from the related documentation.

Attaching a ribbon

1) Include dhtmlxRibbon source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxribbon.css">
    <script src="dhtmlxribbon.js"></script>
</head>

2) Call the corresponding function:

var myRibbon = myTabbar.tabs(id).attachRibbon({
    // ribbon configuration
});

3) Learn more about dhtmlxRibbon from the related documentation.

Attaching a status bar

1) There's no need to include extra JS/CSS files.

2) Call the corresponding function:

var sbObj = myTabbar.tabs(id).attachStatusBar({
    // status bar configuration, optional
    text:   "some text here",   // status bar text
    height: 35                  // custom height
});

// set status bar text
sbObj.setText("New text");

// get status bar text
var text = sbObj.getText();

Operations with attached components

1) You can show/hide any attached control without unloading it from memory, for example:

myTabbar.tabs(id).showMenu();
myTabbar.tabs(id).hideMenu();

2) You can detach and unload the attached control completely, for example:

// initialization
var myMenu = myTabbar.tabs(id).attachMenu({...});

// detaching later
myTabbar.tabs(id).detachMenu();
myMenu = null;

3) You can get link to the component's instance:

var myMenu = myTabbar.tabs(id).getAttachedMenu();
if (myMenu == null) {
    // not initialized
    myMenu = myTabbar.tabs(id).attachMenu({...});
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching HTML DHTMLX Docs

Documentation
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
  • Initializing Tabbar
  • Configuring Tabbar
  • Configuring Tabs
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
    • Attaching HTML object
    • Appending HTML object
    • Attaching HTML string
    • Detaching object
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

Attaching HTML

There is a possibility to attach HTML objects and HTML strings to a tab. Several HTML objects can be attached at a time.

Attaching HTML object

<div id="objId">Some text</div>
// attach by id
myTabbar.tabs(id).attachObject("objId");
// or attach by link
var obj = document.getElementById("objId");
myTabbar.tabs(id).attachObject(obj);

in this mode a tab doesn't render scrolls by default, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Appending HTML object

This way is the same as attaching an object, but the current tab's content isn't removed:

myTabbar.tabs(id).appendObject("otherObjId");

In this mode a tab will add scrolls automatically, so there's no need to specify width/height for the attached object.

Attaching HTML string

myTabbar.tabs(id).attachHTMLString('<div id="objId">Some text</div>');

In this mode scrolls aren't rendered by default as well, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Detaching object

Any attached object or an HTML string can be detached from a tab with the help of the detachObject method:

// attaching an object
myTabbar.tabs(id).attachObject("objId");

// detaching it later
myTabbar.tabs(id).detachObject(true);

If the first parameter is set to "true", the object will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching URL DHTMLX Docs

Documentation
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
  • Initializing Tabbar
  • Configuring Tabbar
  • Configuring Tabs
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
    • Attaching via iFrame
    • Attaching via AJAX
    • Using the onContentLoaded event
    • Accessing the attached content
    • Accessing parent from the attached page
    • Detaching URLs
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

Attaching URL

A tab has a possibility to attach URLs. It can be done by using iFrames and AJAX calls.

In the case of iFrames call, an iFrame will be created inside of a tab, and your URL will be attached as a separate page (it will have access to your code as you will have control over the content inside of the iFrame).

In the case of AJAX call, the content returned by the server will be placed inside of a div.

  • a common function used for both methods is attachURL, the only difference is that the second argument is set to true for AJAX call
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
  • loading is asynchronous, so to proceed with content, you need to use the onContentLoaded event

Attaching via iFrame

GET request

myTabbar.tabs(id).attachURL("page.html");

POST request without params

myTabbar.tabs(id).attachURL("page.html", null, true);

POST with params

myTabbar.tabs(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

Related sample: Load data in tabbar through iframes

Attaching via AJAX

GET request

myTabbar.tabs(id).attachURL("page.html", true);

POST request without params

myTabbar.tabs(id).attachURL("page.html", true, true);

POST with params

myTabbar.tabs(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Related sample: Load data in tabbar by ajax

Using the onContentLoaded event

As it was said above, loading is asynchronous, so to proceed with content, you need to use the onContentLoaded event:

// firstly add the event
myTabbar.attachEvent("onContentLoaded", function(id){
    // page.html is loaded, your code here
});

// then attach an URL
myTabbar.tabs(id).attachURL("page.html");

Accessing the attached content

This part is related to the iFrame-mode only.

Assuming the code below has been attached:

<html>
<head>
    <script>
        function myFunc() {
            console.log("I'm an attached function");
        }
    </script>
</head>
<body>
    <div id="attachedObject">
        Some text here
    </div>
</body>
</html>

Firstly, you need to get an iFrame object from the cell where the attached content is located, using the getFrame method:

var iframe = myTabbar.tabs(id).getFrame();

Now you can access the elements:

// make sure an element exists
var elem = iframe.contentWindow.document.getElementById("attachedObject");
elem.innerHTML = "Some new text here";

and call some JS code:

// make sure function exists and located in the iFrame's window scope
iframe.contentWindow.someFunc();

Accessing parent from the attached page

This part is related to the iFrame-mode only.

If you need to make some actions with a tab from the attached page (for example, hide a tab by clicking some button on the page) this can be done in the following way:

<!-- this is an attached page.html -->
<script>
    function controlParent() {
        parent.myTabbar.tabs(id).hide();    // hiding a tab
    }
</script>

Any variable or function can be acccessed, but make sure that it is declared in the global window scope.

Detaching URLs

Any attached URL can be detached from a tab by using the detachObject method:

// attach
myTabbar.tabs(id).attachURL("page.html");

// detach later
myTabbar.tabs(id).detachObject(true);

If the first parameter is set to true, the object (iFrame or a div with AJAX content) will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Google Maps DHTMLX Docs

Documentation
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
  • Initializing Tabbar
  • Configuring Tabbar
  • Configuring Tabs
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

Attaching Google Maps

There's a possibility to attach Google Maps to a tab.

Firstly, include the corresponding JS file on your page:

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>

Then initialize a tab with a map inside of the page:

var GMaps = myTabbar.tabs("b").attachMap(); // applies default parameters

// or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = myTabbar.tabs(id).attachMap(mapParams);

Related sample: Integration with Google Maps

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Progress Bar DHTMLX Docs

Documentation
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
  • Initializing Tabbar
  • Configuring Tabbar
  • Configuring Tabs
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

Progress Bar

A progress control is a state indicator. It can be used to indicate content loading or updating. While the tab is visually disabled and not accessible for user actions the progress is enabled.

This functionality will not start automatically when some content is loaded into a tab, it needs to be triggered by calling the appropriate API method.

Here is the code for a tab's progress control:

// turning progress on
myTabbar.tabs(id).progressOn();

// turning progress off
myTabbar.tabs(id).progressOff();

Related sample: Cell progress

In practical scenario, you can place the progressOn() call before loading data in some component, and progressOff() in data loading callback, for example:

var myTabbar;
var myGrid;

// initialize layout and attach grid
function initControls() {
    myTabbar = new dhtmlXTabBar({
    parent:"tabbarObj",
    tabs: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
      ]
    });
    myGrid = myTabbar.tabs("a1").attachGrid();
    loadGridData(true);
}

// load/reload grid data
function loadGridData(firstLoad) {
    myTabbar.tabs("a1").progressOn();
    if (firstLoad == true) {
        myGrid.load("server.php", doOnGridLoaded);
    } else {
        myGrid.updateFromXML("server.php", true, false, doOnGridLoaded);
    }
}

// grid dataload callback
function doOnGridLoaded() {
    myTabbar.tabs("a1").progressOff();
}
<body onload="initControls();">
    <div id="layoutObj" style="width: 600px; height: 400px;"></div>
    <input type="button" value="refresh grid" onclick="loadGridData();"></div>
</body>

Each time you will click the button, the loadGridData() method will be called and you will see the progress of loading over the cell with grid.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Different Content in the Same Cell DHTMLX Docs

Documentation
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
  • Initializing Tabbar
  • Configuring Tabbar
  • Configuring Tabs
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
    • Getting View Name
    • Unloading Specified View
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

Different Content in the Same Cell

There is a possibility to show different content in the same tab. This feature is called "views". Each tab shows the "def" view by default. You can easily switch to another view and initialize different content.

Let's see how it works. We will create a tabbar with three tabs and attach some components to the tab "a1".

myTabbar = new dhtmlXTabBar("my_tabbar");

myTabbar.addTab("a1", "Tab 1-1", null, null, true);
myTabbar.addTab("a2", "Tab 1-2");
myTabbar.addTab("a3", "Tab 1-3");

Currently, the "def" view is selected. There's no need to call any extra commands to make it active, just attach the content you need. For example, you can attach an URL:

myTabbar.tabs("a1").attachURL("test_page_1.html", true);

Now let's show another view and attach some other content to it:

myTabbar.tabs("a1").showView("tree");

At this moment the tab hides the currently active views ("def" in our case) and shows the requested one. You can name the view as you wish, it's necessary just to determine which view to show. As we haven't attached any components, the "tree" view looks like an empty tab.

Now let's attach some content to the "tree" view:

myTabbar.tabs("a1").attachTree();
myToolbar = myTabbar.tabs("a1").attachToolbar();

Now let's go back to the view "def" and see what happens:

myTabbar.tabs("a1").showView("def");

As you can see, now the "tree" view becomes hidden and the "def" view is restored and active.

Related sample: Views

Getting View Name

You can get the name of the current view by calling the getViewName method:

var name = myTabbar.tabs(id).getViewName();

Unloading Specified View

It's possible to unload the specified view with the help of the unloadView method:

myTabbar.tabs(id).unloadView("view_name");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Coloring Text Selection DHTMLX Docs

Documentation
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
  • Initializing Tabbar
  • Configuring Tabbar
  • Configuring Tabs
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

Coloring Text Selection

Sometimes you need to make the selected text look like a common skin. To set a custom color for the selection, use the following technique:

1) Define a CSS class with ::selection and ::-moz-selection pseudo-elements inside:

.my_style::selection{
    color: #454544;
    background-color: #fffcda;
}
.my_style::-moz-selection{
    color: #454544;
    background-color: #fffcda;
}
#tabbarObj{
   width:300px;
   height:250px;
}

2) Set the above specified CSS class for the required object:

<div id="tabbarObj"></div>
<div id="objId">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
<div id="objId2" class="my_style">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
myTabbar = new dhtmlXTabBar({
    parent:"tabbarObj",
    tabs: [
        {id: "a", text: "Default", active: true},
        {id: "b", text: "Custom"}
    ]
});

myTabbar.tabs("a").attachObject("objId");
myTabbar.tabs("b").attachObject("objId2");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration from 3.6 to 4.0 DHTMLX Docs

Documentation
  • dhtmlXTabBar API
  • dhtmlXTabBarCell API
  • Initializing Tabbar
  • Configuring Tabbar
  • Configuring Tabs
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Tabbar

Migration from 3.6 to 4.0

1) In the new version of DHTMLX Library the names of some methods were changed. We've made these changes as the previous names of the methods under question didn't reflect their functionality precisely, which could cause ambiguity or misunderstanding.

2) Since the release of the latest version of DHTMLX library some functionality has been removed. It was made as this functionality is no longer needed and therefore isn't supported.

3) Functionality moved from object to object

There were changes in the methods of layout components (Layout, Windows, Accordion, Tabbar). It concerns the methods that don't operate on the components in whole, but affect their cells (windows, tabs) directly.

Such methods have earlier been called through myTabbar object and now they are called through myTabbar.tabs() object. Be careful, as the names of these methods are also changed to more logical ones.

Up to version 3.6 | From version 4.0
Function names changed
myTabbar.destructor() | myTabbar.unload()
myTabbar.adjustOuterSize() | myTabbar.setSizes()
myTabbar.loadXML(url, onLoad) | myTabbar.loadStruct(url, onLoad)
myTabbar.loadXMLString(xmlString, onLoad) | myTabbar.loadStruct(xmlString, onLoad)
myTabbar.attachEvent("onTabContentLoaded", function(id){}) | myTabbar.attachEvent("onContentLoaded", function(id){})
myTabbar.setOnSelectHandler(tabClicked) | myTabbar.attachEvent(("onSelect", function(tabClicked){})
Functionality was removed
myTabbar.normalize() | code improved
myTabbar.setStyle() | controlled by skin
myTabbar.setImagePath() | all images moved to css
myTabbar.setSkinColors() | controlled by skin
myTabbar.enableScroll() | code improved
myTabbar.enableForceHiding() | code improved
myTabbar.enableAutoSize() | code improved
myTabbar.setCustomStyle(id, style) | you can use html for tabs(id).setText()
myTabbar.setMargin() | controlled by skin
myTabbar.setOffset() | controlled by skin
myTabbar.setSize(x, y) | you need to change parent container's width/height and then call myTabbar.setSizes()
myTabbar.setHrefMode(mode) | url or ajax via myTabbar.tabs(id).attachURL()
Functionality moved from object to object
myTabbar.setContent(id, value) | myTabbar.tabs(id).attachObject(value)
myTabbar.setContentHTML(id, value) | myTabbar.tabs(id).attachHTMLString(value)
myTabbar.tabWindow(id) | myTabbar.tabs(id).getFrame()
myTabbar.showInnerScroll(id) | myTabbar.tabs(id).showInnerScroll()
myTabbar.hideTab(id, mode) | myTabbar.tabs(id).hide(mode)
myTabbar.showTab(id, mode) | myTabbar.tabs(id).show(mode)
myTabbar.enableTab(id) | myTabbar.tabs(id).enable()
myTabbar.disableTab(id) | myTabbar.tabs(id).disable()
myTabbar.getIndex(id) | myTabbar.tabs(id).getIndex()
myTabbar.getLabel(id) | myTabbar.tabs(id).getText()
myTabbar.setLabel(id, text) | myTabbar.tabs(id).setText(text)
myTabbar.setTabActive(id) | myTabbar.tabs(id).setActive()
myTabbar.removeTab(id) | myTabbar.tabs(id).close()
myTabbar.forceLoad(id) | myTabbar.tabs(id).reloadURL()
myTabbar.setContentHref(id, href) | myTabbar.tabs(id).attachURL(href, mode)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Toolbar DHTMLX Docs

Documentation
  • Toolbar
    • dhtmlXToolbar API
    • How to Start with Toolbar
    • Object Constructor
    • Loading Data from XML
    • Loading Data From JSON
    • Common Operations with Items
    • Button Control
    • Text Control
    • ButtonSelect Control
    • ListOption for ButtonSelect
    • ButtonTwoState Control
    • Separator Control
    • Slider Control
    • Input Control
    • Skinning Toolbar
    • Font Awesome Icons in Toolbar
    • Handling Events
    • Using Iterator
    • Migration from 3.6 to 4.0
Start

Toolbar

dhtmlxToolbar component provides users with means to activate commands and tools contained in an application/website. To make the application/website user-friendly, a toolbar should be designed to expose the key functionality. This component will work well on any page and in any browser that supports JavaScript.

API reference
  • dhtmlXToolbar API
Related resources
  • You may download dhtmlxToolbar from dhtmlx.com
  • Check online samples for dhtmlxToolbar
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Configuring Toolbar

  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
 Describes the steps of initializing Toolbar and loading data into it.

Manipulating Toolbar Items

  • Common Operations with Items
  • Button
  • Text
  • ButtonSelect
  • ListOption
  • ButtonTwoState
  • Separator
  • Slider
  • Input
 Discusses the creation of Toolbar controls and the possibilities of manipulating them.

Auxiliary Resources

  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
 Covers common information you may need while working with Toolbar.

Other

  • Migration from 3.6 to 4.0
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXToolbar API DHTMLX Docs

Documentation
  • dhtmlXToolbar API
    • Methods
    • Events
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

dhtmlXToolbar API

Methods
addButton | adds a button to the toolbar
addButtonSelect | adds a select button to the toolbar
addButtonTwoState | adds a two-state button to the toolbar
addInput | adds an input item to the toolbar
addListOption | adds a listed option to a select button
addSeparator | adds a separator to the toolbar
addSlider | adds a slider to the toolbar
addSpacer | moves all items to the right side of the specified one
addText | adds a text item to the toolbar
attachEvent | adds any user-defined handler to available events
clearAll | removes all items from the toolbar
clearItemImage | removes an image of an item in the enabled state
clearItemImageDis | removes the image of an item in the disabled state
clearListOptionImage | removes an image (if exists) of a listed option
detachEvent | detaches a handler from an event
disableItem | disables the specified item
disableListOption | disables a listed option
enableItem | enables the specified item
enableListOption | enables a listed option
forEachItem | iterator, calls a user-defined handler for each item
forEachListOption | calls a user-defined handler for each listed option of a parentId
getAllListOptions | returns an array with ids of all the listed options of a parentId
getInput | returns an item's object (input only)
getItemState | returns the current state of a two-state button
getItemText | returns the current text of an item
getItemToolTip | returns the current item's tooltip
getItemToolTipTemplate | returns the current tooltip template of a slider
getListOptionImage | returns the image of a listed option
getListOptionPosition | returns the position of a listed option
getListOptionSelected | returns the selected listed option
getListOptionText | returns the text of a listed option
getListOptionToolTip | returns the tooltip of a listed option
getListOptionUserData | returns the userdata of a listed option
getMaxValue | returns current maximal value and the label of a slider
getMinValue | returns the current minimal value and the label of a slider
getParentId | returns the parent id of a listed option
getPosition | returns the current position of an item
getType | returns item type by item id
getTypeExt | returns the extended item type by the item id (button select node)
getUserData | returns userdata of an item
getValue | returns the current value of a slider or an input item
getWidth | returns the current width of an input item
hideItem | hides the specified item
hideListOption | hides a listed option
isEnabled | returns "true" if an item is enabled
isListOptionEnabled | checks whether a listed option is enabled
isListOptionVisible | checks whether a listed option is visible
isVisible | returns "true" if an item is visible
loadStruct | loads data to the component via XML or JSON, usually component config
loadXML | loads toolbar data from an XML file and calls the onLoadFunction when the loading is done
loadXMLString | loads menu data from an XML string and calls onLoadFunction when loading is done
removeItem | completely removes an item from the toolbar
removeListOption | completely removes a listed option from a select button
removeSpacer | removes the free space between the specified item and the items on its right side
setAlign | moves the toolbar items to the left/right side
setIconPath | defines the url to the folder where the user-defined icons are located
setIconSize | sets the size of icons in the toolbar (applied to all items at once)
setIconsPath | sets the path to the folder with the user-defined images
setIconset | sets the font awesome iconset
setItemImage | sets an image for an item in the enabled state
setItemImageDis | sets an image for an item in the disabled state
setItemState | sets the pressed/released state for a two-state button
setItemText | sets a new text for an item
setItemToolTip | sets a tooltip for an item
setItemToolTipTemplate | sets a tooltip template for a slider
setListOptionImage | sets an image for a listed option
setListOptionPosition | sets the position of a listed option (moves a listed option)
setListOptionSelected | sets a listed option selected
setListOptionText | sets a text for a listed option
setListOptionToolTip | sets a tooltip for a listed option
setListOptionUserData | sets userdata for a listed option
setMaxOpen | defines the maximal number of listed options shown for a select button
setMaxValue | sets the maximal value and a label for a slider
setMinValue | sets the minimal value and a label for a slider
setPosition | sets a new position for an item (moves an item to the desired position)
setSkin | sets a skin on the fly
setUserData | sets userdata for an item
setValue | sets a value for a slider or an input item
setWidth | sets a width for a text/input/buttonSelect item
showItem | shows the specified item
showListOption | shows a listed option
unload | destructor, completely unloads the toolbar
Events
onBeforeStateChange | fires before the moment when the state of a two-state button item is changed
onButtonSelectHide | fires when the list of options of ButtonSelect collapses
onButtonSelectShow | fires when the list of options of ButtonSelect expands
onClick | fires when the user clicks the left mouse button on a button or a select button items
onEnter | fires when the user presses the "Enter" button inside of an input item
onStateChange | fires when the user changes the state of a two-state button item
onValueChange | fires when the user changes the value of a slider item
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • addButton
    • addButtonSelect
    • addButtonTwoState
    • addInput
    • addListOption
    • addSeparator
    • addSlider
    • addSpacer
    • addText
    • attachEvent
    • clearAll
    • clearItemImage
    • clearItemImageDis
    • clearListOptionImage
    • detachEvent
    • disableItem
    • disableListOption
    • enableItem
    • enableListOption
    • forEachItem
    • forEachListOption
    • getAllListOptions
    • getInput
    • getItemState
    • getItemText
    • getItemToolTip
    • getItemToolTipTemplate
    • getListOptionImage
    • getListOptionPosition
    • getListOptionSelected
    • getListOptionText
    • getListOptionToolTip
    • getListOptionUserData
    • getMaxValue
    • getMinValue
    • getParentId
    • getPosition
    • getType
    • getTypeExt
    • getUserData
    • getValue
    • getWidth
    • hideItem
    • hideListOption
    • isEnabled
    • isListOptionEnabled
    • isListOptionVisible
    • isVisible
    • loadStruct
    • loadXML
    • loadXMLString
    • removeItem
    • removeListOption
    • removeSpacer
    • setAlign
    • setIconPath
    • setIconSize
    • setIconsPath
    • setIconset
    • setItemImage
    • setItemImageDis
    • setItemState
    • setItemText
    • setItemToolTip
    • setItemToolTipTemplate
    • setListOptionImage
    • setListOptionPosition
    • setListOptionSelected
    • setListOptionText
    • setListOptionToolTip
    • setListOptionUserData
    • setMaxOpen
    • setMaxValue
    • setMinValue
    • setPosition
    • setSkin
    • setUserData
    • setValue
    • setWidth
    • showItem
    • showListOption
    • unload
  • Events
Start Toolbar dhtmlXToolbar API

Methods

addButton | adds a button to the toolbar
addButtonSelect | adds a select button to the toolbar
addButtonTwoState | adds a two-state button to the toolbar
addInput | adds an input item to the toolbar
addListOption | adds a listed option to a select button
addSeparator | adds a separator to the toolbar
addSlider | adds a slider to the toolbar
addSpacer | moves all items to the right side of the specified one
addText | adds a text item to the toolbar
attachEvent | adds any user-defined handler to available events
clearAll | removes all items from the toolbar
clearItemImage | removes an image of an item in the enabled state
clearItemImageDis | removes the image of an item in the disabled state
clearListOptionImage | removes an image (if exists) of a listed option
detachEvent | detaches a handler from an event
disableItem | disables the specified item
disableListOption | disables a listed option
enableItem | enables the specified item
enableListOption | enables a listed option
forEachItem | iterator, calls a user-defined handler for each item
forEachListOption | calls a user-defined handler for each listed option of a parentId
getAllListOptions | returns an array with ids of all the listed options of a parentId
getInput | returns an item's object (input only)
getItemState | returns the current state of a two-state button
getItemText | returns the current text of an item
getItemToolTip | returns the current item's tooltip
getItemToolTipTemplate | returns the current tooltip template of a slider
getListOptionImage | returns the image of a listed option
getListOptionPosition | returns the position of a listed option
getListOptionSelected | returns the selected listed option
getListOptionText | returns the text of a listed option
getListOptionToolTip | returns the tooltip of a listed option
getListOptionUserData | returns the userdata of a listed option
getMaxValue | returns current maximal value and the label of a slider
getMinValue | returns the current minimal value and the label of a slider
getParentId | returns the parent id of a listed option
getPosition | returns the current position of an item
getType | returns item type by item id
getTypeExt | returns the extended item type by the item id (button select node)
getUserData | returns userdata of an item
getValue | returns the current value of a slider or an input item
getWidth | returns the current width of an input item
hideItem | hides the specified item
hideListOption | hides a listed option
isEnabled | returns "true" if an item is enabled
isListOptionEnabled | checks whether a listed option is enabled
isListOptionVisible | checks whether a listed option is visible
isVisible | returns "true" if an item is visible
loadStruct | loads data to the component via XML or JSON, usually component config
loadXML | loads toolbar data from an XML file and calls the onLoadFunction when the loading is done
loadXMLString | loads menu data from an XML string and calls onLoadFunction when loading is done
removeItem | completely removes an item from the toolbar
removeListOption | completely removes a listed option from a select button
removeSpacer | removes the free space between the specified item and the items on its right side
setAlign | moves the toolbar items to the left/right side
setIconPath | defines the url to the folder where the user-defined icons are located
setIconSize | sets the size of icons in the toolbar (applied to all items at once)
setIconsPath | sets the path to the folder with the user-defined images
setIconset | sets the font awesome iconset
setItemImage | sets an image for an item in the enabled state
setItemImageDis | sets an image for an item in the disabled state
setItemState | sets the pressed/released state for a two-state button
setItemText | sets a new text for an item
setItemToolTip | sets a tooltip for an item
setItemToolTipTemplate | sets a tooltip template for a slider
setListOptionImage | sets an image for a listed option
setListOptionPosition | sets the position of a listed option (moves a listed option)
setListOptionSelected | sets a listed option selected
setListOptionText | sets a text for a listed option
setListOptionToolTip | sets a tooltip for a listed option
setListOptionUserData | sets userdata for a listed option
setMaxOpen | defines the maximal number of listed options shown for a select button
setMaxValue | sets the maximal value and a label for a slider
setMinValue | sets the minimal value and a label for a slider
setPosition | sets a new position for an item (moves an item to the desired position)
setSkin | sets a skin on the fly
setUserData | sets userdata for an item
setValue | sets a value for a slider or an input item
setWidth | sets a width for a text/input/buttonSelect item
showItem | shows the specified item
showListOption | shows a listed option
unload | destructor, completely unloads the toolbar
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addButton DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

addButton

adds a button to the toolbar

void addButton(string|number id,number pos,string text,string imgEn,string imgDis);

Parameters

id | string|number | id of a button
pos | number | position of a button
text | string | text for a button (null for no text)
imgEn | string | image for the enabled state (null for no image)
imgDis | string | image for the disabled state (null for no image)

Example

myToolbar.addButton(id, pos, text, imgEn, imgDis);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addButtonSelect DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

addButtonSelect

adds a select button to the toolbar

void addButtonSelect(string id,number pos,string text,array opts,string imgEn,string imgDis,boolean renderSelect,boolean openAll,number maxOpen,string mode);

Parameters

id | string | id of a select button
pos | number | position of a select button
text | string | text for a select button (null for no text)
opts | array | listed options for a select button
imgEn | string | image for the enabled state (null for no image)
imgDis | string | image for the disabled state (null for no image)
renderSelect | boolean | highlights the clicked item in submenu
openAll | boolean | opens submenu by clicking on an item's icon or text
maxOpen | number | a count of visible subitems
mode | string | "select" for select mode (select-like behaviour)

Example

myToolbar.addButtonSelect(
    id,
    pos,
    text,
    opts,
    imgEn,
    imgDis,
    renderSelect,
    openAll,
    maxOpen,
    mode
);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addButtonTwoState DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

addButtonTwoState

adds a two-state button to the toolbar

void addButtonTwoState(string|number id,number pos,string text,string imgEn,string imgDis);

Parameters

id | string|number | id of a two-state button
pos | number | position of a two-state button
text | string | text for a two-state button (null for no text)
imgEn | string | image for the enabled state (null for no image)
imgDis | string | image for the disabled state (null for no image)

Example

myToolbar.addButtonTwoState(id, pos, text, imgEn, imgDis);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addInput DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

addInput

adds an input item to the toolbar

void addInput(string|number id,number pos,string value,number width);

Parameters

id | string|number | id of an input item
pos | number | position of an input item
value | string | value (text) in an input item by default
width | number | width of an input item (px)

Example

myToolbar.addInput(id, pos, value, width);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addListOption DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

addListOption

adds a listed option to a select button

void addListOption(string|number parentId,string|number optionId,number pos,string type,string text,string img);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option
pos | number | the position of a listed option
type | string | the type of a listed option (button/separator)
text | string | the text for a listed option
img | string | the image for a listed option

Example

myToolbar.addListOption(parentId, optionId, pos, type, text, img);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addSeparator DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

addSeparator

adds a separator to the toolbar

void addSeparator(string|number id,number pos);

Parameters

id | string|number | the id of a separator
pos | number | the position of a separator

Example

myToolbar.addSeparator(id, pos);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addSlider DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

addSlider

adds a slider to the toolbar

void addSlider(string|number id,number pos,number len,number valueMin,number valueMax,number valueNow,string textMin,string textMax,string tip);

Parameters

id | string|number | id of a slider
pos | number | position of a slider
len | number | length (width) of a slider (px)
valueMin | number | minimal available value of a slider
valueMax | number | maximal available value of a slider
valueNow | number | initial current value of a slider
textMin | string | label for the minimal value side (on the left side)
textMax | string | label for the maximal value side (on the right side)
tip | string | tooltip template (%v will be replaced by the current value)

Example

myToolbar.addSlider(id, pos, len, valueMin, valueMax, valueNow, textMin, textMax, tip);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addSpacer DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

addSpacer

moves all items to the right side of the specified one

void addSpacer(string|number itemId);

Parameters

itemId string|number the id of an item after which all other items will be moved to the right

Example

myToolbar.addSpacer(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addText DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

addText

adds a text item to the toolbar

void addText(string|number id,number pos,string text);

Parameters

id | string|number | id of a text item
pos | number | position of a text item
text | string | text for a text item

Example

myToolbar.addText(id, pos, text);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearAll DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

clearAll

removes all items from the toolbar

void clearAll();

Example

myToolbar.clearAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearItemImage DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

clearItemImage

removes an image of an item in the enabled state

void clearItemImage(string|number itemId);

Parameters

itemId string|number id of an item

Example

myToolbar.clearItemImage(itemId);

See also
  • API
    • clearItemImageDis
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


clearItemImageDis DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

clearItemImageDis

removes the image of an item in the disabled state

void clearItemImageDis(string|number itemId);

Parameters

itemId string|number id of an item

Example

myToolbar.clearItemImageDis(itemId);

See also
  • API
    • clearItemImage
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


clearListOptionImage DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

clearListOptionImage

removes an image (if exists) of a listed option

void clearListOptionImage(string|number parentId,string|number optionId);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option

Example

myToolbar.clearListOptionImage(parentId, optionId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disableItem DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

disableItem

disables the specified item

void disableItem(string|number itemId);

Parameters

itemId string|number the id of an item to disable

Example

myToolbar.disableItem(itemId);

See also
  • API
    • enableItem
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


disableListOption DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

disableListOption

disables a listed option

void disableListOption(string|number parentId,string|number optionId);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option

Example

myToolbar.disableListOption(parentId, optionId);

See also
  • API
    • enableListOption
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


enableItem DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

enableItem

enables the specified item

void enableItem(string|number itemId);

Parameters

itemId string|number the id of an item to enable

Example

myToolbar.enableItem(itemId);

See also
  • API
    • disableItem
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


enableListOption DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

enableListOption

enables a listed option

void enableListOption(string|number parentId,string|number optionId);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option

Example

myToolbar.enableListOption(parentId, optionId);

See also
  • API
    • disableListOption
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


forEachItem DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

forEachItem

iterator, calls a user-defined handler for each item

void forEachItem(function handler);

Parameters

handler function a user-defined function, will take an item id as an argument

Example

myToolbar.forEachItem(function(itemId){
    // your code here
});
// or
function doWithItem(itemId){
    // your code here
}
myToolbar.forEachItem(doWithItem);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachListOption DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

forEachListOption

calls a user-defined handler for each listed option of a parentId

void forEachListOption(string|number parentId,function handler);

Parameters

parentId | string|number | id of a select button
handler | function | a user-defined function, the id of a listed option will be passed as an argument

Example

myToolbar.forEachListOption(parentId, function(optionId){
    // your code here
});
// or
function doWithListOption(optionId){
    // your code here
}
myToolbar.forEachListOption(parentId, doWithListOption);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllListOptions DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getAllListOptions

returns an array with ids of all the listed options of a parentId

object getAllListOptions(string|number parentId);

Parameters

parentId string|number the id of a select button

Returns

object an array of ids

Example

myToolbar.getAllListOptions(parentId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getInput DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getInput

returns an item's object (input only)

object getInput(string|number id);

Parameters

id string|number the id of an item

Returns

object object of an input

Example

myToolbar.getInput("myInput");

Details

The method returns "null" if no objects are found.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemState DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getItemState

returns the current state of a two-state button

boolean getItemState(string|number itemId);

Parameters

itemId string|number the id of a two-state item to check

Returns

boolean true - the button is pressed, false - released

Example

var isPressed = myToolbar.getItemState(itemId);

See also
  • API
    • setItemState
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


getItemText DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getItemText

returns the current text of an item

string getItemText(string|number itemId);

Parameters

itemId string|number id of an item

Returns

string the current text of an item

Example

var text = myToolbar.getItemText(itemId);

See also
  • API
    • setItemText
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


getItemToolTip DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getItemToolTip

returns the current item's tooltip

string getItemToolTip(string|number itemId);

Parameters

itemId string|number the id of an item

Returns

string the current item's tooltip

Example

var tip = myToolbar.getItemToolTip(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemToolTipTemplate DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getItemToolTipTemplate

returns the current tooltip template of a slider

string getItemToolTipTemplate(string|number itemId);

Parameters

itemId string|number the id of a slider

Returns

string the current tooltip's template

Example

var tipTemplate = myToolbar.getItemToolTipTemplate(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getListOptionImage DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getListOptionImage

returns the image of a listed option

string getListOptionImage(string|number parentId,string|number optionId);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option

Returns

string the path to the image

Example

var imgSrc = myToolbar.getListOptionImage(parentId, optionId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getListOptionPosition DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getListOptionPosition

returns the position of a listed option

number getListOptionPosition(string|number parentId,string|number optionId);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option

Returns

number the position of a listed option

Example

var pos = myToolbar.getListOptionPosition(parentId, optionId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getListOptionSelected DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getListOptionSelected

returns the selected listed option

string|number getListOptionSelected(string|number parentId);

Parameters

parentId string|number the id of a select button

Returns

string|number the id of the selected listed option

Example

var selectedId = myToolbar.getListOptionSelected(parentId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getListOptionText DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getListOptionText

returns the text of a listed option

string getListOptionText(string|number parentId,string|number optionId);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option

Returns

string the text of a listed option

Example

var text = myToolbar.getListOptionText(parentId, optionId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getListOptionToolTip DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getListOptionToolTip

returns the tooltip of a listed option

string getListOptionToolTip(string|number parentId,string|number optionId);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option

Returns

string tooltip of a listed option

Example

var tip = myToolbar.getListOptionToolTip(parentId, optionId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getListOptionUserData DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getListOptionUserData

returns the userdata of a listed option

mixed getListOptionUserData(string|number parentId,string|number optionId,string name);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option
name | string | the name of userdata

Returns

mixed userdata of a listed option

Example

myToolbar.getListOptionUserData(parentId, optionId, name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getMaxValue DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getMaxValue

returns current maximal value and the label of a slider

object getMaxValue(string|number itemId);

Parameters

itemId string|number the id of a slider

Returns

object [maxValue, "maxLabel"]

Example

var maxVal = myToolbar.getMaxValue(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getMinValue DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getMinValue

returns the current minimal value and the label of a slider

object getMinValue(string|number itemId);

Parameters

itemId string|number the id of a slider

Returns

object [minValue, "minLabel"]

Example

var minVal = myToolbar.getMinValue(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getParentId DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getParentId

returns the parent id of a listed option

string|number getParentId(string|number optionId);

Parameters

optionId string|number the id of a listed option

Returns

string|number the id of a select button

Example

myToolbar.getParentId(optionId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getPosition DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getPosition

returns the current position of an item

number getPosition(string|number itemId);

Parameters

itemId string|number the id of an item

Returns

number the item's position

Example

var pos = myToolbar.getPosition(itemId);

See also
  • API
    • setPosition
  • Articles
    • Common Operations with Items
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


getType DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getType

returns item type by item id

string getType(string itemId);

Parameters

itemId string id of an item

Returns

string item type

Example

var type = myToolbar.getType(itemId);

Related samples

  • Get item type
See also
  • Articles
    • Common Operations with Items
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


getTypeExt DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getTypeExt

returns the extended item type by the item id (button select node)

object getTypeExt(string|number itemId);

Parameters

itemId string|number the id of an item

Returns

object extended item type

Example

var typeExt = myToolbar.getTypeExt(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getUserData DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getUserData

returns userdata of an item

mixed getUserData(string|number itemId,string name);

Parameters

itemId | string|number | the id of an item
name | string | the name of userdata

Returns

mixed item's userdata

Example

myToolbar.getUserData(itemId, name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getValue DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getValue

returns the current value of a slider or an input item

mixed getValue(string|number itemId);

Parameters

itemId string|number the id of a slider or an input item

Returns

mixed slider/input value

Example

var value = myToolbar.getValue(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getWidth DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

getWidth

returns the current width of an input item

number getWidth(string|number itemId);

Parameters

itemId string|number the id of an input item

Returns

number input's width

Example

var width = myToolbar.getWidth(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideItem DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

hideItem

hides the specified item

void hideItem(string|number itemId);

Parameters

itemId string|number the id of an item to hide

Example

myToolbar.hideItem(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideListOption DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

hideListOption

hides a listed option

void hideListOption(string|number parentId,string|number optionId);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option

Example

myToolbar.hideListOption(parentId, optionId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isEnabled DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

isEnabled

returns "true" if an item is enabled

boolean isEnabled(string|number itemId);

Parameters

itemId string|number the id of an item to check

Returns

boolean true|false

Example

var isEn = myToolbar.isEnabled(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isListOptionEnabled DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

isListOptionEnabled

checks whether a listed option is enabled

boolean isListOptionEnabled(string|number parentId,string|number optionId);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option

Returns

boolean true|false

Example

var isOptEn = myToolbar.isListOptionEnabled(parentId, optionId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isListOptionVisible DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

isListOptionVisible

checks whether a listed option is visible

boolean isListOptionVisible(string|number parentId,string|number optionId);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option

Returns

boolean true|false

Example

var isOptVis = mytToolbar.isListOptionVisible(parentId, optionId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isVisible DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

isVisible

returns "true" if an item is visible

boolean isVisible(string|number itemId);

Parameters

itemId string|number the id of an item to check

Returns

boolean true|false

Example

var isVis = myToolbar.isVisible(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadStruct DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

loadStruct

loads data to the component via XML or JSON, usually component config

promise loadStruct(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.loadStruct('<data><node id="a1".../></data>');

// json/xml from server
myComponent.loadStruct("server/data.xml");

// local json/xml with callback
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.loadStruct('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.loadStruct("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.loadStruct(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure response has the header "Content-Type: text/xml" for XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

JSON Format

// summary
[
    {id: "item_a", type: "button", ...},
    {id: "item_b", type: "buttonSelect", ...},
    {id: "item_c", type: "buttonInput", ...}
]

// button
{
    id:      "open"             // required, will be generated automatically if empty
    type:    "button"           // required, item type
    img:     "open.gif"         // optional, icon for the enabled item
    imgdis:  "open_dis.gif"     // optional, icon for the disabled image
    text:    "Open"             // optional, item text
    title:   "Tooltip here"     // optional, tooltip for an item
    enabled: false              // optional, disable an item
    hidden:  true               // optional, hide an item
    action:  "function_name"    // optional, function name to exec on click
    userdata: {                 // optional, userdata
        p1: "value1"            // userdata, name:value pairs
        p2: "value2"
    }
    // deprecated from 4.0:
    img_disabled: "open_dis.gif"    // => imgdis:  "open_dis.gif"
    disabled:     true              // => enabled: false
}

// buttonSelect
{
    id:           "new"             // required, generated automatically if empty
    type:         "buttonSelect"    // required, item type
    img:          "new.gif"         // optional, icon for the enabled item
    imgdis:       "new_dis.gif"     // optional, icon for the disabled image
    text:         "New"             // optional, item text
    title:        "Tooltip here"    // optional, tooltip for an item
    enabled:      false             // optional, disable an item
    hidden:       true              // optional, hide an item
    action:       "function_name"   // optional, function name to exec on click
    openAll:      true              // optional, open sublevels by clicking an icon
    renderSelect: false             // optional, do not show selection in sublevels
    mode:         "select"          // optional, working in the "select" mode
    width:        70                // optional, static button width,
                                    // useful in "select" mode
    maxOpen:      5                 // optional, count of visible sublevel items
    selected:     "subitem_id"      // optional, preselect item for the "select" mode
    userdata: {                     // optional, userdata
        p1: "value1"                // userdata, name:value pairs
        p2: "value2"
    }
    options: [{                     // list of subitems
        id:      "new_text"         // required, generated automatically if empty
        type:    "button"           // required, item type for a button
        img:     "text_doc.gif"     // optional, icon for both enabled/disabled item
        text:    "Text Document"    // optional, item text
        enabled: false              // optional, disable an item
        action:  "function_name"    // optional, function name to exec on click
        userdata: {                 // optional, userdata
            p1: "value1"            // userdata, name:value pairs
            p2: "value2"
        }
    },{
        id:      "sep_id"           // required, generated automatically if empty
        type:    "separator"        // required, item type for a separator
    }]
    // deprecated from 4.0:
    img_disabled: "open_dis.gif"    // => imgdis:  "open_dis.gif"
    disabled:     true              // => enabled: false
    options: [{
        type: "obj"                 // => type: "button"
        type: "sep"                 // => type: "separator"
    }]

}

// buttonTwoState
{
    id:       "open"            // required, will be generated automatically if empty
    type:     "buttonTwoState"  // required, item type
    img:      "open.gif"        // optional, icon for the enabled item
    imgdis:   "open_dis.gif"    // optional, icon for the disabled image
    text:     "Open"            // optional, item text
    title:    "Tooltip here"    // optional, tooltip for an item
    enabled:  false             // optional, disable an item
    hidden:   true              // optional, hide an item
    action:   "function_name"   // optional, function name to exec on click
    selected: true              // optional, pressed on init
    userdata: {                 // optional, userdata
        p1: "value1"            // userdata, name:value pairs
        p2: "value2"
    }
    // deprecated from 4.0:
    img_disabled: "open_dis.gif"    // => imgdis:   "open_dis.gif"
    disabled:     true              // => enabled:  false
    pressed:      true              // => selected: true
}

// buttonInput
{
    id:      "filter"               // required, generated automatically if empty
    type:    "buttonInput"          // required, item type
    value:   "Text inside input"    // optional, text inside of an input
    title:   "Tooltip here"         // optional, tooltip for an item
    enabled: false                  // optional, disable an item
    hidden:  true                   // optional, hide an item
    width:   120                    // optional, input width
    userdata: {                     // optional, userdata
        p1: "value1"                // userdata, name:value pairs
        p2: "value2"
    }
    // deprecated from 4.0:
    disabled: true                  // => enabled: false
    text:     "Text inside input"   // => value: "Text inside input"
}

// slider
{
    id:       "net_limit"   // required, will be generated automatically if empty
    type:     "slider"      // required, item type
    length:   70            // optional, slider line length
    valueMin: 10            // required, min value
    valueMax: 100           // required, max value
    valueNow: 70            // optional, initial value
    textMin:  "10 MBit"     // optional, text label for min value (left side)
    textMax:  "100 MBit"    // optional, text label for max value (right side)
    toolTip:  "%v MBit"     // optional, tooltip while dragging
                            // (actual value will replace "%v")
    enabled:  false         // optional, disable an item
    hidden:   true          // optional, hide an item
    userdata: {             // optional, userdata
        p1: "value1"        // userdata, name:value pairs
        p2: "value2"
    }
    // deprecated from 4.0:
    disabled:     true          // => enabled:  false
    value_min:    10            // => valueMin: 10
    value_max:    100           // => valueMax: 100
    value_now:    70            // => valueNow: 70
    text_min:     "10 MBit"     // => textMin:  "10 MBit"
    text_max:     "100 MBit"    // => textMax:  "100 MBit"
    tip_template: "%v MBit"     // => toolTip:  "%v MBit"

}

// text
{
    id:     "info"                  // required, generated automatically if empty
    type:   "text"                  // required, item type
    text:   "dhtmlxToolbar Demo"    // required, item text,
                                    // use span style='color:red;' to modify
    title:  "Tooltip here"          // optional, tooltip for an item
    hidden: true                    // optional, hide an item
    userdata: {                     // optional, userdata
        p1: "value1"                // userdata, name:value pairs
        p2: "value2"
    }
}

// separator
{
    id:     "sep_id"        // required, will be generated automatically if empty
    type:   "separator"     // required, item type
}

XML Format

// summary
<?xml version="1.0"?>
<toolbar>
    <item id="item_a" type="button" ... />
    <item id="item_b" type="buttonSelect" ... />
    <item id="item_c" type="buttonInput" ... />
</toolbar>

// button
<item
    id      = "open"            // required, generated automatically if empty
    type    = "button"          // required, item type
    img     = "open.gif"        // optional, icon for the enabled item
    imgdis  = "open_dis.gif"    // optional, icon for the disabled image
    text    = "Open"            // optional, item text
    title   = "Tooltip here"    // optional, tooltip for an item
    enabled = "false"           // optional, disable an item
    hidden  = "true"            // optional, hide an item
    action  = "function_name"   // optional, function name to exec on click
>
    // optional, userdata
    <userdata name="p1">value1</userdata>
    <userdata name="p2">value2</userdata>
</item>

// buttonSelect
<item
    id           = "new"            // required, generated automatically if empty
    type         = "buttonSelect"   // required, item type
    img          = "new.gif"        // optional, icon for the enabled item
    imgdis       = "new_dis.gif"    // optional, icon for the disabled image
    text         = "New"            // optional, item text
    title        = "Tooltip here"   // optional, tooltip for an item
    enabled      = "false"          // optional, disable an item
    hidden       = "true"           // optional, hide an item
    action       = "function_name"  // optional, function name to exec on click
    openAll      = "true"           // optional, open sublevels by clicking the icon
    renderSelect = "false"          // optional, do not show selection in the sublevel
    mode         = "select"         // optional, working in the "select" mode
    width        = "70"             // optional, static button width,
                                    // useful in "select" mode
    maxOpen      = "5"              // optional, count of visible sublevel items
    selected     = "subitem_id"     // optional, preselect item for the "select" mode
>
    // optional, userdata
    <userdata name="p1">value1</userdata>
    <userdata name="p2">value2</userdata>
    // list of subitems
    <item
        id       = "new_text"       // required, generated automatically if empty
        type     = "button"         // required, item type for a button
        img      = "text_doc.gif"   // optional, icon for both enabled/disabled item
        text     = "Text Document"  // optional, item text
        enabled  = "false"          // optional, disable an item
        action   = "function_name"  // optional, function name to exec on click
    >
        <itemText>
            Text Document           // optional, alternate the text of an item
        </itemText>
    </item>
    <item
        id       = "new_text"       // required, generated automatically if empty
        type     = "separator"      // required, item type for a separator
    />
</item>

// buttonTwoState
<item
    id       = "open"           // required, will be generated automatically if empty
    type     = "buttonTwoState" // required, item type
    img      = "open.gif"       // optional, icon for the enabled item
    imgdis   = "open_dis.gif"   // optional, icon for the disabled image
    text     = "Open"           // optional, item text
    title    = "Tooltip here"   // optional, tooltip for an item
    enabled  = "false"          // optional, disable an item
    hidden   = "true"           // optional, hide an item
    action   = "function_name"  // optional, function name to exec on click
    selected = "true"           // optional, pressed on init
>
    // optional, userdata
    <userdata name="p1">value1</userdata>
    <userdata name="p2">value2</userdata>
</item>

// buttonInput
<item
    id      = "filter"              // required, generated automatically if empty
    type    = "buttonInput"         // required, item type
    value   = "Text inside input"   // optional, text inside of an input
    title   = "Tooltip here"        // optional, tooltip for an item
    enabled = "false"               // optional, disable an item
    hidden  = "true"                // optional, hide an item
    width   = "120"                 // optional, input width
>
    // optional, userdata
    <userdata name="p1">value1</userdata>
    <userdata name="p2">value2</userdata>
</item>

// slider
<item
    id       = "net_limit"  // required, will be generated automatically if empty
    type     = "slider"     // required, item type
    length   = "70"         // optional, slider line length
    valueMin = "10"         // required, min value
    valueMax = "100"        // required, max value
    valueNow = "70"         // optional, initial value
    textMin  = "10 MBit"    // optional, text label for min value (left side)
    textMax  = "100 MBit"   // optional, text label for max value (right side)
    toolTip  = "%v MBit"    // optional, tooltip while dragging
                            // (actual value will replace %v)
    enabled  = "false"      // optional, disable an item
    hidden   = "true"       // optional, hide an item
>
    // optional, userdata
    <userdata name="p1">value1</userdata>
    <userdata name="p2">value2</userdata>
</item>

// text
<item
    id     = "info"                 // required, generated automatically if empty
    type   = "text"                 // required, item type
    text   = "dhtmlxToolbar Demo"   // required, item text,
                                    // use span style='color:red;' to modify
    title  = "Tooltip here"         // optional, tooltip for an item
    hidden = "true"                 // optional, hide an item
>
    // optional, userdata
    <userdata name="p1">value1</userdata>
    <userdata name="p2">value2</userdata>
</item>

// separator
<item
    id     = "sep_id"       // required, will be generated automatically if empty
    type   = "separator"    // required, item type
/>

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadXML DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

loadXML

loads toolbar data from an XML file and calls the onLoadFunction when the loading is done

void loadXML();

Deprecated

new usage

myToolbar.loadStruct(xmlUrl, function (){});
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadXMLString DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

loadXMLString

loads menu data from an XML string and calls onLoadFunction when loading is done

void loadXMLString();

Deprecated

new usage

myToolbar.loadStruct (xmlString, function (){});
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


removeItem DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

removeItem

completely removes an item from the toolbar

void removeItem(string|number itemId);

Parameters

itemId string|number the id of an item

Example

myToolbar.removeItem(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


removeListOption DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

removeListOption

completely removes a listed option from a select button

void removeListOption(string|number parentId,string|number optionId);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option

Example

myToolbar.removeListOption(parentId, optionId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


removeSpacer DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

removeSpacer

removes the free space between the specified item and the items on its right side

void removeSpacer(string|number itemId);

Parameters

itemId string|number the id of an item after which free space will be removed

Example

myToolbar.removeSpacer(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setAlign DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setAlign

moves the toolbar items to the left/right side

void setAlign(string mode);

Parameters

mode string left/right

Example

myToolbar.setAlign("right");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconPath DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setIconPath

defines the url to the folder where the user-defined icons are located

void setIconPath();

Deprecated

new usage

myToolbar.setIconsPath("path/to/icons/folder/");
Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconSize DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setIconSize

sets the size of icons in the toolbar (applied to all items at once)

void setIconSize(number size);

Parameters

size number the icons size in pixels

Example

myToolbar.setIconSize(48);

Related samples

  • Icons size
Details

Possible size values are 18, 24, 32, 48. 18 pixels is the default size.

See also
  • Articles
    • Common Operations with Items
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setIconsPath DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setIconsPath

sets the path to the folder with the user-defined images

void setIconsPath(string path);

Parameters

path string path to the folder with images

Example

myToolbar.setIconsPath("path/to/icons/");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconset DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setIconset

sets the font awesome iconset

void setIconset(string name);

Parameters

name string "awesome"

Example

myToolbar.setIconset("awesome");

Related samples

  • Font awesome
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemImage DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setItemImage

sets an image for an item in the enabled state

void setItemImage(string|number itemId,string url);

Parameters

itemId | string|number | the id of an item
url | string | the URL of an image

Example

myToolbar.setItemImage(itemId, url);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemImageDis DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setItemImageDis

sets an image for an item in the disabled state

void setItemImageDis(string|number itemId,string url);

Parameters

itemId | string|number | the id of an item
url | string | the URL of an image

Example

myToolbar.setItemImageDis(itemId, url);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemState DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setItemState

sets the pressed/released state for a two-state button

void setItemState(string|number itemId,boolean state);

Parameters

itemId | string|number | id of a two-state item
state | boolean | state, true for pressed, false for released

Example

myToolbar.setItemState(itemId, state);

See also
  • API
    • getItemState
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setItemText DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setItemText

sets a new text for an item

void setItemText(string|number itemId,string text);

Parameters

itemId | string|number | the id of an item
text | string | a new text for an item

Example

myToolbar.setItemText(itemId, text);

See also
  • API
    • getItemText
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setItemToolTip DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setItemToolTip

sets a tooltip for an item

void setItemToolTip(string|number itemId,string tip);

Parameters

itemId | string|number | the id of an item
tip | string | the tooltip's text (empty for clear)

Example

myToolbar.setItemToolTip(itemId, tip);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemToolTipTemplate DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setItemToolTipTemplate

sets a tooltip template for a slider

void setItemToolTipTemplate(string|number itemId,string template);

Parameters

itemId | string|number | the id of a slider
template | string | the tooltip's template (%v will be replaced with the current value)

Example

myToolbar.setItemToolTipTemplate(itemId, template);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setListOptionImage DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setListOptionImage

sets an image for a listed option

void setListOptionImage(string|number parentId,string|number optionId,string img);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option
img | string | the image for a listed option

Example

myToolbar.setListOptionImage(parentId, optionId, img);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setListOptionPosition DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setListOptionPosition

sets the position of a listed option (moves a listed option)

void setListOptionPosition(string|number parentId,string|number optionId,number pos);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option
pos | number | the position of a listed option

Example

myToolbar.setListOptionPosition(parentId, optionId, pos);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setListOptionSelected DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setListOptionSelected

sets a listed option selected

void setListOptionSelected(string|number parentId,string|number optionId);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option

Example

myToolbar.setListOptionSelected(parentId, optionId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setListOptionText DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setListOptionText

sets a text for a listed option

void setListOptionText(string|number parentId,string|number optionId,string text);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option
text | string | a text for a listed option

Example

myToolbar.setListOptionText(parentId, optionId, text);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setListOptionToolTip DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setListOptionToolTip

sets a tooltip for a listed option

void setListOptionToolTip(string|number parentId,string|number optionId,string tip);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option
tip | string | a tooltip for a listed option

Example

myToolbar.setListOptionToolTip(parentId, optionId, tip);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setListOptionUserData DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setListOptionUserData

sets userdata for a listed option

void setListOptionUserData(string|number parentId,string|number optionId,string name,mixed value);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed button
name | string | the name of userdata
value | mixed | the value of userdata

Example

myToolbar.setListOptionUserData(parentId, optionId, name, value);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setMaxOpen DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setMaxOpen

defines the maximal number of listed options shown for a select button

void setMaxOpen(string|number itemId,number max);

Parameters

itemId | string|number | the id of a select button
max | number | a max number of listed options

Example

myToolbar.setMaxOpen(itemId, max);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setMaxValue DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setMaxValue

sets the maximal value and a label for a slider

void setMaxValue(string|number itemId,number value,string label);

Parameters

itemId | string|number | the id of a slider
value | number | the max value for a slider
label | string | a label for the value (empty for no label)

Example

myToolbar.setMaxValue(itemId, value, label);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setMinValue DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setMinValue

sets the minimal value and a label for a slider

void setMinValue(string|number itemId,number value,string label);

Parameters

itemId | string|number | the id of a slider
value | number | the min value
label | string | a label for the value (empty for no label)

Example

myToolbar.setMinValue(itemId, value, label);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setPosition DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setPosition

sets a new position for an item (moves an item to the desired position)

void setPosition(string|number itemId,number pos);

Parameters

itemId | string|number | the id of an item
pos | number | a new position

Example

myToolbar.setPosition(itemId, pos);

See also
  • API
    • getPosition
  • Articles
    • Common Operations with Items
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setSkin

sets a skin on the fly

void setSkin(string name);

Parameters

name string skin name

Example

myToolbar.setSkin(name);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setUserData DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setUserData

sets userdata for an item

void setUserData(string|number itemId,string name,mixed value);

Parameters

itemId | string|number | the id of an item
name | string | the name of userdata
value | mixed | the value of userdata

Example

myToolbar.setUserData(itemId, name, value);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setValue DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setValue

sets a value for a slider or an input item

void setValue(string|number itemId,number value,boolean CallEvent);

Parameters

itemId | string|number | id of a slider or an input item
value | number | value (number for a slider, any for an input)
CallEvent | boolean | true|false, call "onValueChanged" event for a slider

Example

myToolbar.setValue(itemId, value, CallEvent);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setWidth DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

setWidth

sets a width for a text/input/buttonSelect item

void setWidth(string|number itemId,number width);

Parameters

itemId | string|number | the id of a text/input/buttonSelect item
width | number | a new width (px)

Example

myToolbar.setWidth(itemId, width);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showItem DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

showItem

shows the specified item

void showItem(string|number itemId);

Parameters

itemId string|number the id of an item to show

Example

myToolbar.showItem(itemId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showListOption DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

showListOption

shows a listed option

void showListOption(string|number parentId,string|number optionId);

Parameters

parentId | string|number | the id of a select button
optionId | string|number | the id of a listed option

Example

myToolbar.showListOption(parentId, optionId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • addButton
  • addButtonSelect
  • addButtonTwoState
  • addInput
  • addListOption
  • addSeparator
  • addSlider
  • addSpacer
  • addText
  • attachEvent
  • clearAll
  • clearItemImage
  • clearItemImageDis
  • clearListOptionImage
  • detachEvent
  • disableItem
  • disableListOption
  • enableItem
  • enableListOption
  • forEachItem
  • forEachListOption
  • getAllListOptions
  • getInput
  • getItemState
  • getItemText
  • getItemToolTip
  • getItemToolTipTemplate
  • getListOptionImage
  • getListOptionPosition
  • getListOptionSelected
  • getListOptionText
  • getListOptionToolTip
  • getListOptionUserData
  • getMaxValue
  • getMinValue
  • getParentId
  • getPosition
  • getType
  • getTypeExt
  • getUserData
  • getValue
  • getWidth
  • hideItem
  • hideListOption
  • isEnabled
  • isListOptionEnabled
  • isListOptionVisible
  • isVisible
  • loadStruct
  • loadXML
  • loadXMLString
  • removeItem
  • removeListOption
  • removeSpacer
  • setAlign
  • setIconPath
  • setIconSize
  • setIconsPath
  • setIconset
  • setItemImage
  • setItemImageDis
  • setItemState
  • setItemText
  • setItemToolTip
  • setItemToolTipTemplate
  • setListOptionImage
  • setListOptionPosition
  • setListOptionSelected
  • setListOptionText
  • setListOptionToolTip
  • setListOptionUserData
  • setMaxOpen
  • setMaxValue
  • setMinValue
  • setPosition
  • setSkin
  • setUserData
  • setValue
  • setWidth
  • showItem
  • showListOption
  • unload
Start Toolbar dhtmlXToolbar API Methods

unload

destructor, completely unloads the toolbar

void unload();

Example

var myToolbar = new dhtmlXToolbarObject();
...
// unloading
myToolbar.unload();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onBeforeStateChange
    • onButtonSelectHide
    • onButtonSelectShow
    • onClick
    • onEnter
    • onStateChange
    • onValueChange
    • onXLE
    • onXLS
Start Toolbar dhtmlXToolbar API

Events

onBeforeStateChange | fires before the moment when the state of a two-state button item is changed
onButtonSelectHide | fires when the list of options of ButtonSelect collapses
onButtonSelectShow | fires when the list of options of ButtonSelect expands
onClick | fires when the user clicks the left mouse button on a button or a select button items
onEnter | fires when the user presses the "Enter" button inside of an input item
onStateChange | fires when the user changes the state of a two-state button item
onValueChange | fires when the user changes the value of a slider item
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeStateChange DHTMLX Docs

Documentation
  • onBeforeStateChange
  • onButtonSelectHide
  • onButtonSelectShow
  • onClick
  • onEnter
  • onStateChange
  • onValueChange
  • onXLE
  • onXLS
Start Toolbar dhtmlXToolbar API Events

onBeforeStateChange

fires before the moment when the state of a two-state button item is changed

boolean onBeforeStateChange(string|number id,boolean state){ ... };

Parameters

id | string|number | id of an item
state | boolean | new state of an item

Returns

boolean true to allow state changing, false to forbid it

Example

myToolbar.attachEvent("onBeforeStateChange", function(id, state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onButtonSelectHide DHTMLX Docs

Documentation
  • onBeforeStateChange
  • onButtonSelectHide
  • onButtonSelectShow
  • onClick
  • onEnter
  • onStateChange
  • onValueChange
  • onXLE
  • onXLS
Start Toolbar dhtmlXToolbar API Events

onButtonSelectHide

fires when the list of options of ButtonSelect collapses

void onButtonSelectHide(string|number id){ ... };

Parameters

id string|number id of an item

Example

myToolbar.attachEvent("onButtonSelectHide", function(id){
    // your code here
});

Change log

added in version 4.5

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onButtonSelectShow DHTMLX Docs

Documentation
  • onBeforeStateChange
  • onButtonSelectHide
  • onButtonSelectShow
  • onClick
  • onEnter
  • onStateChange
  • onValueChange
  • onXLE
  • onXLS
Start Toolbar dhtmlXToolbar API Events

onButtonSelectShow

fires when the list of options of ButtonSelect expands

void onButtonSelectShow(string|number id){ ... };

Parameters

id string|number id of an item

Example

myToolbar.attachEvent("onButtonSelectShow", function(id){
    // your code here
});

Change log

added in version 4.5

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClick DHTMLX Docs

Documentation
  • onBeforeStateChange
  • onButtonSelectHide
  • onButtonSelectShow
  • onClick
  • onEnter
  • onStateChange
  • onValueChange
  • onXLE
  • onXLS
Start Toolbar dhtmlXToolbar API Events

onClick

fires when the user clicks the left mouse button on a button or a select button items

void onClick(string|number itemId){ ... };

Parameters

itemId string|number the id of a button or a select button

Example

myToolbar.attachEvent("onClick", function(id){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEnter DHTMLX Docs

Documentation
  • onBeforeStateChange
  • onButtonSelectHide
  • onButtonSelectShow
  • onClick
  • onEnter
  • onStateChange
  • onValueChange
  • onXLE
  • onXLS
Start Toolbar dhtmlXToolbar API Events

onEnter

fires when the user presses the "Enter" button inside of an input item

void onEnter(string|number id,number value){ ... };

Parameters

id | string|number | the id of an item
value | number | the text that the user types in an input item

Example

myToolbar.attachEvent("onEnter", function(id, value){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onStateChange DHTMLX Docs

Documentation
  • onBeforeStateChange
  • onButtonSelectHide
  • onButtonSelectShow
  • onClick
  • onEnter
  • onStateChange
  • onValueChange
  • onXLE
  • onXLS
Start Toolbar dhtmlXToolbar API Events

onStateChange

fires when the user changes the state of a two-state button item

void onStateChange(string|number id,boolean state){ ... };

Parameters

id | string|number | id of an item
state | boolean | new state of an item

Example

myToolbar.attachEvent("onStateChange", function(id, state){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onValueChange DHTMLX Docs

Documentation
  • onBeforeStateChange
  • onButtonSelectHide
  • onButtonSelectShow
  • onClick
  • onEnter
  • onStateChange
  • onValueChange
  • onXLE
  • onXLS
Start Toolbar dhtmlXToolbar API Events

onValueChange

fires when the user changes the value of a slider item

void onValueChange(string|number id,number value){ ... };

Parameters

id | string|number | the id of an item
value | number | a new value of an item

Example

myToolbar.attachEvent("onValueChange", function(id, value){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onBeforeStateChange
  • onButtonSelectHide
  • onButtonSelectShow
  • onClick
  • onEnter
  • onStateChange
  • onValueChange
  • onXLE
  • onXLS
Start Toolbar dhtmlXToolbar API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onBeforeStateChange
  • onButtonSelectHide
  • onButtonSelectShow
  • onClick
  • onEnter
  • onStateChange
  • onValueChange
  • onXLE
  • onXLS
Start Toolbar dhtmlXToolbar API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


How to Start with Toolbar DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
    • New Toolbar Object Creation
    • Step 1.Including Related Files
    • Step 2. Defining a Toolbar Container
    • Step 3. Creating Object Constructor
    • Step 4. Setting Image Path
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

How to Start with Toolbar

New Toolbar Object Creation

To create a Toolbar object you should take 4 steps. Shortly, they look as:

  1. Including related files;
  2. Defining a toolbar container;
  3. Creating object constructor;
  4. Setting image path

The steps that need to be taken for dhtmlxToolbar's initialization are the following:

Step 1.Including Related Files

Each DHTMLX component can be used standalone or as a part of the general library.

If you use dhtmlxToolbar standalone you need to include 2 files:

  • dhtmlxtoolbar.js
  • dhtmlxtoolbar.css
<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" href="../codebase/skins/dhtmlxtoolbar.css">
        <script src="../codebase/dhtmlxtoolbar.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

If you use dhtmlxToolbar as a part of "dhtmlxSuite" package, you need to include 2 files:

  • dhtmlx.js
  • dhtmlx.css
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

In case the toolbar's icons are placed vertically after initialization, you should check, if you've included the css file in the right way.

If it's all right, there may be some problems with the used skin.

Step 2. Defining a Toolbar Container

The next step: an HTML container for your future toolbar. To implement this step we can choose one of the ways:

  • Create a new HTML container.
     <div id="toolbarObj"></div>
    In this example the object is a <div> element on page, which is placed in the <body> tag.
  • Put a toolbar into some DHTMLX container component: layout, window, accordion, tabbar.
    // attach to Layout
dhxLayout.attachToolbar();
dhxLayout.cells(id).attachToolbar();
// attach to Window
dhxWins.window(id).attachToolbar();
// attach to Accordion
dhxAcc.cells(id).attachToolbar();
// attach to Tabbar
dhxTabbar.cells(id).attachToolbar();

Step 3. Creating Object Constructor

The next step is to create a new dhtmlXToolbarObject and place it after the <div> element (object) that we've created:

var myToolbar = new dhtmlXToolbarObject(baseId, skin);
  • "baseId" defines an HTML object on page to which the toolbar is attached (the main toolbar container in the code mentioned above).
  • "skin" is the optional parameter which defines the skin, that will be applied to the toolbar. If this argument is not set, the component will be created with the default skin ("dhx_skyblue").

So, in our case the code will look like this:

var myToolbar = new dhtmlXToolbarObject("toolbarObj");

Toolbar object constructor is considered in detail in the article Object Constructor.

Step 4. Setting Image Path

The setIconsPath() method should be used to set the full path to the directory, where toolbar image files are located. By means of this method the user is able to set path to the directory, where icons images are stored.

The following code string should be placed before any of data loading methods:

myToolbar.setIconsPath("[full path to icons image files directory]");

In case icons are placed vertically after toolbar initialization, check, if you've included the css file in the right way. If it's all right, there are possibly some problems with the used skin.

Related sample: Object API simple init

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
    • Specifying Toolbar Items
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Object Constructor

var myToolbar = new dhtmlXToolbarObject(parent, skin);

where

  • parent - {string} id of HTML element which will be used as parent (or object itself), mandatory
  • skin - {string} name of skin, optional
  • icon_path - {string} defines the URL where necessary user embedded icons are located (setIconsPath)
  • xml - {string}, URL of the data file in the XML format (loadStruct)
<div id='my_toolbar_here' style="width: 500px;"></div>
<script>
//common init code
var myToolbar = new dhtmlXToolbarObject("my_toolbar_here");
</script>

Toolbar can also be initialized by object notation:

myToolbar = new dhtmlXToolbarObject({
    parent:"a_toolbar",
    onClick:function(){
        alert("Toolbar item was clicked");
    }
});

Specifying Toolbar Items

Toolbar's items can be defined through items collection

myToolbar = new dhtmlXToolbarObject({
    parent:"a_toolbar",
    items:[
        {id: "new", type: "buttonSelect", text: "New", img: "new.gif",
            img_disabled: "new_dis.gif"},
        {id: "sep1", type: "separator" },
        {id: "open", type: "button", img: "open.gif"},
        {id: "autosave", type: "buttonTwoState", text: "Autosave", img: "save.gif"},
        {id: "inp", type: "buttonInput", text: "Input"},
        {id: "sld", type: "slider", text_min: "10 MBit", text_max: "100 MBit"},
        {id: "info", type: "text", text: "dhtmlxToolbar Demo"}
    ]
});

Each item can have the following attributes:

  • id - {string} id of menu item
  • type - (string) type of menu item
  • text - {string} caption of menu item
  • img - {string} url of image related to menu item
  • img_disabled - {string} url which will be used for item in disabled state

Related sample: Object API extended init

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading Data from XML DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
    • Loading Data from XML File
    • Loading Data from XML String
    • XML Format Template
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Loading Data from XML

Loading Data from XML File

The loadStruct() method loads the toolbar data from an XML file. When the data is loaded into the object, a user-defined handler is called (onLoadFunction), if it was indicated by user. All the data is loaded at once:

myToolbar.loadStruct("[path to this file]/file.xml", onLoadFunction);
onLoadFunction = function(){
    // data loaded and rendered
    // your code here
};

The first parameter of loadStruct() method is the path to the XML file, while the second parameter is an optional user-defined handler.

Related sample: Init from xml

Templates for Toolbar controls in XML format are given below.

Loading Data from XML String

The loadStruct() method loads toolbar data from XML string as well. When the data is loaded into the object, a user-defined handler is called. All the data is loaded at once:

myToolbar.loadStruct('<data><node id="a1".../></data>', onLoadFunction);
onLoadFunction = function(){
    // data loaded and rendered
    // your code here
};

XML Format Template

This section will give you the idea of XML Format Template. Its aim is to help you in creating XML files for dhtmlxToolbar initialization.

<?xml version="1.0"?>
    // a top xml tag, mandatory
    <toolbar>
        // a button item with images for enabled/disabled state only;
        // each item must have a unique ID
        <item id="new" type="button" img="new.gif" imgdis="new_dis.gif"/>
        // a button item with text, images for enabled/disabled states
        <item id="save" type="button" text="Save" img="save.gif"
            imgdis="save_dis.gif"/>
        // a button item with text only
        <item id="open" type="button" text="Open"/>
        // a separator item
        <item id="sep01" type="separator"/>
        // a button item with tooltip
        <item id="undo" type="button" img="undo.gif" imgdis="undo_dis.gif"
            title="Undo"/>
        <item id="redo" type="button" img="redo.gif" imgdis="redo_dis.gif"
            title="Redo"/>
        // a disabled button
        <item id="cut" type="button" img="cut.gif" imgdis="cut_dis.gif"
            title="Cut" enabled="false"/>
        // a spacer item
        <item id="sp" type="spacer"/>
        <item id="copy" type="button" img="copy.gif" imgdis="copy_dis.gif"
            title="Copy"/>
        <item id="paste" type="button" img="paste.gif" imgdis="paste_dis.gif"
            title="Paste"/>
        <item id="sep02" type="separator"/>
        // a two-state button with images for enabled/disabled states
        <item id="form" type="buttonTwoState" img="form.gif" imgdis="form_dis.gif"
            title="Form"/>
        // tooltip
        <item id="filter" type="buttonTwoState" img="filter.gif"
            imgdis="filter_dis.gif" text="Filter" title="Filter"/>
        // a pressed two-state button with text only
        <item id="any_word" type="buttonTwoState" text="Any Word" selected="true"/>
        // an input button
        <item id="txt_1" type="buttonInput"/>
        // an input button with predefined initial value, width, and tooltip
        <item id="txt_2" type="buttonInput"value="Filter Text" width="60"
            title="type the text here"/>
        <item id="sep1" type="separator"/>
        // a select button with text only
        <item id="history" type="buttonSelect" maxOpen="3" openAll="true"
            renderSelect="true" mode="select" text="History">
            // a listed option with text only
            <item type="button" id="8_1" text="Today"/>
            // a preselected listed option
            <item type="button" id="8_2" text="Yesterday" selected="true"/>
            <item type="button" id="8_3" text="Last Week"/>
            <item type="button" id="8_4" text="Last Month"/>
            <item id="8_sep0" type="separator"/> // a listed option - separator
            // a listed option with image for the enabled state, text
            <item type="button" id="8_5" img="icon_more.gif" text="More..."/>
            </item>
        <item id="sep2" type="separator"/>
        // a select button with text, images for enabled/disabled states
        <item id="page_setup" type="buttonSelect" img="page_setup.gif"
            imgdis="page_setup_dis.gif"text="Page">
            <item type="button" id="9_11" text="Layout"/>
            <item type="button" id="9_12" text="Management"/>
        </item>
        // a select button with images for enabled/disabled states, tooltip
        <item id="print" type="buttonSelect" img="print.gif"
            imgdis="print_dis.gif" title="Print">
            <item type="button" id="9_1" text="Page"/>
            <item type="button" id="9_2" text="Selection"/>
            <item id="9_sep0" type="separator"/>
            <item type="button" id="9_3" text="Custom..."/>
        </item>
        <item id="sep3" type="separator"/>
        // a slider item
        <item id="slider" type="slider" length="70" valueMin="10" valueMax="100"
            valueNow="70" textMin="10 MBit" textMax="100 MBit" toolTip="%v MBit"/>
        // mandatory slider's parameters:
        // length - length (in px),
        // minValue (int), maxValue (int),
        // valueNow - current value (set by the default, int)
        // optional slider's parameters:
        // textMin - label for minValue,
        // textMax - lavel for maxValue,
        // toolTip - tolltip template (%v will be replaced with the curent value)
        <item id="sep4" type="separator"/>
        <item id="text" type="text" text="dhtmlxToolbar Demo"/> // a text item
    </toolbar>

Please note, for the Select button you can define additional attributes that relate to the following optional parameters: "renderSelect", "openAll" and "maxOpen". Read more about these parameters here.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading Data From JSON DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
    • Loading Data from JSON File
    • Loading Data from JSON String
    • JSON Format Template
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Loading Data From JSON

The user can load data to the toolbar by adding various types of items from script. Loading data from script means that the user should write a code line for adding every toolbar item. In our example to add a new button and set its tooltip, add one more button with its tooltip, and add a separator we should write the following:

myToolbar.addButton(id,pos,text,imgEnabled,imgDisabled);
myToolbar.setItemToolTip(id,tip);
myToolbar.addButton(id,pos,text,imgEnabled,imgDisabled);
myToolbar.setItemToolTip(id,tip);
myToolbar.addSeparator(id,pos);

Related sample: Init from script

Templates for Toolbar controls in JSON format are given below.

Loading Data from JSON File

The loadStruct() method loads the toolbar data from a JSON file. When the data is loaded into the object, a user-defined handler is called (onLoadFunction), if it was indicated by user. All the data is loaded at once:

myToolbar.loadStruct("[path to this file]/file.json", onLoadFunction);
onLoadFunction = function(){
    // data loaded and rendered
    // your code here
};

The first parameter of loadStruct() method is the path to the JSON file, while the second parameter is an optional user-defined handler.

Loading Data from JSON String

The loadStruct() method loads toolbar data from JSON string as well. When the data is loaded into the object, a user-defined handler is called. All the data is loaded at once:

myToolbar.loadStruct('{data:[{id:"a1",..},{id:"a2",..}]}', onLoadFunction);
onLoadFunction = function(){
    // data loaded and rendered
    // your code here
};

JSON Format Template

This section will give you the idea of JSON Format Templates for separate Toolbar controls. Its aim is to help you in creating JSON files for dhtmlxToolbar initialization.

// summary
[
    {id: "item_a", type: "button", ...},
    {id: "item_b", type: "buttonSelect", ...},
    {id: "item_c", type: "buttonInput", ...}
]

Button

// button
{
    id:      "open"             // required, if emplty, will be autogenerated
    type:    "button"           // required, item type
    img:     "open.gif"         // optional, icon for the enabled item
    imgdis:  "open_dis.gif"     // optional, icon for the disabled image
    text:    "Open"             // optional, item text
    title:   "Tooltip here"     // optional, tooltip for an item
    enabled: false              // optional, disable an item
    hidden:  true               // optional, hide an item
    action:  "function_name"    // optional, function name to exec on click
    userdata: {                 // optional, userdata
        p1: "value1"            // userdata, name:value pairs
        p2: "value2"
    }
    // deprecated from 4.0:
    img_disabled: "open_dis.gif"    // => imgdis:  "open_dis.gif"
    disabled:     true              // => enabled: false
}

ButtonSelect

// buttonSelect
{
    id:           "new"             // required, if empty, will be autogenerated
    type:         "buttonSelect"    // required, item type
    img:          "new.gif"         // optional, icon for the enabled item
    imgdis:       "new_dis.gif"     // optional, icon for the disabled image
    text:         "New"             // optional, item text
    title:        "Tooltip here"    // optional, tooltip for an item
    enabled:      false             // optional, disable an item
    hidden:       true              // optional, hide an item
    action:       "function_name"   // optional, function name to exec on click
    openAll:      true              // optional, open sublevels by clicking an icon
    renderSelect: false             // optional, do not show selection in sublevels
    mode:         "select"          // optional, works in "select" mode
    width:        70                // optional, static button width, for "select" mode
    maxOpen:      5                 // optional, count of visible sublevel items
    selected:     "subitem_id"      // optional, preselect item for "select" mode
    userdata: {                     // optional, userdata
        p1: "value1"                // userdata, name:value pairs
        p2: "value2"
    }
    options: [{                     // list of subitems
        id:      "new_text"         // required, if empty, will be autogenerated
        type:    "button"           // required, item type for a button
        img:     "text_doc.gif"     // optional, icon for both enabled/disabled item
        text:    "Text Document"    // optional, item text
        enabled: false              // optional, disable an item
        action:  "function_name"    // optional, function name to exec on click
        userdata: {                 // optional, userdata
            p1: "value1"            // userdata, name:value pairs
            p2: "value2"
        }
    },{
        id:      "sep_id"           // required, if empty, will be autogenerated
        type:    "separator"        // required, item type for a separator
    }]
    // deprecated from 4.0:
    img_disabled: "open_dis.gif"    // => imgdis:  "open_dis.gif"
    disabled:     true              // => enabled: false
    options: [{
        type: "obj"                 // => type: "button"
        type: "sep"                 // => type: "separator"
    }]

}

ButtonTwoState

// buttonTwoState
{
    id:       "open"            // required, if empty, will be autogenerated
    type:     "buttonTwoState"  // required, item type
    img:      "open.gif"        // optional, icon for the enabled item
    imgdis:   "open_dis.gif"    // optional, icon for the disabled image
    text:     "Open"            // optional, item text
    title:    "Tooltip here"    // optional, tooltip for an item
    enabled:  false             // optional, disable an item
    hidden:   true              // optional, hide an item
    action:   "function_name"   // optional, function name to exec on click
    selected: true              // optional, pressed on init
    userdata: {                 // optional, userdata
        p1: "value1"            // userdata, name:value pairs
        p2: "value2"
    }
    // deprecated from 4.0:
    img_disabled: "open_dis.gif"    // => imgdis:   "open_dis.gif"
    disabled:     true              // => enabled:  false
    pressed:      true              // => selected: true
}

ButtonInput

// buttonInput
{
    id:      "filter"               // required, if empty, will be autogenerated
    type:    "buttonInput"          // required, item type
    value:   "Text inside input"    // optional, text inside of an input
    title:   "Tooltip here"         // optional, tooltip for an item
    enabled: false                  // optional, disable an item
    hidden:  true                   // optional, hide an item
    width:   120                    // optional, input width
    userdata: {                     // optional, userdata
        p1: "value1"                // userdata, name:value pairs
        p2: "value2"
    }
    // deprecated from 4.0:
    disabled: true                  // => enabled: false
    text:     "Text inside input"   // => value: "Text inside input"
}

Slider

// slider
{
    id:       "net_limit"   // required, if empty, will be autogenerated
    type:     "slider"      // required, item type
    length:   70            // optional, slider line length
    valueMin: 10            // required, min value
    valueMax: 100           // required, max value
    valueNow: 70            // optional, initial value
    textMin:  "10 MBit"     // optional, text label for min value (left side)
    textMax:  "100 MBit"    // optional, text label for max value (right side)
    toolTip:  "%v MBit"     // optional, tooltip while dragging
                            // (actual value will replace "%v")
    enabled:  false         // optional, disable an item
    hidden:   true          // optional, hide an item
    userdata: {             // optional, userdata
        p1: "value1"        // userdata, name:value pairs
        p2: "value2"
    }
    // deprecated from 4.0:
    disabled:     true          // => enabled:  false
    value_min:    10            // => valueMin: 10
    value_max:    100           // => valueMax: 100
    value_now:    70            // => valueNow: 70
    text_min:     "10 MBit"     // => textMin:  "10 MBit"
    text_max:     "100 MBit"    // => textMax:  "100 MBit"
    tip_template: "%v MBit"     // => toolTip:  "%v MBit"

}

Text

// text
{
    id:     "info"                  // required, if empty, will be autogenerated
    type:   "text"                  // required, item type
    text:   "dhtmlxToolbar Demo"    // required, item text,
                                    // use span style='color:red;' to modify
    title:  "Tooltip here"          // optional, tooltip for an item
    hidden: true                    // optional, hide an item
    userdata: {                     // optional, userdata
        p1: "value1"                // userdata, name:value pairs
        p2: "value2"
    }
}

Separator

// separator
{
    id:     "sep_id"        // required, if empty, will be autogenerated
    type:   "separator"     // required, item type
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Common Operations with Items DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
    • Setting Size of Icons
    • Setting/Getting Position and Getting Type
    • Removing Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Common Operations with Items

Setting Size of Icons

To set the size of icons in the Toolbar (all icons at once) you should use method setIconSize().

myToolbar.setIconSize(24);

Possible values:

  • 18px (default);
  • 24px;
  • 32px;
  • 48px.

Related sample: Icons size

Setting/Getting Position and Getting Type

The following methods can be applied to any item in the toolbar:

  • setPosition - moves an item to the desired position;
  • getPosition - gets the current item's position;
  • getType - gets item's type by item's id.
myToolbar.setPosition(itemId, pos);

var position = myToolbar.getPosition(itemId); // returns current item's position
var itemType = myToolbar.getType(itemId); // returns item's type

Removing Items

A simple tool for item's removal from the toolbar is removeItem() method:

myToolbar.removeItem(itemId);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Button Control DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
    • Adding Button
    • Showing/Hiding Button
    • Enabling/Disabling Button
    • Setting Button's Text
    • Setting Button's Image
    • Setting Buttons's Tooltip
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Button Control

presents a simple button:

Adding Button

A Button item can be easily added to the toolbar with the help of the addButton method:

myToolbar.addButton(id, pos, text, imgEnabled, imgDisabled);

Parameters that should be passed are:

  • id - id of a new button;
  • pos - position of the button;
  • text - button's label;
  • imgEnabled - path to image for the enabled state of the button;
  • imgDisabled - path to image for the disabled state of the button.

Related sample: Button creation

Showing/Hiding Button

To hide/show any button the user should pass button's id to the following methods:

myToolbar.showItem(id);
myToolbar.hideItem(id);

The user has the possibility to check whether any button is visible. The method returns true if the button is visible:

var isVisible = myToolbar.isVisible(id); // returns true/false

Related sample: Button manipulation

Enabling/Disabling Button

Any button in the toolbar can be enabled/disabled by user:

myToolbar.enableItem(id);
myToolbar.disableItem(id);

Also the user has the possibility to check whether any button is enabled. This can be done by calling the following method:

var isEnabled = myToolbar.isEnabled(id); // returns true/false

The user should pass id of the button that will be checked. The method returns true if the button is enabled, and false if it's disabled.

Related sample: Button state

Setting Button's Text

The user can set any button's text/label. This button's id and text of button's label are passed as parameters to the following method:

myToolbar.setItemText(id, text);

The user can get button's text using getItemText method. The method returns the current title text of the button:

var text = myToolbar.getItemText(id); // returns current item's text

Related sample: Button text

Setting Button's Image

Any button in the toolbar can have its own image displayed in the button display area. setItemImage and setItemImageDis methods allow user to set image to a button by passing the following parameters:

  • id - id of the button;
  • url - path to the image for the enabled/disabled state of the button.
myToolbar.setItemImage(id, url);
myToolbar.setItemImageDis(id, url);

Button's image whether for the enabled or the disabled state can be easily removed/cleared by using the clearItemImage and clearItemImageDis methods to which the user should pass button's id:

myToolbar.clearItemImage(id);
myToolbar.clearItemImageDis(id);

Related sample: Button image

Setting Buttons's Tooltip

The user can specify the supplementary information regarding any button in the toolbar via the setItemToolTip method. It takes the following parameters:

  • id - button id;
  • tip - this parameter sets the title that appears when user hovers the mouse over the button.
myToolbar.setItemToolTip(id, tip);

The following method can return the current button's tooltip text:

var tip = myToolbar.getItemToolTip(id); // returns current button's tooltip text

Related sample: Button tooltip

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Text Control DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
    • Adding Text Item
    • Working with Text Item
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Text Control

an item that contains some text displayed in the item display area:

Adding Text Item

A Text Item can be added to the toolbar by calling addText method:

myToolbar.addText(id, pos, text);

The following parameters should be passed to this method:

  • id - id of the new item;
  • pos - position of the text item;
  • text - label of the text item.

Related sample: Text creation

Working with Text Item

The following methods that are available for the Button item, can be applied to the Text Item as well:

Showing/Hiding Text

  • myToolbar.showItem(id);
  • myToolbar.hideItem(id);
  • myToolbar.isVisible(id);

Related sample: Text manipulation

Setting/Getting Text

  • myToolbar.setItemText(id, text);
  • myToolbar.getItemText(id).

Related sample: Text label

All the parameters of the above mentioned methods are the same as those described in Button Settings Manipulations section.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ButtonSelect Control DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
    • Adding ButtonSelect
    • Working with ButtonSelect
    • Setting ButtonSelect Width
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

ButtonSelect Control

a button that can list several options:

Adding ButtonSelect

There is a simple method that adds a ButtonSelect to the toolbar - addButtonSelect:

myToolbar.addButtonSelect(id, pos, text, opts, imgEnabled, imgDisabled);

The following parameters should be passed to this method:

  • id - (string) id of a select button.
  • pos - (number) position of a select button.
  • text - (string) text for a select button (null for no text).
  • opts - (array) listed options for a select button.
  • imgEnabled - (string) image for enabled state (null for no image).
  • imgDisabled - (string) image for desabled state (null for no image).
  • renderSelect - ("true" or "disabled") if the parameter is set to true, a button 'remembers' the selected item and keeps it selected on the next opening. Optional, by default is true.
  • openAll - (boolean) if the parameter is set to true, you can open the dropdown list by clicking both on the label and arrow of a button. If the parameter is set to false the dropdown list can be opened just by clicking on the arrow. Optional, by default is true.
  • maxOpen - (number) sets the number of items visible at once. The other items can be gotten by scrolling down the dropdown list. Optional.
  • mode - (string) set the "select" value to enable the select mode (select-like behaviour)

The opts parameter requires a more detailed description, as the user should specify the following attributes for each listed option:

  • id - id of the option;
  • type - obj/sep, whether this option is an object or a separator;
  • text - label of the option (only for objects);
  • img - path to the option image (only for objects).

Several options can be set at once in the opts variable:

var opts = [
    ['id1', 'obj', 'option1', 'img1'],
    ['sep01', 'sep', '', ''],
    ['id2', 'obj', 'option2', 'img2']
    ...
];

This line of code should be written before we invoke addButtonSelect method. This code is very useful, as instead of writing all the arrays for the opts parameter in the addButtonSelect method, we can use the opts variable, declared before.

Related sample: ButtonSelect creation

Working with ButtonSelect

The following methods that are available for the Button item, can be applied to the ButtonSelect item as well:

Showing/Hiding ButtonSelect

  • toolbar.showItem(id);
  • toolbar.hideItem(id);
  • toolbar.isVisible(id);

Related sample: ButtonSelect manipulation

Enabling/Disabling ButtonSelect

  • toolbar.enableItem(id);
  • toolbar.disableItem(id);
  • toolbar.isEnabled(id);

Related sample: ButtonSelect state

Getting/Setting ButtonSelect Text

  • toolbar.setItemText(id, text);
  • toolbar.getItemText(id);

Related sample: ButtonSelect text

Working with ButtonSelect Image

  • toolbar.setItemImage(id, url);
  • toolbar.setItemImageDis(id, url);
  • toolbar.clearItemImage(id);
  • toolbar.clearItemImageDis(id);

Related sample: ButtonSelect image

Getting/Setting ButtonSelect Tooltip

  • toolbar.setItemToolTip(id, tip);
  • toolbar.getItemToolTip(id);

Related sample: ButtonSelect tooltip

All the parameters of the above mentioned methods are the same as those described in the Button Settings Manipulations section.

Setting ButtonSelect Width

A simple method is used to set this item's width:

myToolbar.setWidth(id, width);

The parameters are:

  • id - item's id;
  • width - the value of item's new width.

Related sample: ButtonSelect width

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ListOption for ButtonSelect DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
    • Adding/Removing ListOption
    • Showing/Hiding ListOption
    • Enabling/Disabling ListOption
    • Setting Position of ListOption
    • Setting Text of ListOption
    • Setting Image of ListOption
    • Setting Tooltip of ListOption
    • Selecting ListOption
    • Get All Listed Options
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

ListOption for ButtonSelect

an option of the ButtonSelect:

Adding/Removing ListOption

A new listed option can be added using addListOption method that accepts the following parameters:

  • parentId - id of the parent item;
  • id - id of the new item that will be added;
  • pos - position of the new item;
  • type - item's type can be "button" or "separator";
  • text - item's label;
  • img - path to item's image.
myToolbar.addListOption(parentId, id, pos, type, text, img);

Any listed option can be easily removed by calling the following method:

myToolbar.removeListOption(parentId,id);

Related sample: Listed option creation

Showing/Hiding ListOption

Any of the listed options can be shown/hidden if one of the following methods is applied to it:

myToolbar.showListOption(parentId, id);
myToolbar.hideListOption(parentId, id);

The user has the possibility to check whether any listed option is visible. The method returns true, if the item is visible:

// returns true/false
var isVisible = myToolbar.isListOptionVisible(parentId, id);

Related sample: Listed option manipulation

Enabling/Disabling ListOption

Any listed option in the toolbar can be enabled/disabled by user:

myToolbar.enableListOption(parentId, id);
myToolbar.disableListOption(parentId, id);

Also the user has the possibility to check whether any listed option is enabled. This can be done by calling the following method:

// returns true/false
var isEnabled = myToolbar.isListOptionEnabled(parentId, id);

The user should pass parentId and id of the listed option that will be checked. The method returns true if the listed option is enabled.

Related sample: Listed option state

Setting Position of ListOption

The following methods can be used to set new position for a listed option and to get the current position of it:

myToolbar.setListOptionPosition(parentId, id, pos);
var pos = myToolbar.getListOptionPosition(parentId, id);

Related sample: Listed option position

Setting Text of ListOption

The user can set the title of any listed option. This item's parentId, id and title's text are passed as parameters to the following method:

myToolbar.setListOptionText(parentId, id, text);

The user can get listed option's title using the getListOptionText method. The method returns the current title text of the item:

// returns current listed option's title text
var text = myToolbar.getListOptionText(parentId, id);

Related sample: Listed option text

Setting Image of ListOption

A listed option in the toolbar can have its own image displayed in the left part of item's display area. The setListOptionImage method allows the user to set image to a listed Option by passing the following parameters:

  • parentId - id of the parent item;
  • id - id of the listed option;
  • url - path to the image for the listed option.
myToolbar.setListOptionImage(parentId, id, img);

The path to the current listed option image can be received like this:

// returns path to the current listed option image
var listOptionImage = myToolbar.getListOptionImage(parentId, id);

The image of listed option can be easily removed/cleared by using the clearListOptionImage method to which the user should pass item's parentId and id as parameters:

myToolbar.clearListOptionImage(parentId, id);

Related sample: Listed option image

Setting Tooltip of ListOption

The user can specify the supplementary information regarding any listed option in the toolbar. The setListOptionToolTip method takes the following parameters:

  • parentId - listed option's parent id;
  • id - id of the listed option;
  • tip - this parameter sets the title that appears when the user hovers the mouse over the listed option.
myToolbar.setListOptionToolTip(parentId, id, tip);

The following method can return tooltip text of the current listed option:

// returns tooltip text of the current listed option
var tip = toolbar.getListOptionToolTip(parentId, id);

Related sample: Listed option tooltip

Selecting ListOption

The user can make any listed option selected by default from script, using setListOptionSelected method. When the user opens the list of options for the first time, this chosen listed option will be highlighted (selected).

The method takes the following parameters:

  • parentId - listed option's parent id;
  • id - id of the listed option.
myToolbar.setListOptionSelected(parentId, id);

This method doesn't make the listed option selected forever. Another listed option can be easily selected by user from the page.

There is also the possibility to get the id of the current selected listed option by the method getListOptionSelected:

//returns id of the selected listed option
var listOptionId = myToolbar.getListOptionSelected(parentId);

As a parameter, you should pass the id of the ButtonSelect, the listed option's id of which you want to get.

Get All Listed Options

The method getAllListOptions allows the user to get all listed options ids of a certain ButtonSelect. The only parameter that the user should pass is the id of the chosen ButtonSelect:

// returns an array of all listed options' ids
var allListOptions = myToolbar.getAllListOptions(parentId);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ButtonTwoState Control DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
    • Adding ButtonTwoState
    • Working with ButtonTwoState
    • Setting State of ButtonTwoState
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

ButtonTwoState Control

a button that can remain in one of its two states until its current state is changed by user (either from script or from page):

Adding ButtonTwoState

The addButtonTwoState method should be used to add a new buttonTwoState:

myToolbar.addButtonTwoState(id, pos, text, imgEnabled, imgDisabled);

The user should pass a number of parameters to this method:

  • id - id of the new button;
  • pos - position of the new button;
  • text - button's label;
  • imgEnabled - path to image for the enabled state of a new button;
  • imgDisabled - path to image for the disabled state of a new button.

Note: if the user wants the buttonTwoState to be created text-free, it's necessary to write an empty string as text parameter.

Related sample: ButtonTwoState creation

Working with ButtonTwoState

The following methods that are available for the Button item, can be applied to the buttonTwoState item as well:

Showing/Hiding ButtonTwoState

  • myToolbar.showItem(id);
  • myToolbar.hideItem(id);
  • myToolbar.isVisible(id);

Related sample: ButtonTwoState manipulation

Enabling/Disabling ButtonTwoState

  • myToolbar.enableItem(id);
  • myToolbar.disableItem(id);
  • myToolbar.isEnabled(id);

Related sample: ButtonTwoState state

Setting/Getting ButtonTwoState Text

  • myToolbar.setItemText(id, text);
  • myToolbar.getItemText(id);

Related sample: ButtonTwoState text

Manipulating ButtonTwoState Images

  • myToolbar.setItemImage(id, url);
  • myToolbar.setItemImageDis(id, url);
  • myToolbar.clearItemImage(id);
  • myToolbar.clearItemImageDis(id);

Related sample: ButtonTwoState image

Setting/Getting ButtonTwoState Tooltip

  • myToolbar.setTooltip(id,tip);
  • myToolbar.getItemToolTip(id).

Related sample: ButtonTwoState tooltip

All the parameters of the above mentioned methods are the same as those described in the Button Settings Manipulations section.

Setting State of ButtonTwoState

The user can set one of two states for ButtonTwoState with the help of the following method:

myToolbar.setItemState(id, state, callEvent);

The parameters for this method are the following:

  • id - id of the two-state button;
  • state - true/false, true stands for the Pressed state of the button, false stands for the Released state of the button;
  • callEvent - if set to true, calls user defined handler for the onStateChange event (if there is any).

There is also the possibility to get current item's state by calling the getItemState method:

var isPressed = myToolbar.getItemState(id); // returns true/false

The method returns true in case the button is pressed, and false in case the button is released.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Separator Control DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
    • Adding Separator
    • Showing/Hiding Separator
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Separator Control

a horizontal (on the main toolbar pane) or vertical (on the Select Button's drop-down pane) line separating groups of items from each other:

Adding Separator

A new Separator can be created by calling the addSeparator method:

myToolbar.addSeparator(id, pos);

This method has two input parameters:

  • id - id of the item;
  • pos - position of the new separator.

Related sample: Separator creation

Showing/Hiding Separator

The following methods that are available for the Button item, can be applied to the Separator as well:

  • toolbar.showItem(id);
  • toolbar.hideItem(id);
  • toolbar.isVisible(id).

Related sample: Separator manipulation

All the parameters of the above mentioned methods are the same to those described in Button Settings Manipulations section.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Slider Control DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
    • Adding Slider
    • Working with Slider
    • Setting Slider's Tooltip Template
    • Setting Slider's Value
    • Setting Slider's Minimum Value
    • Setting Slider's Maximum Value
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Slider Control

an item having a slider in it that allows the user to change item's value within the available limits (the user can drag the slider's thumb in one of two directions):

Adding Slider

The addSlider method should be used to create a new Slider:

myToolbar.addSlider(id, pos, len, valueMin, valueMax, valueNow, textMin, textMax, tip);

As for input parameters the user should set, they are as follows:

  • id - id of the new slider item;
  • pos - position of the new slider;
  • len - slider's length (or width/height, it is set in pixels);
  • valueMin - minimum possible value;
  • valueMax - maximum possible value;
  • valueNow - the value slider is set to for the moment it is created;
  • textMin - the text displayed to the left of the slider (in case of horizontal slider display) or below the slider (in case of vertical slider display);
  • textMax - the text displayed to the right of the slider (in case of horizontal slider display) or above the slider (in case of vertical slider display);
  • tip - this parameter sets the tooltip text.

If you want Slider to be created with a text-free tooltip, it's necessary to set an empty string as a value of the tip parameter.

Related sample: Slider creation

Working with Slider

The following methods that are available for the Button item, can be applied to the Slider as well:

Showing/Hiding Slider

  • myToolbar.showItem(id);
  • myToolbar.hideItem(id);
  • myToolbar.isVisible(id);

Related sample: Slider manipulation

Enabling/Disabling Slider

  • myToolbar.enableItem(id);
  • myToolbar.disableItem(id);
  • myToolbar.isEnabled(id).

Related sample: Slider state

All the parameters of the above mentioned methods are the same to those described in Button Settings Manipulations section.

Setting Slider's Tooltip Template

Tooltip template is applied only to Slider. The tooltip template can be represented in three ways:

  • As a static text, for example, "Hello";
  • As a changeable text when the user moves the slider thumb. "%v" part should be added to the tooltip template to make the template changeable;
  • Using both above mentioned ways together.

The setItemToolTipTemplate method is used to set the tooltip template:

myToolbar.setItemToolTipTemplate(id, template);

This method takes the following parameters:

  • id - item id;
  • template - tooltip template text itself.

For example, if the user wants his tooltip to show the text like this: "Current Value is:" plus the changeable text showing slider's values when the thumb is moved, the code must be the following:

myToolbar.setItemToolTipTemplate("slider","Current Value is:+%v");

The following method can return the current slider's tooltip template:

var template = myToolbar.getItemToolTipTemplate(id); // returns current slider's tooltip text

Related sample: Slider tooltip template

Setting Slider's Value

The user can set the Slider to a certain value within the range of available values with the help of the following method:

myToolbar.setValue(id,value,callEvent);

The parameters are as follows:

  • id - id of the item;
  • value - the new value;
  • callEvent - true/false, if set to true, calls onValueChange event.

Note: If the user has indicated the value that is not within the range of available values, the slider's thumb will be set either to the minimum or to the maximum value.

Slider's current value can be easily got by the following method:

var value = myToolbar.getValue(id); // returns slider's current value

Related sample: Slider value

Setting Slider's Minimum Value

There is a method to set slider's minimum value:

myToolbar.setMinValue(id, value, label);

The following parameters should be passed to this method:

  • id - item id;
  • value - minimum value;
  • label - text displayed to the left of the slider (in case of horizontal slider display) or below the slider (in case of vertical slider display).

Note: if the user wants the slider's minimum value to be created text-free, it's necessary to write an empty string as label parameter. For example:

myToolbar.setMinValue("slider", 25, "");

Slider's current minimum value can be got using getMinValue method:

var data = myToolbar.getMinValue(id); // returns slider's current minimum value

This method returns the following Array(value, label).

Related sample: Slider value

Setting Slider's Maximum Value

There is a method to set slider's maximum value:

myToolbar.setMaxValue(id,value,label);

The following parameters should be passed to this method:

  • id - item id;
  • value - maximum value;;
  • label - text displayed to the right of the slider (in case of horizontal slider display) or above the slider (in case of vertical slider display).

Note: if the user wants the slider's maximum value to be created text-free, it's necessary to write an empty string as label parameter. For example:

myToolbar.setMaxValue("slider", 25, "");

Slider's current maximum value can be got using getMaxValue method:

var data = myToolbar.getMaxValue(id); // returns current maximum value

This method returns the following Array(value, label).

Related sample: Slider value

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Input Control DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
    • Adding Input Item
    • Working with Input Item
    • Getting Input's Width
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Input Control

an area where the user can type some text:

Adding Input Item

The following syntax shows the user how an Input item can be easily added:

myToolbar.addInput(id, pos, value, width);

This method has the following input parameters:

  • id - id of the new item;
  • pos - position of the new item;
  • value - the text that will be displayed in the input item when it is created;
  • width - width of the new item.

Note: if the user wants the Input item to be created text-free, it's necessary to write an empty string as value parameter. For example:

myToolbar.addInput("input_new",3,"",100);

Related sample: Input creation

Working with Input Item

The following methods that are available for the Button item, can be applied to the Input Item as well:

Showing/Hiding Input

  • myToolbar.showItem(id);
  • myToolbar.hideItem(id);
  • myToolbar.isVisible(id);

Related sample: Input manipulation

Enabling/Disabling Input

  • myToolbar.enableItem(id);
  • myToolbar.disableItem(id);
  • myToolbar.isEnabled(id);

Related sample: Input state

Setting/Getting Input Tooltip

  • myToolbar.setItemToolTip(id, tip);
  • myToolbar.getItemToolTip(id).

Related sample: Input tooltip

All the parameters of the above mentioned methods are the same as those described in Button Settings Manipulations section.

Setting/Getting Input Value

The following methods that are available for the Slider item, can be applied to the Input Item as well:

  • myToolbar.setValue(id, value); the value parameter is the default text displayed in the Input item
  • myToolbar.getValue(id).

Related sample: Input value

All the parameters of the above mentioned methods are the same to those described in Slider Settings Manipulations section.

Setting Input Width

There's one more method applied to Select Button that can be applied to the Input Item as well:

  • myToolbar.setWidth(id, width);

Related sample: Input width

All the parameters of the above mentioned method are the same to those described in Setting Select Button Width section.

Getting Input's Width

The current input's width can be got with the help of getWidth method:

// returns current input's width
var width = myToolbar.getWidth(id);

Related sample: Input width

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Skinning Toolbar DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Skinning Toolbar

The following predefined skins are available for dhtmlxToolbar users:

material (default)
dhx_skyblue
dhx_web
dhx_terrace

To set a skin for toolbar use the setSkin method.

Related sample: Skins

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Font Awesome Icons in Toolbar DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Font Awesome Icons in Toolbar

You can use Font Awesome icons in dhtmlxMenu.

This possibility can be enabled in two ways:

1) during toolbar initialization

myToolbar = new dhtmlXToolbarObject({
    iconset: "awesome",
});

2) after toolbar initialization, using the setIconset method:

myToolbar.setIconset("awesome");

Related sample: Font awesome

Follow the Font Awesome homepage to learn more about icons.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
    • Attaching Event Handler
    • Detaching Event Handler
    • List of supported events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Handling Events

Attaching Event Handler

The user can add any user-defined handler to available events. To do this he can use attachEvent() method with the following parameters:

  • evName - name of the event;
  • evHandler - user-defined event handler.
myToolbar.attachEvent(evName, evHandler);

Several handlers can be attached to one and the same event, and all of them will be executed.

The names of the events are case-insensitive.

Detaching Event Handler

There is a simple way of removing an event-handler:

myToolbar.detachEvent(id); // unique id of the event handler

List of supported events

You can find the full list of toolbar events in the Toolbar API.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Using Iterator DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
    • Listed Options Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Using Iterator

The forEachItem() method calls a user-defined function for every existing item in the toolbar passing item's id into it. Using iterator can be very useful in case the user wants all the items to be subjects for the same changes. For example, you can use the methods enableItem() and disableItem() to enable/disable toolbar items.

myToolbar.forEachItem(function(id){     //calling iterator
    myToolbar.disableItem(id);          //your custom code, for example, disableItem()
});

//or
function doItemAction(id) {
    myToolbar.disableItem(id);          //your custom code, for example, disableItem()
}
myToolbar.forEachItem(doItemAction);    //calling iterator

Related sample: Iterator

Listed Options Iterator

The method forEachListOption() calls a user-defined function for every listed option of a certain Select Button in the toolbar passing listed option's id into it.

myToolbar.forEachListOption(itemId, function(listOptionId){  // calling iterator
     // your custom code, for example, setListOptionText()
    myToolbar.setListOptionText(id, listId, txt);
});

// or
function doWithListOption(listOptionId){
    // you custom code, for example, setListOptionText()
    myToolbar.setListOptionText(id, listId, txt);
}
myToolbar.forEachListOption(itemId, doWithListOption);       // calling iterator

Related sample: Listed option iterator

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration from 3.6 to 4.0 DHTMLX Docs

Documentation
  • dhtmlXToolbar API
  • How to Start with Toolbar
  • Object Constructor
  • Loading Data from XML
  • Loading Data From JSON
  • Common Operations with Items
  • Button Control
  • Text Control
  • ButtonSelect Control
  • ListOption for ButtonSelect
  • ButtonTwoState Control
  • Separator Control
  • Slider Control
  • Input Control
  • Skinning Toolbar
  • Font Awesome Icons in Toolbar
  • Handling Events
  • Using Iterator
  • Migration from 3.6 to 4.0
Start Toolbar

Migration from 3.6 to 4.0

In the new version of DHTMLX Library the names of some methods were changed. We've made these changes as the previous names of the methods under question didn't reflect their functionality precisely, which could cause ambiguity or misunderstanding.

Up to version 3.6 | From version 4.0
Function names changed
myToolbar.loadXML(xmlFile, onLoad) | myToolbar.loadStruct(xmlFile, onLoad)
myToolbar.loadXMLString(xmlString, onLoad) | myToolbar.loadStruct(xmlString, onLoad)
myToolbar.setIconPath(path) | myToolbar.setIconsPath(path)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Tree DHTMLX Docs

Documentation
  • Tree
    • dhtmlXTree API
    • Initializing Tree
    • Syntax Templates
    • Setting Tree Appearance
    • Navigation and Selection in Tree
    • Searching and Sorting in Tree
    • Serializing and Caching Tree
    • Loading Big Datasets
    • Manipulating Nodes
    • Handling Drag-and-Drop
    • Manipulating Checkboxes
    • Manipulating Radio Buttons
    • Simultaneous Server Update
    • Compatibility with Other DHTMLX Components
    • Handling Events
Start

Tree

dhtmlxTree is a flexible, smart and easy-to-use JavaScript tree component which allows creating hierarchical navigation interfaces for web applications. It works greatly with huge amounts of data due to special techniques implemented.

dhtmlxTree possesses advanced drag-and-drop, dynamical loading of nodes, customizable view, unlimited number of nodes and many other capabilities that make it a fully-featured aid for developers.

Communication with server is done via AJAX that allows the tree content to be updated without reloading the entire webpage. Complete JavaScript API is provided to help users to save time on configuring.

API Reference
  • dhtmlXTree API
Related resources
  • You may download Standard or PRO Edition of dhtmlxTree from dhtmlx.com
  • Check online samples for dhtmlxTree
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Initializing & Configuring Tree

  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
 Shows the types and stages of Tree initialization, the possibilities of Tree customization and increasing its performance.

Working with Tree

  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
 Describes the operations which can be performed with Tree elements.

Auxiliary Resources

  • Compatibility with Other DHTMLX Components
  • Handling Events
 Guides you through common information you may need while working with Tree.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXTree API DHTMLX Docs

Documentation
  • dhtmlXTree API
    • Methods
    • Events
  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
  • Handling Events
Start Tree

dhtmlXTree API

Methods
assignKeys | configures the keys used for keyboard navigation
attachEvent | adds any user-defined handler to available events
changeItemId | changes the item's id
clearCut | cancels marking an item as cut
clearSelection | unselects the item in the tree
closeAllItems | collapses target node and all sub nodes
closeItem | collapses a node
deleteChildItems | deletes all children of the node
deleteItem | deletes a node
destructor | deletes tree and clears memory
detachEvent | detaches a handler from an event
disableCheckbox | disables a checkbox
doCut | marks the selected item as cut
doPaste | inserts the previously cut branch
editItem | opens editor for the specified item
enableActiveImages | enables active images (clickable and dragable). By default only text part of the node is active
enableAutoSavingSelected | enables/disables autosaving selected node in cookies
enableAutoTooltips | enables auto tooltips (node text as tooltip)
enableCheckBoxes | shows/hides checkboxes (all checkboxes in the tree)
enableContextMenu | enables context menu
enableDistributedParsing | enables distributed parsing of a big tree (items loaded portion by portion with some timeouts)
enableDragAndDrop | enables/disables drag-and-drop
enableDragAndDropScrolling | enables/disables auto scrolling during the drag-and-drop operation
enableHighlighting | enables item highlighting (item's text is highlighted on mouseover)
enableIEImageFix | replaces IMG tag with background images - solves the problem with IE image caching, doesn't work for IE6 SP1
enableImageDrag | enables dragging an item by its image (by default an item is dragged by text)
enableItemEditor | enables editing of the item's text
enableKeySearch | enables searching of items by pressing keys
enableKeyboardNavigation | enables keyboard navigation in the tree
enableLoadingItem | enables/disables "Loading..." item
enableMercyDrag | enables dragging without removing (copies instead of moving)
enableMultiLineItems | enables multiline items
enableMultiselection | enables multiselection
enableRTL | enables Right-to-Left mode in the tree
enableRadioButtons | replaces checkboxes with radio buttons
enableSingleRadioMode | replaces checkboxes with radio buttons
enableSmartCheckboxes | enables smart checkboxes
enableSmartXMLParsing | enables/disables smart XML parsing mode
enableTextSigns | replaces images with text signs
enableThreeStateCheckboxes | enables three-state checkboxes
enableTreeImages | enables tree images
enableTreeLines | enables/disables tree lines (parent-child threads)
findItem | finds a tree item by text, selects it and focuses on it
findItemIdByLabel | finds a tree item by text
focusItem | scrolls Tree to the indicated item to make it visible and sets focus on it
getAllChecked | returns the list of ids of the nodes with checked checkboxes, separated by default delimiter
getAllCheckedBranches | returns the list of ids of the nodes with checked and three-state checkboxes, separated by default delimiter
getAllChildless | returns the list of all items which don't have child nodes
getAllItemsWithKids | returns the list of all items which have child nodes, separated by default delimiter
getAllPartiallyChecked | returns the list of ids of the nodes with three-state checkboxes, separated by default delimiter
getAllSubItems | returns the list of all children nested on all sublevels of the tree (in relation to the specified item)
getAllUnchecked | returns the list of identificators of the nodes with unchecked checkboxes, separated by default delimiter
getAttribute | returns the value of the specified item attribute
getChildItemIdByIndex | returns child node's id by index
getDistributedParsingState | gets the current state of distributed parsing
getIndexById | returns the node's index in the children collection by id
getItemColor | gets the color of the target item
getItemIdByIndex | returns the node's id by index
getItemImage | gets URL of the item's image
getItemParsingState | gets current parsing state of an item
getItemText | returns the node's text
getItemTooltip | gets item's tooltip
getLevel | gets the node's level (position in the hierarchy)
getOpenState | returns open/close state
getParentId | returns the parent item's id
getSelectedItemId | returns the selected item's id
getSelectedItemText | returns the selected node's text
getSubItems | returns a comma-delimited list of ids of all children nested on the sublevel in relation to the specified item
getUserData | gets user data from the target node
getXMLState | returns the current state of XML loading
hasChildren | returns the number of children
insertNewChild | creates a new node as a child to the specified one with parentId
insertNewItem | creates a new node as a child to the specified one with parentId
insertNewNext | creates a new node next to the specified one
isItemChecked | gets the state of the node's checkbox
isLocked | returns "true" if the item is locked
load | loads data to the component via XML or JSON, usually data-values pairs
loadCSV | loads tree from csv file/stream
loadCSVString | loads tree from csv string
loadJSArray | loads tree from js array object
loadJSArrayFile | loads tree from js array file/stream
loadJSON | loads tree from json file
loadJSONObject | loads dhtmlxTree from a JSON object
loadOpenStates | restores open nodes from cookie
loadState | loads tree from cookie
loadXML | loads tree from xml file
loadXMLString | loads tree from xml string
lockItem | locks/unlocks an item
lockTree | locks tree
makeAllDraggable | adds drag-n-drop capabilities to all HTML items with dragInDhtmlXTree attribute
makeDraggable | adds drag-n-drop capabilities (with the possibility to drop into dhtmlxTree) to HTML object
moveItem | moves an item (inside of tree)
openAllItems | expands target node and all sub-nodes
openAllItemsDynamic | expands target node and all child nodes (the same as openAllItems, but works in dynamic trees)
openItem | expands a node
openItemsDynamic | expands the list of nodes in dynamic tree (wait till the end of a node's loading before expanding the next one)
openOnItemAdded | configures if parent node will be expanded immediately after a child item has been added
parse | loads data from a local datasource (XML string, CSV string, XML island, XML object, JSON object, javascript array)
preventIECaching | prevents caching in IE by adding a random value to URL string
refreshItem | refreshes a tree branch from XML
refreshItems | refreshes the specified tree nodes (gets XML from server and updates only the nodes included into itemIdList)
registerXMLEntity | registers XML entity for replacement during the initialization (the default entities are: ampersand, less-than and greater-than symbols)
restoreSelectedItem | restores the selected item from cookie
saveOpenStates | saves open nodes to cookie
saveSelectedItem | saves the selected item to cookie
saveState | saves tree to cookie
selectItem | selects the specified node (and optionally fires the onClick event)
serializeTree | gets xml representation (as string) of tree
serializeTreeToJSON | returns tree as json string
setAttribute | sets an attribute for an item
setCheck | sets the state of a node's checkbox
setChildCalcHTML | sets children calculation prefix and postfix
setChildCalcMode | sets children calculation mode
setCustomSortFunction | sets custom sort function which has two parameters - id_of_item1,id_of_item2
setDataMode | sets a default data transfer mode
setDragBehavior | sets Drag-And-Drop behavior (child - drop as child, sibling - drop as sibling, complex - complex drop behaviour)
setEditStartAction | defines which events must start the process of editing
setEscapingMode | sets escaping mode (used for escaping ID in requests)
setIconSize | sets the size of icons
setIconsPath | defines path to the icons folder
setImageArrays | sets the images used for parent-child threads drawing (lines, plus, minus)
setImagesPath | defines path to the imgs folder
setItemCloseable | prevents a node from closing
setItemColor | sets the color of the node's text
setItemContextMenu | sets context menu for individual nodes
setItemImage | sets item's icons (mostly useful for childless nodes)
setItemStyle | sets an individual item's style
setItemText | sets a new node's text (HTML is allowed)
setItemTopOffset | sets the top offset for an item
setListDelimeter | sets list separator ("," by default)
setLockedIcons | sets an icon for locked items
setSerializationLevel | configures XML serialization
setSkin | set skin for the component
setStdImages | sets default images for nodes (must be called before XML loading)
setSubChecked | changes the state of the node's checkbox and all children checkboxes
setUserData | sets user data for the target node
setXMLAutoLoading | enables dynamic loading from XML
setXMLAutoLoadingBehaviour | defines the mode of passing to the server the id of an item for which the data should be loaded during dynamic loading
showItemCheckbox | shows/hides a checkbox for a tree item
showItemSign | shows/hides (+/-) an icon
smartRefreshBranch | refreshes the specified tree branch (gets XML from server, adds new nodes, removes unused nodes)
smartRefreshItem | refreshes the specified tree item (gets XML from server, adds new nodes, removes unused nodes)
sortTree | reorders items in the tree according to their text
stopEdit | switches the item which is currently being edited back to normal view
updateItem | updates item's properties
Events
onAllOpenDynamic | fires when all sub levels is loaded and opened
onBeforeCheck | fires before an item is checked/unchecked
onBeforeContextMenu | fires before the moment when a context menu appears on the right mouse click
onBeforeDrag | fires when the item's dragging starts (the item is selected and the mouse is moving)
onCheck | fires immediately after an item in the tree has been checked/unchecked
onClick | fires when the text part of a tree item is clicked, but after the default onClick functionality has been processed
onDblClick | fires right after a tree item has been double clicked, but before the default onDblClick functionality has been processed
onDrag | fires when the item was dragged and dropped on some other item, but before item's moving has been processed
onDragIn | fires when the item is dragged over some target the item can be dropped to
onDrop | fires when drag-and-drop has already been processed; besides, fires when the nodes are moved programmatically
onEdit | fires on 4 different stages of the editing process (see the details)
onEditCancel | event occurs after cancelling edit by Escape key or other means
onKeyPress | fires after each key press when tree is in focus
onMouseIn | fires when the mouse pointer is hovered over an item
onMouseOut | fires when the mouse pointer is moved out of item's area
onOpenDynamicEnd | fires after the item defined in the openItemsDynamic() method opens
onOpenEnd | fires right after an item in the tree has become open
onOpenStart | fires right when an item in the tree starts to open, but before this item has opened
onRightClick | fires when the user clicks the right mouse button
onSelect | fires when selection in the tree was changed
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • assignKeys
    • attachEvent
    • changeItemId
    • clearCut
    • clearSelection
    • closeAllItems
    • closeItem
    • deleteChildItems
    • deleteItem
    • destructor
    • detachEvent
    • disableCheckbox
    • doCut
    • doPaste
    • editItem
    • enableActiveImages
    • enableAutoSavingSelected
    • enableAutoTooltips
    • enableCheckBoxes
    • enableContextMenu
    • enableDistributedParsing
    • enableDragAndDrop
    • enableDragAndDropScrolling
    • enableHighlighting
    • enableIEImageFix
    • enableImageDrag
    • enableItemEditor
    • enableKeySearch
    • enableKeyboardNavigation
    • enableLoadingItem
    • enableMercyDrag
    • enableMultiLineItems
    • enableMultiselection
    • enableRTL
    • enableRadioButtons
    • enableSingleRadioMode
    • enableSmartCheckboxes
    • enableSmartXMLParsing
    • enableTextSigns
    • enableThreeStateCheckboxes
    • enableTreeImages
    • enableTreeLines
    • findItem
    • findItemIdByLabel
    • focusItem
    • getAllChecked
    • getAllCheckedBranches
    • getAllChildless
    • getAllItemsWithKids
    • getAllPartiallyChecked
    • getAllSubItems
    • getAllUnchecked
    • getAttribute
    • getChildItemIdByIndex
    • getDistributedParsingState
    • getIndexById
    • getItemColor
    • getItemIdByIndex
    • getItemImage
    • getItemParsingState
    • getItemText
    • getItemTooltip
    • getLevel
    • getOpenState
    • getParentId
    • getSelectedItemId
    • getSelectedItemText
    • getSubItems
    • getUserData
    • getXMLState
    • hasChildren
    • insertNewChild
    • insertNewItem
    • insertNewNext
    • isItemChecked
    • isLocked
    • load
    • loadCSV
    • loadCSVString
    • loadJSArray
    • loadJSArrayFile
    • loadJSON
    • loadJSONObject
    • loadOpenStates
    • loadState
    • loadXML
    • loadXMLString
    • lockItem
    • lockTree
    • makeAllDraggable
    • makeDraggable
    • moveItem
    • openAllItems
    • openAllItemsDynamic
    • openItem
    • openItemsDynamic
    • openOnItemAdded
    • parse
    • preventIECaching
    • refreshItem
    • refreshItems
    • registerXMLEntity
    • restoreSelectedItem
    • saveOpenStates
    • saveSelectedItem
    • saveState
    • selectItem
    • serializeTree
    • serializeTreeToJSON
    • setAttribute
    • setCheck
    • setChildCalcHTML
    • setChildCalcMode
    • setCustomSortFunction
    • setDataMode
    • setDragBehavior
    • setEditStartAction
    • setEscapingMode
    • setIconSize
    • setIconsPath
    • setImageArrays
    • setImagesPath
    • setItemCloseable
    • setItemColor
    • setItemContextMenu
    • setItemImage
    • setItemStyle
    • setItemText
    • setItemTopOffset
    • setListDelimeter
    • setLockedIcons
    • setSerializationLevel
    • setSkin
    • setStdImages
    • setSubChecked
    • setUserData
    • setXMLAutoLoading
    • setXMLAutoLoadingBehaviour
    • showItemCheckbox
    • showItemSign
    • smartRefreshBranch
    • smartRefreshItem
    • sortTree
    • stopEdit
    • updateItem
  • Events
Start Tree dhtmlXTree API

Methods

assignKeys | configures the keys used for keyboard navigation
attachEvent | adds any user-defined handler to available events
changeItemId | changes the item's id
clearCut | cancels marking an item as cut
clearSelection | unselects the item in the tree
closeAllItems | collapses target node and all sub nodes
closeItem | collapses a node
deleteChildItems | deletes all children of the node
deleteItem | deletes a node
destructor | deletes tree and clears memory
detachEvent | detaches a handler from an event
disableCheckbox | disables a checkbox
doCut | marks the selected item as cut
doPaste | inserts the previously cut branch
editItem | opens editor for the specified item
enableActiveImages | enables active images (clickable and dragable). By default only text part of the node is active
enableAutoSavingSelected | enables/disables autosaving selected node in cookies
enableAutoTooltips | enables auto tooltips (node text as tooltip)
enableCheckBoxes | shows/hides checkboxes (all checkboxes in the tree)
enableContextMenu | enables context menu
enableDistributedParsing | enables distributed parsing of a big tree (items loaded portion by portion with some timeouts)
enableDragAndDrop | enables/disables drag-and-drop
enableDragAndDropScrolling | enables/disables auto scrolling during the drag-and-drop operation
enableHighlighting | enables item highlighting (item's text is highlighted on mouseover)
enableIEImageFix | replaces IMG tag with background images - solves the problem with IE image caching, doesn't work for IE6 SP1
enableImageDrag | enables dragging an item by its image (by default an item is dragged by text)
enableItemEditor | enables editing of the item's text
enableKeySearch | enables searching of items by pressing keys
enableKeyboardNavigation | enables keyboard navigation in the tree
enableLoadingItem | enables/disables "Loading..." item
enableMercyDrag | enables dragging without removing (copies instead of moving)
enableMultiLineItems | enables multiline items
enableMultiselection | enables multiselection
enableRTL | enables Right-to-Left mode in the tree
enableRadioButtons | replaces checkboxes with radio buttons
enableSingleRadioMode | replaces checkboxes with radio buttons
enableSmartCheckboxes | enables smart checkboxes
enableSmartXMLParsing | enables/disables smart XML parsing mode
enableTextSigns | replaces images with text signs
enableThreeStateCheckboxes | enables three-state checkboxes
enableTreeImages | enables tree images
enableTreeLines | enables/disables tree lines (parent-child threads)
findItem | finds a tree item by text, selects it and focuses on it
findItemIdByLabel | finds a tree item by text
focusItem | scrolls Tree to the indicated item to make it visible and sets focus on it
getAllChecked | returns the list of ids of the nodes with checked checkboxes, separated by default delimiter
getAllCheckedBranches | returns the list of ids of the nodes with checked and three-state checkboxes, separated by default delimiter
getAllChildless | returns the list of all items which don't have child nodes
getAllItemsWithKids | returns the list of all items which have child nodes, separated by default delimiter
getAllPartiallyChecked | returns the list of ids of the nodes with three-state checkboxes, separated by default delimiter
getAllSubItems | returns the list of all children nested on all sublevels of the tree (in relation to the specified item)
getAllUnchecked | returns the list of identificators of the nodes with unchecked checkboxes, separated by default delimiter
getAttribute | returns the value of the specified item attribute
getChildItemIdByIndex | returns child node's id by index
getDistributedParsingState | gets the current state of distributed parsing
getIndexById | returns the node's index in the children collection by id
getItemColor | gets the color of the target item
getItemIdByIndex | returns the node's id by index
getItemImage | gets URL of the item's image
getItemParsingState | gets current parsing state of an item
getItemText | returns the node's text
getItemTooltip | gets item's tooltip
getLevel | gets the node's level (position in the hierarchy)
getOpenState | returns open/close state
getParentId | returns the parent item's id
getSelectedItemId | returns the selected item's id
getSelectedItemText | returns the selected node's text
getSubItems | returns a comma-delimited list of ids of all children nested on the sublevel in relation to the specified item
getUserData | gets user data from the target node
getXMLState | returns the current state of XML loading
hasChildren | returns the number of children
insertNewChild | creates a new node as a child to the specified one with parentId
insertNewItem | creates a new node as a child to the specified one with parentId
insertNewNext | creates a new node next to the specified one
isItemChecked | gets the state of the node's checkbox
isLocked | returns "true" if the item is locked
load | loads data to the component via XML or JSON, usually data-values pairs
loadCSV | loads tree from csv file/stream
loadCSVString | loads tree from csv string
loadJSArray | loads tree from js array object
loadJSArrayFile | loads tree from js array file/stream
loadJSON | loads tree from json file
loadJSONObject | loads dhtmlxTree from a JSON object
loadOpenStates | restores open nodes from cookie
loadState | loads tree from cookie
loadXML | loads tree from xml file
loadXMLString | loads tree from xml string
lockItem | locks/unlocks an item
lockTree | locks tree
makeAllDraggable | adds drag-n-drop capabilities to all HTML items with dragInDhtmlXTree attribute
makeDraggable | adds drag-n-drop capabilities (with the possibility to drop into dhtmlxTree) to HTML object
moveItem | moves an item (inside of tree)
openAllItems | expands target node and all sub-nodes
openAllItemsDynamic | expands target node and all child nodes (the same as openAllItems, but works in dynamic trees)
openItem | expands a node
openItemsDynamic | expands the list of nodes in dynamic tree (wait till the end of a node's loading before expanding the next one)
openOnItemAdded | configures if parent node will be expanded immediately after a child item has been added
parse | loads data from a local datasource (XML string, CSV string, XML island, XML object, JSON object, javascript array)
preventIECaching | prevents caching in IE by adding a random value to URL string
refreshItem | refreshes a tree branch from XML
refreshItems | refreshes the specified tree nodes (gets XML from server and updates only the nodes included into itemIdList)
registerXMLEntity | registers XML entity for replacement during the initialization (the default entities are: ampersand, less-than and greater-than symbols)
restoreSelectedItem | restores the selected item from cookie
saveOpenStates | saves open nodes to cookie
saveSelectedItem | saves the selected item to cookie
saveState | saves tree to cookie
selectItem | selects the specified node (and optionally fires the onClick event)
serializeTree | gets xml representation (as string) of tree
serializeTreeToJSON | returns tree as json string
setAttribute | sets an attribute for an item
setCheck | sets the state of a node's checkbox
setChildCalcHTML | sets children calculation prefix and postfix
setChildCalcMode | sets children calculation mode
setCustomSortFunction | sets custom sort function which has two parameters - id_of_item1,id_of_item2
setDataMode | sets a default data transfer mode
setDragBehavior | sets Drag-And-Drop behavior (child - drop as child, sibling - drop as sibling, complex - complex drop behaviour)
setEditStartAction | defines which events must start the process of editing
setEscapingMode | sets escaping mode (used for escaping ID in requests)
setIconSize | sets the size of icons
setIconsPath | defines path to the icons folder
setImageArrays | sets the images used for parent-child threads drawing (lines, plus, minus)
setImagesPath | defines path to the imgs folder
setItemCloseable | prevents a node from closing
setItemColor | sets the color of the node's text
setItemContextMenu | sets context menu for individual nodes
setItemImage | sets item's icons (mostly useful for childless nodes)
setItemStyle | sets an individual item's style
setItemText | sets a new node's text (HTML is allowed)
setItemTopOffset | sets the top offset for an item
setListDelimeter | sets list separator ("," by default)
setLockedIcons | sets an icon for locked items
setSerializationLevel | configures XML serialization
setSkin | set skin for the component
setStdImages | sets default images for nodes (must be called before XML loading)
setSubChecked | changes the state of the node's checkbox and all children checkboxes
setUserData | sets user data for the target node
setXMLAutoLoading | enables dynamic loading from XML
setXMLAutoLoadingBehaviour | defines the mode of passing to the server the id of an item for which the data should be loaded during dynamic loading
showItemCheckbox | shows/hides a checkbox for a tree item
showItemSign | shows/hides (+/-) an icon
smartRefreshBranch | refreshes the specified tree branch (gets XML from server, adds new nodes, removes unused nodes)
smartRefreshItem | refreshes the specified tree item (gets XML from server, adds new nodes, removes unused nodes)
sortTree | reorders items in the tree according to their text
stopEdit | switches the item which is currently being edited back to normal view
updateItem | updates item's properties
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


assignKeys DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

assignKeys

configures the keys used for keyboard navigation

void assignKeys(array keys);

Parameters

keys array configuration array, please check pro_key_nav.html in samples for more details

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


changeItemId DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

changeItemId

changes the item's id

void changeItemId(string|number oldId,string|number newId);

Parameters

oldId | string|number | the old node's id
newId | string|number | a new node's id
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearCut DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

clearCut

cancels marking an item as cut

void clearCut();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearSelection DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

clearSelection

unselects the item in the tree

void clearSelection( [string|number id] );

Parameters

id string|number used in a multi selection tree, optional

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


closeAllItems DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

closeAllItems

collapses target node and all sub nodes

void closeAllItems(string|number id);

Parameters

id string|number the node's id
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


closeItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

closeItem

collapses a node

void closeItem(string|number id);

Parameters

id string|number the node's id
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


deleteChildItems DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

deleteChildItems

deletes all children of the node

void deleteChildItems(string|number id);

Parameters

id string|number the node's id
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


deleteItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

deleteItem

deletes a node

void deleteItem(string|number id,boolean selectParent);

Parameters

id | string|number | the node's id
selectParent | boolean | true - the parent of the deleted item gets selection,false - no selected items left in the tree
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


destructor DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

destructor

deletes tree and clears memory

void destructor();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disableCheckbox DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

disableCheckbox

disables a checkbox

void disableCheckbox(string|number id,boolean state);

Parameters

id | string|number | the node's id
state | boolean | true|false

Example

myTree.disableCheckbox(itemId, state);

Related samples

  • Mixed checkboxes
See also
  • API
    • enableCheckBoxes
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


doCut DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

doCut

marks the selected item as cut

void doCut();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


doPaste DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

doPaste

inserts the previously cut branch

void doPaste(string|number id);

Parameters

id string|number the id of a new parent node
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


editItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

editItem

opens editor for the specified item

void editItem(string|number id);

Parameters

id string|number the node's id
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableActiveImages DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableActiveImages

enables active images (clickable and dragable). By default only text part of the node is active

void enableActiveImages(boolean mode);

Parameters

mode boolean true/false
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoSavingSelected DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableAutoSavingSelected

enables/disables autosaving selected node in cookies

void enableAutoSavingSelected(boolean mode);

Parameters

mode boolean true/false

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoTooltips DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableAutoTooltips

enables auto tooltips (node text as tooltip)

void enableAutoTooltips(boolean mode);

Parameters

mode boolean true/false

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableCheckBoxes DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableCheckBoxes

shows/hides checkboxes (all checkboxes in the tree)

void enableCheckBoxes(boolean mode,boolean hidden);

Parameters

mode | boolean | true|false, to show/hide checkboxes
hidden | boolean | if set to "true", checkboxes aren't rendered, but can be shown by showItemCheckbox()

Example

myTree.enableCheckBoxes(mode, hidden);

Related samples

  • Lists of check boxes states
See also
  • API
    • showItemCheckbox
    • disableCheckbox
    • enableSmartCheckboxes
    • enableThreeStateCheckboxes
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


enableContextMenu DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableContextMenu

enables context menu

void enableContextMenu(dhtmlXMenuObject menu);

Parameters

menu dhtmlXMenuObject menu object

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDistributedParsing DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableDistributedParsing

enables distributed parsing of a big tree (items loaded portion by portion with some timeouts)

void enableDistributedParsing(boolean mode,number count,number delay);

Parameters

mode | boolean | true/false
count | number | critical count to start distributing, optional
delay | number | delay between distributed calls, ms, optional

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDragAndDrop DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableDragAndDrop

enables/disables drag-and-drop

void enableDragAndDrop(string|boolean mode,boolean rmode);

Parameters

mode | string|boolean | true|false|"temporary_disabled"
rmode | boolean | enables|disables drag and drop on the super root
Details

"temporary_disabled" value means that the tree can be drag-n-dropped, can be switched to "true" later

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDragAndDropScrolling DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableDragAndDropScrolling

enables/disables auto scrolling during the drag-and-drop operation

void enableDragAndDropScrolling(boolean mode);

Parameters

mode boolean true/false
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableHighlighting DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableHighlighting

enables item highlighting (item's text is highlighted on mouseover)

void enableHighlighting(boolean mode);

Parameters

mode boolean true/false
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableIEImageFix DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableIEImageFix

replaces IMG tag with background images - solves the problem with IE image caching, doesn't work for IE6 SP1

void enableIEImageFix(boolean mode);

Parameters

mode boolean true/false - enable/disable fix
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableImageDrag DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableImageDrag

enables dragging an item by its image (by default an item is dragged by text)

void enableImageDrag(boolean mode);

Parameters

mode boolean true/false
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableItemEditor DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableItemEditor

enables editing of the item's text

void enableItemEditor(boolean mode);

Parameters

mode boolean true/false
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableKeySearch DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableKeySearch

enables searching of items by pressing keys

void enableKeySearch(boolean mode);

Parameters

mode boolean true/false

Available only in PRO Edition

Details

any item in the tree should be focused/selected to make search possible

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableKeyboardNavigation DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableKeyboardNavigation

enables keyboard navigation in the tree

void enableKeyboardNavigation(boolean mode);

Parameters

mode boolean true/false

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableLoadingItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableLoadingItem

enables/disables "Loading..." item

void enableLoadingItem(string text);

Parameters

text string text of a temporary item, the default one is "Loading..."

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMercyDrag DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableMercyDrag

enables dragging without removing (copies instead of moving)

void enableMercyDrag(boolean mode);

Parameters

mode boolean enable/disable

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMultiLineItems DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableMultiLineItems

enables multiline items

void enableMultiLineItems(number width);

Parameters

width number text's width, if it's equal to zero, use single-line items

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMultiselection DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableMultiselection

enables multiselection

void enableMultiselection(boolean mode,boolean strict);

Parameters

mode | boolean | enable/disable
strict | boolean | if "true" - in strict mode only items on the same level can be selected

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableRTL DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableRTL

enables Right-to-Left mode in the tree

void enableRTL(boolean mode);

Parameters

mode boolean true/false

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableRadioButtons DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableRadioButtons

replaces checkboxes with radio buttons

void enableRadioButtons(boolean mode,string|number id);

Parameters

mode | boolean | true|false
id | string|number | id of the node for which the replacement is called (optional)

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableSingleRadioMode DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableSingleRadioMode

replaces checkboxes with radio buttons

void enableSingleRadioMode(boolean mode,string|number id);

Parameters

mode | boolean | true|false
id | string|number | id of the node for which the replacement is called, optional

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableSmartCheckboxes DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableSmartCheckboxes

enables smart checkboxes

void enableSmartCheckboxes(boolean mode);

Parameters

mode boolean true|false to enable/disable smart checkboxes

Available only in PRO Edition

Example

myTree.enableSmartCheckboxes(true|false);

Details

This functionality is enabled by default (auto-checking of children and parents for 3-state checkboxes)

See also
  • API
    • enableCheckBoxes
    • enableThreeStateCheckboxes
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


enableSmartXMLParsing DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableSmartXMLParsing

enables/disables smart XML parsing mode

void enableSmartXMLParsing(boolean mode);

Parameters

mode boolean true/false to enable/disable

Available only in PRO Edition

Details

the method is useful for big, well-structured XML

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableTextSigns DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableTextSigns

replaces images with text signs

void enableTextSigns(boolean mode);

Parameters

mode boolean true/false

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableThreeStateCheckboxes DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableThreeStateCheckboxes

enables three-state checkboxes

void enableThreeStateCheckboxes(boolean mode);

Parameters

mode boolean true|false to enable/disable three-state checkboxes

Example

tree.enableThreeStateCheckboxes(true|false);

Related samples

  • Mixed checkboxes
See also
  • API
    • enableCheckBoxes
    • enableSmartCheckboxes
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


enableTreeImages DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableTreeImages

enables tree images

void enableTreeImages(boolean mode);

Parameters

mode boolean true/false
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableTreeLines DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

enableTreeLines

enables/disables tree lines (parent-child threads)

void enableTreeLines(boolean mode);

Parameters

mode boolean enable/disable tree lines
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


findItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

findItem

finds a tree item by text, selects it and focuses on it

void findItem(string searchStr,number direction,number top);

Parameters

searchStr | string | search text
direction | number | 0: top -> bottom, 1: bottom -> top
top | number | 1: start searching from top

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


findItemIdByLabel DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

findItemIdByLabel

finds a tree item by text

void findItemIdByLabel(string searchStr,number direction,number top);

Parameters

searchStr | string | search text
direction | number | 0: top -> bottom, 1: bottom -> top
top | number | 1: start searching from top

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


focusItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

focusItem

scrolls Tree to the indicated item to make it visible and sets focus on it

void focusItem(number|string itemId);

Parameters

itemId number|string the item id

Example

// set forcus to the item with the id=3
myTree.focusItem(3);

Related samples

  • Focus item
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllChecked DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getAllChecked

returns the list of ids of the nodes with checked checkboxes, separated by default delimiter

array getAllChecked();

Returns

array list of ids of the nodes with checked checkboxes
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllCheckedBranches DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getAllCheckedBranches

returns the list of ids of the nodes with checked and three-state checkboxes, separated by default delimiter

array getAllCheckedBranches();

Returns

array list of ids of the nodes with checked and three-state checkboxes
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllChildless DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getAllChildless

returns the list of all items which don't have child nodes

array getAllChildless();

Returns

array list of items without child nodes
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllItemsWithKids DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getAllItemsWithKids

returns the list of all items which have child nodes, separated by default delimiter

array getAllItemsWithKids();

Returns

array list of items with child nodes
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllPartiallyChecked DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getAllPartiallyChecked

returns the list of ids of the nodes with three-state checkboxes, separated by default delimiter

array getAllPartiallyChecked();

Returns

array list of ids of the nodes with three-state checkboxes
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllSubItems DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getAllSubItems

returns the list of all children nested on all sublevels of the tree (in relation to the specified item)

array getAllSubItems(string|number id);

Parameters

id string|number the id of the node

Returns

array the list of subitems
Details

items in the list are separated by default delimiter

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllUnchecked DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getAllUnchecked

returns the list of identificators of the nodes with unchecked checkboxes, separated by default delimiter

array getAllUnchecked();

Returns

array list of ids of the nodes with unchecked checkboxes
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttribute DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getAttribute

returns the value of the specified item attribute

mixed getAttribute(string|number id,string name);

Parameters

id | string|number | the id of an item
name | string | the name of an attribute

Returns

mixed the attribute's value

Available only in PRO Edition

Details

The getAttribute() method allows getting attributes defined in datasource as well the attributes that are set via the setAttribute method. But attributes are not sent with Ajax request in case of using DataProcessor (userdata are sent).

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getChildItemIdByIndex DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getChildItemIdByIndex

returns child node's id by index

string|number getChildItemIdByIndex(string|number id,number index);

Parameters

id | string|number | the parent node's id
index | number | the index of the child node

Returns

string|number child node's id
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getDistributedParsingState DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getDistributedParsingState

gets the current state of distributed parsing

boolean getDistributedParsingState();

Returns

boolean true - still parsing, false - parsing finished

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getIndexById DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getIndexById

returns the node's index in the children collection by id

number getIndexById(string|number id);

Parameters

id string|number the node's id

Returns

number the node's index
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemColor DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getItemColor

gets the color of the target item

string getItemColor(string|number id);

Parameters

id string|number the id of the item

Returns

string target item's color
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemIdByIndex DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getItemIdByIndex

returns the node's id by index

string|number getItemIdByIndex(string|number id,number index);

Parameters

id | string|number | the parent node's id
index | number | the index of the node, 0-based

Returns

string|number the node's id
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemImage DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getItemImage

gets URL of the item's image

string getItemImage(string|number id,number imageInd,number value);

Parameters

id | string|number | the id of the item
imageInd | number | the index of the image (0 - leaf, 1 - closed folder, 2 - opened folder)
value | number | the value of the top offset

Returns

string URL of the item's image

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemParsingState DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getItemParsingState

gets current parsing state of an item

number getItemParsingState();

Returns

number 1 - item is parsed, 0 - item hasn't been parsed yet, -1 - item is in parsing process

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemText DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getItemText

returns the node's text

string getItemText(string|number id);

Parameters

id string|number the id of the node

Returns

string the node's text
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemTooltip DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getItemTooltip

gets item's tooltip

string getItemTooltip(string|number id);

Parameters

id string|number the node's id

Returns

string the node's tooltip
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getLevel DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getLevel

gets the node's level (position in the hierarchy)

number getLevel(string|number id);

Parameters

id string|number the node's id

Returns

number the node's level in the hierarchy
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getOpenState DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getOpenState

returns open/close state

boolean getOpenState(string|number id);

Parameters

id string|number the node's id

Returns

boolean "true" if opened
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getParentId DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getParentId

returns the parent item's id

string|number getParentId(string|number id);

Parameters

id string|number the node's id

Returns

string|number the parent item's id
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelectedItemId DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getSelectedItemId

returns the selected item's id

string|number getSelectedItemId();

Returns

string|number the node's id
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelectedItemText DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getSelectedItemText

returns the selected node's text

string getSelectedItemText();

Returns

string the node's text
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSubItems DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getSubItems

returns a comma-delimited list of ids of all children nested on the sublevel in relation to the specified item

array getSubItems(string|number id);

Parameters

id string|number the node's id

Returns

array the list of subitems' ids
Details

the list of subitems is comma-delimited

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getUserData DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getUserData

gets user data from the target node

object getUserData(string|number id,string name);

Parameters

id | string|number | the target node's id
name | string | the key for user data

Returns

object user data from the target node
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getXMLState DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

getXMLState

returns the current state of XML loading

boolean getXMLState();

Returns

boolean state of XML loading (true, if data is loading in the tree at the moment)

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hasChildren DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

hasChildren

returns the number of children

number hasChildren(string|number id);

Parameters

id string|number the node's id

Returns

number the number of children
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


insertNewChild DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

insertNewChild

creates a new node as a child to the specified one with parentId

void insertNewChild(string|number parentId,string|number id,string text, [function actionHandler,string image1,string image2,string image3,string optionStr,mixed children] );

Parameters

parentId | string|number | parent node's id
id | string|number | new node's id
text | string | new node's label
actionHandler | function | function fired on clicking an item, optional
image1 | string | image for a node without children, optional
image2 | string | image for a closed node, optional
image3 | string | image for an opened node, optional
optionStr | string | options' string, optional
children | mixed | node children flag (for dynamic trees), optional

Example

myTree.insertNewChild("my_parent_11","11_1","item 11");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


insertNewItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

insertNewItem

creates a new node as a child to the specified one with parentId

void insertNewItem(string|number parentId,string|number id,string text, [function actionHandler,string image1,string image2,string image3,string optionStr,mixed children] );

Parameters

parentId | string|number | parent node's id
id | string|number | new node's id
text | string | new node's label
actionHandler | function | function fired on clicking an item, optional
image1 | string | image for a node without children, optional
image2 | string | image for a closed node, optional
image3 | string | image for an opened node, optional
optionStr | string | options' string, optional
children | mixed | node children flag (for dynamic trees), optional

Example

myTree.insertNewItem("my_parent_11","11_1","item 11");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


insertNewNext DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

insertNewNext

creates a new node next to the specified one

void insertNewNext(string|number nextToId,string|number id,string text, [function actionHandler,string image1,string image2,string image3,string optionStr,mixed children] );

Parameters

nextToId | string|number | id of the node after which a new item will be inserted
id | string|number | new node's id
text | string | new node's label
actionHandler | function | function fired on clicking an item, optional
image1 | string | image for a node without children, optional
image2 | string | image for a closed node, optional
image3 | string | image for an opened node, optional
optionStr | string | options' string, optional
children | mixed | node children flag (for dynamic trees), optional

Example

myTree.insertNewNext("my_node_11","11_1","item 11");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isItemChecked DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

isItemChecked

gets the state of the node's checkbox

boolean isItemChecked(string|number itemId);

Parameters

itemId string|number the node's id

Returns

boolean true|false for the checked|unchecked state

Example

var checkState = myTree.isItemChecked(itemId);

Related samples

  • Lists of check boxes states
See also
  • API
    • setCheck
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


isLocked DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

isLocked

returns "true" if the item is locked

boolean isLocked(string|number id);

Parameters

id string|number the node's id

Returns

boolean true if locked

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


load DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

load

loads data from an external file ( xml, json, jsarray, csv )

promise load(string url,function call,string type);

Parameters

url | string | url to the external file
call | function | after loading callback function, optional, can be omitted
type | string | type of data (xml,csv,json,jsarray), optional, xml by default

Returns

promise a "promise" object

Example

//load grid from the external file
myTree.load("tree.xml");
//load grid, execute doAfterRefresh() function after grid was loaded
myTree.load("tree.xml",doAfterRefresh);
//load grid from the external csv file,
//execute doAfterRefresh() function after grid was loaded
myTree.load("tree.csv",doAfterRefresh,"csv");

Change log

added in 4.4

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadCSV DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

loadCSV

loads tree from csv file/stream

void loadCSV(string csvFile,function afterCall,string type);

Deprecated

Use load method

myTree.load(csvFile,afterCall,"csv");

Parameters

csvFile | string | link to CSV file
afterCall | function | function which will be called after data loading
type | string | type of data, optional, xml by default
Change log

deprecated since version 4.4

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadCSVString DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

loadCSVString

loads tree from csv string

void loadCSVString(string csvString,function afterCall,string type);

Deprecated

Use parse method

myTree.parse(csvString,"csv");

Parameters

csvString | string | csv string
afterCall | function | function which will be called after data loading
type | string | type of data, optional, xml by default
Change log

deprecated since version 4.4

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadJSArray DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

loadJSArray

loads tree from js array object

void loadJSArray(array JSArray,function afterCall,string type);

Deprecated

Use parse method

myTree.parse(JSArray, "jsarray");

Parameters

JSArray | array | js array
afterCall | function | function which will be called after data loading
type | string | data type, optional, xml by default
Change log

deprecated since version 4.4

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadJSArrayFile DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

loadJSArrayFile

loads tree from js array file/stream

void loadJSArrayFile(string jsarrayFile,function afterCall,string type);

Deprecated

Use load method

myTree.load(jsarrayFile, afterCall,"jsarray");

Parameters

jsarrayFile | string | link to JSArray file
afterCall | function | function which will be called after data loading
type | string | type of data, optional, xml by default
Change log

deprecated since version 4.4

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadJSON DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

loadJSON

loads tree from json file

void loadJSON(string jsonFile,function afterCall,string type);

Deprecated

Use load method

myTree.load(jsonFile,afterCall,"json");

Parameters

jsonFile | string | link to JSON file
afterCall | function | function which will be called after data loading
type | string | type of data, optional, xml by default
Change log

deprecated since version 4.4

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadJSONObject DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

loadJSONObject

loads dhtmlxTree from a JSON object

void loadJSONObject(object jsonObject,function afterCall,string type);

Deprecated

Use parse method

myTree.parse(jsonObject,"json");

Parameters

jsonObject | object | a json object
afterCall | function | function which will be called after data loading
type | string | type of data, optional, xml by default

Example

var myTree = new dhtmlXTreeObject('treeboxbox_tree', '100%', '100%', 0);
myTree.setSkin('dhx_skyblue');
myTree.setImagePath("../../codebase/imgs/csh_bluebooks/");
myTree.loadJSONObject(
    {id:0, item:[
        {id:1,text:"1111"},
        {id:2, text:"222222", item:[
            {id:"21", text:"child"}
        ]},
        {id:3,text:"3333"}]
    },
    function(){
        alert("Your data has been loaded.");
    }
);

Change log

deprecated since version 4.4

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadOpenStates DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

loadOpenStates

restores open nodes from cookie

void loadOpenStates(string name);

Parameters

name string cookie name, optional

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadState DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

loadState

loads tree from cookie

void loadState(string name);

Parameters

name string cookie name, optional

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadXML DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

loadXML

loads tree from xml file

void loadXML(string xmlFile,function afterCall,string type);

Deprecated

Use load method

myTree.load(xmlFile, afterCall,"xml");

Parameters

xmlFile | string | link to XML file
afterCall | function | function which will be called after xml loading
type | string | type of data, optional, xml by default
Change log

deprecated since version 4.4

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadXMLString DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

loadXMLString

loads tree from xml string

void loadXMLString(string xmlString,function afterCall,string type);

Deprecated

Use parse method

myTree.parse(xmlString,"xml");

Parameters

xmlString | string | XML string to load
afterCall | function | function which will be called after xml loading
type | string | type of data, optional, xml by default
Change log

deprecated since version 4.4

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


lockItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

lockItem

locks/unlocks an item

void lockItem(string|number id,boolean mode);

Parameters

id | string|number | the node's id
mode | boolean | true - lock, false - unlock

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


lockTree DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

lockTree

locks tree

void lockTree(boolean mode);

Parameters

mode boolean true - lock, false - unlock

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


makeAllDraggable DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

makeAllDraggable

adds drag-n-drop capabilities to all HTML items with dragInDhtmlXTree attribute

void makeAllDraggable(function func);

Parameters

func function custom drag processor function, optional
Details

drag-n-drop capabilities include the possibility to drop into dhtmlxTree

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


makeDraggable DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

makeDraggable

adds drag-n-drop capabilities (with the possibility to drop into dhtmlxTree) to HTML object

void makeDraggable(string|number|HTMLElement obj, [function func] );

Parameters

obj | string|number|HTMLElement | an HTML object, or the ID of an HTML object
func | function | custom drag processor function, optional
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

moveItem

moves an item (inside of tree)

void moveItem(string|number id,string mode,string|number targetId, [object targetTree] );

Parameters

id | string|number | the item's id
mode | string | the moving mode (see the details)
targetId | string|number | the target node in the 'item_child' or 'item_sibling' mode
targetTree | object | a dhtmlXTreeObject instance, used for moving between trees, optional
Details

moving mode values:

  • 'left'
  • 'up'
  • 'down'
  • 'item_child'
  • 'item_sibling'
  • 'item_sibling_next'
  • 'up_strict'
  • 'down_strict'
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


openAllItems DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

openAllItems

expands target node and all sub-nodes

void openAllItems(string|number id);

Parameters

id string|number the node's id
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


openAllItemsDynamic DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

openAllItemsDynamic

expands target node and all child nodes (the same as openAllItems, but works in dynamic trees)

void openAllItemsDynamic(string|number id);

Parameters

id string|number the node's id, optional

Available only in PRO Edition

See also
  • API
    • openAllItems
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


openItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

openItem

expands a node

void openItem(string|number id);

Parameters

id string|number the node's id
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


openItemsDynamic DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

openItemsDynamic

expands the list of nodes in dynamic tree (wait till the end of a node's loading before expanding the next one)

void openItemsDynamic(string list,boolean flag);

Parameters

list | string | list of nodes which will be expanded
flag | boolean | true|false - select last node in the list

Available only in PRO Edition

Example

myTree.openItemsDynamic("id_0,id_0_2,id_0_2_3,id_2,id_2_1",true);

Details

the method calls onOpenDynamicEnd event

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


openOnItemAdded DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

openOnItemAdded

configures if parent node will be expanded immediately after a child item has been added

void openOnItemAdded(boolean mode);

Parameters

mode boolean true/false

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


parse DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

parse

loads data from a local datasource (XML string, CSV string, XML island, XML object, JSON object, javascript array)

void parse(string|object data,string type);

Parameters

data | string|object | the data to load
type | string | data type (XML,JSON,JSarray,CSV), optional, data is treated as XML by default

Example

//parse tree from the xml string
myTree.parse(data);
//parse tree from the csv string
myTree.parse(data,"csv");
//parse tree from the javascript array
myTree.parse(data,"jsarray");
//parse tree from the json string
myTree.parse(data,"json");

Details

the method works in the synchronous mode

Change log

added in version 4.4

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


preventIECaching DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

preventIECaching

prevents caching in IE by adding a random value to URL string

void preventIECaching(boolean mode);

Parameters

mode boolean enable/disable a random value (disabled by default)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


refreshItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

refreshItem

refreshes a tree branch from XML

void refreshItem(string|number id);

Parameters

id string|number the node's id, if it isn't defined, the tree's super root is used
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


refreshItems DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

refreshItems

refreshes the specified tree nodes (gets XML from server and updates only the nodes included into itemIdList)

void refreshItems(string itemIdList,string source);

Parameters

itemIdList | string | list of node identificators
source | string | server side script

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


registerXMLEntity DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

registerXMLEntity

registers XML entity for replacement during the initialization (the default entities are: ampersand, less-than and greater-than symbols)

void registerXMLEntity(string rChar,string rEntity);

Parameters

rChar | string | source char
rEntity | string | target entity

Available only in PRO Edition

Details

This method should be used with the setSerializationLevel() method that enables replacement (with "true" as the 3rd parameter).

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


restoreSelectedItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

restoreSelectedItem

restores the selected item from cookie

void restoreSelectedItem(string name);

Parameters

name string cookie name, optional

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveOpenStates DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

saveOpenStates

saves open nodes to cookie

void saveOpenStates( [string name,string cookieParam] );

Parameters

name | string | optional, cookie name
cookieParam | string | optional, additional parameters added to cookie

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveSelectedItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

saveSelectedItem

saves the selected item to cookie

void saveSelectedItem( [string name,string cookieParam] );

Parameters

name | string | optional, cookie name
cookieParam | string | optional, additional parameters added to cookie

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveState DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

saveState

saves tree to cookie

void saveState( [string name,string cookieParam] );

Parameters

name | string | optional, cookie name
cookieParam | string | optional, additional parameters added to cookie

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

selectItem

selects the specified node (and optionally fires the onClick event)

void selectItem(string|number id,boolean mode,boolean preserve);

Parameters

id | string|number | the node id
mode | boolean | if true, the script fires the 'onClick' event for the specified node
preserve | boolean | if true, the earlier selected nodes will be preserved
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


serializeTree DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

serializeTree

gets xml representation (as string) of tree

string serializeTree();

Returns

string xml string

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


serializeTreeToJSON DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

serializeTreeToJSON

returns tree as json string

string serializeTreeToJSON();

Returns

string json string
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setAttribute DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setAttribute

sets an attribute for an item

void setAttribute(string|number id,string name,mixed value);

Parameters

id | string|number | the id of an item
name | string | the name of an attribute
value | mixed | the value of the attribute

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCheck DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setCheck

sets the state of a node's checkbox

void setCheck(string|number id,string|number state);

Parameters

id | string|number | target node's id
state | string|number | checkbox's state (0|1|"unsure")

Example

myTree.setCheck(id,state);

Related samples

  • Lists of check boxes states
See also
  • API
    • isItemChecked
    • setSubChecked
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setChildCalcHTML DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setChildCalcHTML

sets children calculation prefix and postfix

void setChildCalcHTML(string htmlA,string htmlB);

Parameters

htmlA | string | prefix ([ - by default)
htmlB | string | postfix (] - by default)

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setChildCalcMode DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setChildCalcMode

sets children calculation mode

void setChildCalcMode(string mode);

Parameters

mode string mode name as string

Available only in PRO Edition

Details

mode values:

  • child - children, no recursive;
  • leafs - children without subchildren, no recursive;
  • childrec - children, recursive;
  • leafsrec - children without subchildren, recursive;
  • disabled (disabled by default).
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCustomSortFunction DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setCustomSortFunction

sets custom sort function which has two parameters - id_of_item1,id_of_item2

void setCustomSortFunction(function func);

Parameters

func function sorting function

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDataMode DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setDataMode

sets a default data transfer mode

void setDataMode(string mode);

Parameters

mode string data mode (json,xml,csv)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDragBehavior DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setDragBehavior

sets Drag-And-Drop behavior (child - drop as child, sibling - drop as sibling, complex - complex drop behaviour)

void setDragBehavior(string mode,boolean select);

Parameters

mode | string | behavior name (child,sibling,complex)
select | boolean | select the dropped node after drag-n-drop, true by default

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setEditStartAction DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setEditStartAction

defines which events must start the process of editing

void setEditStartAction(boolean click,boolean dblclick);

Parameters

click | boolean | click on already selected item - true/false (true by default)
dblclick | boolean | on double click
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setEscapingMode DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setEscapingMode

sets escaping mode (used for escaping ID in requests)

void setEscapingMode(string mode);

Parameters

mode string escaping mode ("utf8" for UTF escaping)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconSize DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setIconSize

sets the size of icons

void setIconSize(string newWidth,string newHeight, [string|number id] );

Parameters

newWidth | string | new icon's width in pixels
newHeight | string | new icon's height in pixels
id | string|number | item's id, if skipped, set default value for all new icons, optional

Available only in PRO Edition

Example

myTree.setIconSize("16px", "16px");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconsPath DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setIconsPath

defines path to the icons folder

void setIconsPath(string path);

Parameters

path string path to icons folder, relative to the current page

Example

tree.setIconsPath("./icons");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setImageArrays DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setImageArrays

sets the images used for parent-child threads drawing (lines, plus, minus)

void setImageArrays(string arrayName,string image1,string image2,string image3,string image4,string image5);

Parameters

arrayName | string | name of array: plus, minus
image1 | string | crossed out image
image2 | string | image with a top line
image3 | string | image with a bottom line
image4 | string | image without lines
image5 | string | single root image
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setImagesPath DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setImagesPath

defines path to the imgs folder

void setImagesPath(string path);

Parameters

path string path to imgs folder, relative to the current page

Example

tree.setImagesPath("./codebase/imgs");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemCloseable DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setItemCloseable

prevents a node from closing

void setItemCloseable(string|number id,boolean flag);

Parameters

id | string|number | the id of the node
flag | boolean | false - the node can't be closed, else the node can be closed
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemColor DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setItemColor

sets the color of the node's text

void setItemColor(string|number id,string defaultColor,string selectedColor);

Parameters

id | string|number | id of the node
defaultColor | string | node's color
selectedColor | string | selected node's color
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemContextMenu DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setItemContextMenu

sets context menu for individual nodes

void setItemContextMenu(string|number id,object menu);

Parameters

id | string|number | the node's id
menu | object | dhtmlXMenuObject instance of the context menu

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemImage DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setItemImage

sets item's icons (mostly useful for childless nodes)

void setItemImage(string|number id,string im1, [string im2] );

Parameters

id | string|number | id of the node
im1 | string | icon for a node without children or icon for a closed node (if the "im2" parameter is specified)
im2 | string | icon for an open node (optional)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemStyle DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setItemStyle

sets an individual item's style

void setItemStyle(string|number id,string styleString);

Parameters

id | string|number | the node's id
styleString | string | a valid CSS string
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemText DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setItemText

sets a new node's text (HTML is allowed)

void setItemText(string|number id,string newLabel, [string newTooltip] );

Parameters

id | string|number | the id of the node
newLabel | string | the node's text
newTooltip | string | a tooltip for the node, optional
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemTopOffset DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setItemTopOffset

sets the top offset for an item

void setItemTopOffset(string|number id,number value);

Parameters

id | string|number | the id of the item
value | number | the value of the top offset in px

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setListDelimeter DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setListDelimeter

sets list separator ("," by default)

void setListDelimeter(string separator);

Parameters

separator string char or string to use for separating items in lists

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setLockedIcons DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setLockedIcons

sets an icon for locked items

void setLockedIcons(string im0,string im1,string im2);

Parameters

im0 | string | icon for a locked leaf
im1 | string | icon for a closed branch
im2 | string | icon for an opened branch

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSerializationLevel DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setSerializationLevel

configures XML serialization

void setSerializationLevel(boolean userData,boolean fullXML,boolean escapeEntities,boolean userDataAsCData,boolean DTD);

Parameters

userData | boolean | enable/disable user data serialization
fullXML | boolean | enable/disable full XML serialization
escapeEntities | boolean | convert special chars into related html entitites
userDataAsCData | boolean | output user data in CDATA sections
DTD | boolean | if specified, then set as XML's DTD

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setSkin

set skin for the component

void setSkin(string skin);

Parameters

skin string name of skin

Example

tree.setSkin("dhx_skyblue")

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setStdImages DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setStdImages

sets default images for nodes (must be called before XML loading)

void setStdImages(string im0,string im1,string im2);

Parameters

im0 | string | image for a node without children
im1 | string | image for a closed node
im2 | string | image for an opened node
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSubChecked DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setSubChecked

changes the state of the node's checkbox and all children checkboxes

void setSubChecked(string|number id,boolean state);

Parameters

id | string|number | target node's id
state | boolean | checkbox's state

Example

myTree.setSubChecked(id, state);

Related samples

  • Lists of check boxes states
See also
  • API
    • setCheck
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setUserData DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setUserData

sets user data for the target node

void setUserData(string|number id,string name,string|number value);

Parameters

id | string|number | target node's id
name | string | key for user data
value | string|number | user data's value
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setXMLAutoLoading DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setXMLAutoLoading

enables dynamic loading from XML

void setXMLAutoLoading(string filePath);

Parameters

filePath string name of the script returning XML, in case of virtual loading - user-defined function

Example

tree.setXMLAutoLoading(filePath);

Related samples

  • Autoloading from XML
See also
  • Articles
    • Loading Big Datasets
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setXMLAutoLoadingBehaviour DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

setXMLAutoLoadingBehaviour

defines the mode of passing to the server the id of an item for which the data should be loaded during dynamic loading

void setXMLAutoLoadingBehaviour(string|number|function mode);

Parameters

mode string|number|function mode of passing the item's id to the server (see the details)

Available only in PRO Edition

Example

tree.setXMLAutoLoadingBehavior("function");
tree.setXMLAutoLoading(function(id){
    tree.load("some.php?id="+id)
});

Related samples

  • Operations in a dynamic tree
Details

Possible mode values are:

  • id (default) to pass "some_script?id=item_id"
  • function for calling a user-defined handler to configure data loading
  • name to pass "some_scriptitem_id"
  • xmlname to pass "some_scriptitem_id.xml"
See also
  • Articles
    • Loading Big Datasets
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


showItemCheckbox DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

showItemCheckbox

shows/hides a checkbox for a tree item

void showItemCheckbox(string|number id,boolean state);

Parameters

id | string|number | the node's id, optional, set null to change states of all items
state | boolean | checkbox's showing state (true - a checkbox is visible, false - invisible)

Available only in PRO Edition

Example

// enable checkboxes in Tree, but not render them
tree.enableCheckBoxes(true, true);
...
// show a checkbox for the specified item
tree.showItemCheckbox(itemId, state);

Related samples

  • Lists of check boxes states
Details

The method works only for individual items, not for the entire tree.

See also
  • API
    • enableCheckBoxes
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


showItemSign DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

showItemSign

shows/hides (+/-) an icon

void showItemSign(string|number id,boolean state);

Parameters

id | string|number | the node's id
state | boolean | showing state

Available only in PRO Edition

Details

the method works only for individual items, not for entire tree

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


smartRefreshBranch DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

smartRefreshBranch

refreshes the specified tree branch (gets XML from server, adds new nodes, removes unused nodes)

void smartRefreshBranch(string|number id, [string source] );

Parameters

id | string|number | the node's id
source | string | server side script, optional

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


smartRefreshItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

smartRefreshItem

refreshes the specified tree item (gets XML from server, adds new nodes, removes unused nodes)

void smartRefreshItem(string|number id, [string source] );

Parameters

id | string|number | the top node of the branch
source | string | server side script, optional

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


sortTree DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

sortTree

reorders items in the tree according to their text

void sortTree(string|number nodeId,string order,boolean allLevels);

Parameters

nodeId | string|number | the id of the node to start sorting from
order | string | sorting order - ASC or DES
allLevels | boolean | sorting all levels (true) or only current level (false)

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


stopEdit DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

stopEdit

switches the item which is currently being edited back to normal view

void stopEdit();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


updateItem DHTMLX Docs

Documentation
  • assignKeys
  • attachEvent
  • changeItemId
  • clearCut
  • clearSelection
  • closeAllItems
  • closeItem
  • deleteChildItems
  • deleteItem
  • destructor
  • detachEvent
  • disableCheckbox
  • doCut
  • doPaste
  • editItem
  • enableActiveImages
  • enableAutoSavingSelected
  • enableAutoTooltips
  • enableCheckBoxes
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragAndDropScrolling
  • enableHighlighting
  • enableIEImageFix
  • enableImageDrag
  • enableItemEditor
  • enableKeySearch
  • enableKeyboardNavigation
  • enableLoadingItem
  • enableMercyDrag
  • enableMultiLineItems
  • enableMultiselection
  • enableRTL
  • enableRadioButtons
  • enableSingleRadioMode
  • enableSmartCheckboxes
  • enableSmartXMLParsing
  • enableTextSigns
  • enableThreeStateCheckboxes
  • enableTreeImages
  • enableTreeLines
  • findItem
  • findItemIdByLabel
  • focusItem
  • getAllChecked
  • getAllCheckedBranches
  • getAllChildless
  • getAllItemsWithKids
  • getAllPartiallyChecked
  • getAllSubItems
  • getAllUnchecked
  • getAttribute
  • getChildItemIdByIndex
  • getDistributedParsingState
  • getIndexById
  • getItemColor
  • getItemIdByIndex
  • getItemImage
  • getItemParsingState
  • getItemText
  • getItemTooltip
  • getLevel
  • getOpenState
  • getParentId
  • getSelectedItemId
  • getSelectedItemText
  • getSubItems
  • getUserData
  • getXMLState
  • hasChildren
  • insertNewChild
  • insertNewItem
  • insertNewNext
  • isItemChecked
  • isLocked
  • load
  • loadCSV
  • loadCSVString
  • loadJSArray
  • loadJSArrayFile
  • loadJSON
  • loadJSONObject
  • loadOpenStates
  • loadState
  • loadXML
  • loadXMLString
  • lockItem
  • lockTree
  • makeAllDraggable
  • makeDraggable
  • moveItem
  • openAllItems
  • openAllItemsDynamic
  • openItem
  • openItemsDynamic
  • openOnItemAdded
  • parse
  • preventIECaching
  • refreshItem
  • refreshItems
  • registerXMLEntity
  • restoreSelectedItem
  • saveOpenStates
  • saveSelectedItem
  • saveState
  • selectItem
  • serializeTree
  • serializeTreeToJSON
  • setAttribute
  • setCheck
  • setChildCalcHTML
  • setChildCalcMode
  • setCustomSortFunction
  • setDataMode
  • setDragBehavior
  • setEditStartAction
  • setEscapingMode
  • setIconSize
  • setIconsPath
  • setImageArrays
  • setImagesPath
  • setItemCloseable
  • setItemColor
  • setItemContextMenu
  • setItemImage
  • setItemStyle
  • setItemText
  • setItemTopOffset
  • setListDelimeter
  • setLockedIcons
  • setSerializationLevel
  • setSkin
  • setStdImages
  • setSubChecked
  • setUserData
  • setXMLAutoLoading
  • setXMLAutoLoadingBehaviour
  • showItemCheckbox
  • showItemSign
  • smartRefreshBranch
  • smartRefreshItem
  • sortTree
  • stopEdit
  • updateItem
Start Tree dhtmlXTree API Methods

updateItem

updates item's properties

void updateItem(array itemId,array name,array im0,array im1,array im2,array checked);

Parameters

itemId | array | list of node identificators
name | array | list of node identificators, optional
im0 | array | list of node identificators, optional
im1 | array | list of node identificators, optional
im2 | array | list of node identificators, optional
checked | array | list of node identificators, optional

Available only in PRO Edition

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onAllOpenDynamic
    • onBeforeCheck
    • onBeforeContextMenu
    • onBeforeDrag
    • onCheck
    • onClick
    • onDblClick
    • onDrag
    • onDragIn
    • onDrop
    • onEdit
    • onEditCancel
    • onKeyPress
    • onMouseIn
    • onMouseOut
    • onOpenDynamicEnd
    • onOpenEnd
    • onOpenStart
    • onRightClick
    • onSelect
    • onXLE
    • onXLS
Start Tree dhtmlXTree API

Events

onAllOpenDynamic | fires when all sub levels is loaded and opened
onBeforeCheck | fires before an item is checked/unchecked
onBeforeContextMenu | fires before the moment when a context menu appears on the right mouse click
onBeforeDrag | fires when the item's dragging starts (the item is selected and the mouse is moving)
onCheck | fires immediately after an item in the tree has been checked/unchecked
onClick | fires when the text part of a tree item is clicked, but after the default onClick functionality has been processed
onDblClick | fires right after a tree item has been double clicked, but before the default onDblClick functionality has been processed
onDrag | fires when the item was dragged and dropped on some other item, but before item's moving has been processed
onDragIn | fires when the item is dragged over some target the item can be dropped to
onDrop | fires when drag-and-drop has already been processed; besides, fires when the nodes are moved programmatically
onEdit | fires on 4 different stages of the editing process (see the details)
onEditCancel | event occurs after cancelling edit by Escape key or other means
onKeyPress | fires after each key press when tree is in focus
onMouseIn | fires when the mouse pointer is hovered over an item
onMouseOut | fires when the mouse pointer is moved out of item's area
onOpenDynamicEnd | fires after the item defined in the openItemsDynamic() method opens
onOpenEnd | fires right after an item in the tree has become open
onOpenStart | fires right when an item in the tree starts to open, but before this item has opened
onRightClick | fires when the user clicks the right mouse button
onSelect | fires when selection in the tree was changed
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAllOpenDynamic DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onAllOpenDynamic

fires when all sub levels is loaded and opened

void onAllOpenDynamic(){ ... };

Example

tree.openAllItemsDynamic();
tree.attachEvent("onAllOpenDynamic", function(){
    alert("Done");
})

Details

related to openAllItemsDynamic and openItemsDynamic commands

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeCheck DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onBeforeCheck

fires before an item is checked/unchecked

boolean onBeforeCheck(string|number id,boolean state){ ... };

Parameters

id | string|number | the id of the item
state | boolean | the current state of the checkbox

Returns

boolean true - allows checking

Example

myTree.attachEvent("onBeforeCheck", function(id, state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeContextMenu DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onBeforeContextMenu

fires before the moment when a context menu appears on the right mouse click

void onBeforeContextMenu(string|number id){ ... };

Parameters

id string|number the id of the tree item the user clicked on

Example

myTree.attachEvent("onBeforeContextMenu", function(id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDrag DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onBeforeDrag

fires when the item's dragging starts (the item is selected and the mouse is moving)

boolean onBeforeDrag(string|number sId){ ... };

Parameters

sId string|number id of the source item

Returns

boolean true - confirms drag-and-drop start, false - denies it (operation will not start)

Example

myTree.attachEvent("onBeforeDrag", function(sId){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCheck DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onCheck

fires immediately after an item in the tree has been checked/unchecked

void onCheck(string|number id,boolean state){ ... };

Parameters

id | string|number | id of the item that was checked/unchecked
state | boolean | current state of the checkbox (1 - item is checked, 0 - item is unchecked)

Example

myTree.attachEvent("onCheck", function(id, state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClick DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onClick

fires when the text part of a tree item is clicked, but after the default onClick functionality has been processed

boolean onClick(string|number id){ ... };

Parameters

id string|number id of the clicked item

Returns

boolean true|false, to confirm/deny an item's selection

Example

myTree.attachEvent("onClick", function(id){
    // your code here
});

// if the tree contains items with link-like functionality
myTree.attachEvent("onClick",function(id){
    window.open(myTree.getUserData(id,"href"));
    return true;
});

Details

The event is blockable. Returning "false" will prevent the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDblClick DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onDblClick

fires right after a tree item has been double clicked, but before the default onDblClick functionality has been processed

boolean onDblClick(string|number id){ ... };

Parameters

id string|number id of the node that was double clicked

Returns

boolean true - confirms opening/closing

Example

myTree.attachEvent("onDblClick", function(id){
    // your code here
    return true;
});

Details

The event is blockable. Returning "false" will prevent the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDrag DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onDrag

fires when the item was dragged and dropped on some other item, but before item's moving has been processed

boolean onDrag(string|number sId,string|number tId,string|number id,object sObject,object tObject){ ... };

Parameters

sId | string|number | id of the source item
tId | string|number | id of the target item
id | string|number | id of the item before which the source node will be inserted (if the node is dropped as a sibling)
sObject | object | dhtmlXTreeObject instance of the source tree
tObject | object | dhtmlXTreeObject instance of the target tree

Returns

boolean true to allow dran-and-drop start

Example

myTree.attachEvent("onDrag", function(sId, tId, id, sObject, tObject){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDragIn DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onDragIn

fires when the item is dragged over some target the item can be dropped to

boolean onDragIn(string|number sId,string|number tId,object sObject,object tObject){ ... };

Parameters

sId | string|number | id of the dragged item
tId | string|number | id of the potential drop landing
sObject | object | dhtmlXTreeObject instance of the source tree
tObject | object | dhtmlXTreeObject instance of the target tree

Returns

boolean true to allow dropping

Example

myTree.attachEvent("onDragIn", function(sId, tId, sObject, tObject){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDrop DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onDrop

fires when drag-and-drop has already been processed; besides, fires when the nodes are moved programmatically

void onDrop(string|number sId,string|number tId,string|number id,object sObject,object tObject){ ... };

Parameters

sId | string|number | id of the source item
tId | string|number | id of the target item
id | string|number | if the node is dropped as a sibling, id of the item to insert the source node before
sObject | object | dhtmlXTreeObject instance of the source tree
tObject | object | dhtmlXTreeObject instance of the target tree

Example

myTree.attachEvent("onDrop", function(sId, tId, id, sObject, tObject){
    // your code here
});

Details

"sId" value after inserting into the tree may be not equal to the initial id

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEdit DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onEdit

fires on 4 different stages of the editing process (see the details)

boolean onEdit(number state,string|number id,object tree,string value){ ... };

Parameters

state | number | 0 - before editing starts, 1 - after editing starts, 2 - before editor's closing, 3 - after editor's closing
id | string|number | id of the edited item
tree | object | dhtmlXTreeObject instance of the tree
value | string | value of the editor (for stages 0 and 2)

Returns

boolean true to allow editing/saving

Example

myTree.attachEvent("onEdit", function(state, id, tree, value){
    // your code here
});

Details

The event fires:

  • before editing starts (can be cancelled)
  • after editing ends
  • before editor's closing (can be cancelled)
  • after editor's closing
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEditCancel DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onEditCancel

event occurs after cancelling edit by Escape key or other means

void onEditCancel(string id,string value){ ... };

Parameters

id | string | id of item
value | string | item's text

Example

tree.attachEvent("onEditCancel", function(id, value){

})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onKeyPress DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onKeyPress

fires after each key press when tree is in focus

void onKeyPress(number key,object ev){ ... };

Parameters

key | number | the key code
ev | object | the native event object

Example

tree.attachEvent("onKeyPress", function(key, ev){
    alert(key);
})

Details

Fires only when enableKeyboardNavigation() was used

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseIn DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onMouseIn

fires when the mouse pointer is hovered over an item

void onMouseIn(string|number id){ ... };

Parameters

id string|number id of the node

Example

myTree.attachEvent("onMouseIn", function(id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseOut DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onMouseOut

fires when the mouse pointer is moved out of item's area

void onMouseOut(string|number id){ ... };

Parameters

id string|number id of the clicked node

Example

myTree.attachEvent("onMouseOut", function(id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onOpenDynamicEnd DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onOpenDynamicEnd

fires after the item defined in the openItemsDynamic() method opens

void onOpenDynamicEnd(){ ... };

Example

myTree.attachEvent("onOpenDynamicEnd", function(){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onOpenEnd DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onOpenEnd

fires right after an item in the tree has become open

void onOpenEnd(string|number id,number state){ ... };

Parameters

id | string|number | the id of the node that will be opened
state | number | the current open state of the item

Example

myTree.attachEvent("onOpenEnd", function(id, state){
    // your code here
});

Details

The event is also called for "non-closable" nodes and for nodes without the open/close functionality. In that case the function's result will be ignored.

The "state" parameter's values:

  • 0 - item has no child nodes
  • -1 - item is closed
  • 1 - item is opened
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onOpenStart DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onOpenStart

fires right when an item in the tree starts to open, but before this item has opened

boolean onOpenStart(string|number id,number state){ ... };

Parameters

id | string|number | the id of the node that will be opened
state | number | the current open state of the item

Returns

boolean true - confirms opening

Example

myTree.attachEvent("onOpenStart", function(id, state){
    // your code here
});

Details

The event is also available for "non-closable" nodes and for the nodes without the open/close functionality. In that case the function's result will be ignored.

The "state" parameter's values:

  • 0 - item has no child nodes
  • -1 - item is closed
  • 1 - item is opened
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRightClick DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onRightClick

fires when the user clicks the right mouse button

void onRightClick(string|number id,Event object){ ... };

Parameters

id | string|number | the id of the clicked item
object | Event | the event object

Example

myTree.attachEvent("onRightClick", function(id, ev){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelect DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onSelect

fires when selection in the tree was changed

void onSelect(string|number id){ ... };

Parameters

id string|number the id of the selected item (list of selected items' ids in case of multiselection)

Example

myTree.attachEvent("onSelect", function(id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onAllOpenDynamic
  • onBeforeCheck
  • onBeforeContextMenu
  • onBeforeDrag
  • onCheck
  • onClick
  • onDblClick
  • onDrag
  • onDragIn
  • onDrop
  • onEdit
  • onEditCancel
  • onKeyPress
  • onMouseIn
  • onMouseOut
  • onOpenDynamicEnd
  • onOpenEnd
  • onOpenStart
  • onRightClick
  • onSelect
  • onXLE
  • onXLS
Start Tree dhtmlXTree API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing Tree DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
    • Setting Image Path
    • Object-Based Initialization
    • Initialization from HTML
    • Data Loading
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
  • Handling Events
Start Tree

Initializing Tree

dhtmlxTree can be initialized on page using one of the following initialization schemes:

  • Object-based initialization;
  • Initialization from HTML.

Complete the following steps for any type of dhtmlxTree's initialization:

  • Download the dhtmlxTree package from the server and place it in a folder;
  • Create an HTML file;
  • Place the full paths to dhtmlxTree's CSS and JS files into the header of the created HTML file.

In order to use dhtmlxTree as a separate component, you need to include its source files on the page. There are two of them:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxtree.css">
    <script src="codebase/dhtmlxtree.js"></script>
</head>

If you use dhtmlxTree as a part of "dhtmlxSuite" package, you need to have 2 files included:

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

dhtmlxtree.js/.css files are part of dhtmlx.js/.css, so there is no need to include them separately.

Setting Image Path

Full path to tree's images can be set in dhtmlxTree with the help of the method setImagePath():

tree.setImagesPath("[full path to this category]/codebase/imgs/");

The above mentioned method should be used after creation of new dhtmlXTreeObject, but before any of data loading methods.

The following predefined icon sets are available in Tree:

Related sample: Changing iconsets

Object-Based Initialization

The user needs to create an HTML container where dhtmlxTree will be placed later. In this example the container is a <div> element placed in the <body> tag:

<div id="treeBox" style="width:200;height:200"></div>

The next step is the creation of a new dhtmlXTreeObject and placing it after the <div> element (container) that we've just created:

var tree = new dhtmlXTreeObject("treeBox","100%","100%",0);

The parameters passed to the constructor are the following:

  • Object to attach the tree to (should be loaded before the constructor is called);
  • Width of the tree;
  • Height of the tree;
  • Identifier of the tree root level (super root).

Related sample: Object constructor

Initialization from HTML

In case of HTML initialization, drag-n-drop functionality doesn't work in Tree.

This type of initialization includes two sub-types:

  • Initialization from an HTML list;
  • Initialization from inline XML.

The user can create a tree based either on an HTML list or an inline XML. In both cases the list or XML should be placed into the DIV element that will act as a container for the tree. XML should also be included into XMP tag. It should be noted that any tree methods starting with "set" or "enable" can be used as attributes of this DIV element to set/enable different tree properties.

Conversion

The following two types of conversion (of HTML data into the tree) are available:

  • Automatic conversion - implies setting dhtmlxTree class for the top div element;
  • Script conversion - calling dhtmlXTreeFromHTML() command with id of the div element to convert as the first argument.

Initialization from an HTML list

This type of initialization presupposes the following actions on user's part:

  • Choose the type of conversion to use;
  • Set some attributes defining tree-specific properties of the top div element:
    • setImagePath - sets the path to tree's image files;
    • id - name of a JS variable that refers to the tree object;
  • Use simple HTML list tags.
<div class="dhtmlxTree" // for automatic conversion
    id="treeboxbox_tree"
    setImagePath="[full path to this category]/imgs/"
    style="width:250px; height:218px;overflow:auto;">
    <ul>
        <li>Root
            <ul>
                <li>Child1
                    <ul>
                        <li>Child 1-1</li>
                    </ul>
                <li>Child2</li>
                <li><b>Bold</b> <i>Italic</i></li>
            </ul>
        </li>
    </ul>
</div>
<script>
    var myTree = dhtmlXTreeFromHTML("treeboxbox_tree"); // for script conversion
</script>

Related sample: Initialize from HTML

Initialization from Inline XML

Initialization of this kind allows the user to apply standard dhtmlxTree's XML structure enclosed into XMP tag inside the div element (the tree container). The sequence of actions is as follows:

  • Choose the type of conversion to use;
  • Set some attributes defining tree-specific properties of the top div element:
    • setImagePath - sets path to tree's image files;
    • id - name of JS variable which refers to tree object;
  • Apply XML structure in <xmp> tag.
<div id="treeboxbox_tree"
    setImagePath="[full path to this category]/imgs/"
    class="dhtmlxTree"> // for automatic conversion
<xmp>
    <item text="Root" open="1" id="11">
        <item text="Child1" select="1" open="1" id="12">
            <item text="Child1-1" id="13"/>
        </item>
        <item text="Child2" id="14"/>
        <item id="15" text="Text"/>
    </item>
</xmp>
</div>

Related sample: Initialization from xml

Data Loading

The next step of initializing dhtmlxTree component is Data Loading. The user can choose one of the following data loading possibilities:

  • XML;
  • JSON;
  • CSV;
  • JS array.

Data Loading from XML

To load menu data from XML file use the load method as in:

myTree.load(xmlFile,afterCall,"xml"); // loading from a file

The passed parameters are the following:

  • url - (string) url to the XML file
  • call - (function) after loading callback function, optional, can be omitted
  • type - (string) type of data

Related sample: Initialization from xml

To load menu data from an XML string, use the method parse as follows:

myTree.parse(xmlString,"xml"); // loading from an XML string

The method takes the following parameters:

  • data - (string|object) the data to load
  • type - (string) data type

Related sample: Loading from xml string

To enable dynamic loading from XML make use of the setXMLAutoLoading method.

The getXMLState method should be used to get the current state of XML loading:

var xmlState = tree.getXMLState(); // returns true if XML is being loaded at the moment

You can see XML Syntax Template here.

Related sample: Autoloading from XML

Data Loading from JSON

To load a tree from JSON, the user needs to have a JSON object or a JSON file and load it using the following methods:

  • load - to load data from a file

    • myTree.load(jsonFile,afterCall,"json");

    The passed parameters are the following:
    • url - (string) url to the JSON file
    • call - (function) after loading callback function, optional, can be omitted
    • type - (string) type of data, XML by default

  • parse - to load data from a JSON object

    • myTree.parse(jsonObject,"json");

    The method takes the following parameters:
    • data - (string|object) the data to load
    • type - (string) data type

You can see JSON Format Template here.

Related sample: Autoloading from JSON

Data Loading from CSV

This type of loading tree data implies that the user has CSV data represented in a string or a file. There are two methods that can be used in this case:

  • load - to load data from a file

    • myTree.load(csvFile,afterCall,"csv");

    The passed parameters are the following:
    • url - (string) url to the CSV file
    • call - (function) after loading callback function, optional, can be omitted
    • type - (string) type of data, XML by default

  • parse - to load data from a CSV string

    • myTree.parse(csvString,"csv");

    The method takes the following parameters:
    • data - (string|object) the data to load
    • type - (string) data type

You can see CSV Format Template here.

Related sample: Loading from CSV

Data Loading from JS Array

The tree can be loaded from a JS Array. The array presented as an object or as a file should be specified in the following methods:

  • load - to load data from a file

    • myTree.load(jsarrayFile, afterCall,"jsarray");

    The passed parameters are the following:
    • url - (string) url to the JSArray file
    • call - (function) after loading callback function, optional, can be omitted
    • type - (string) type of data, XML by default

  • parse - to load data from a JSArray

    • myTree.parse(JSArray, "jsarray");

    The method takes the following parameters:
    • data - (string|object) the data to load
    • type - (string) data type

You can see JS Array Format Template here.

Related sample: Loading from JSArray

Data Transfer Mode

The user can set default data transfer mode in the following way:

tree.setDataMode(mode);

The following mode variants are available:

  • JSON - sets JSON data transfer mode;
  • XML - sets XML data transfer mode;
  • CSV - sets CSV data transfer mode.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Syntax Templates DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
  • Syntax Templates
    • XML Format Template
    • JSON Format Template
    • CSV Format Template
    • JS Array Format Template
    • Cold Fusion Tag for dhtmlXTree
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
  • Handling Events
Start Tree

Syntax Templates

XML Format Template

XML syntax template is the following:

<?xml version='1.0' encoding='iso-8859-1'?>
 <tree id="0">
  <item text="My Computer"
        id="1"
        child="1"
        im0="my_cmp.gif"
        im1="my_cmp.gif"
        im2="my_cmp.gif"
        call="true"
        select="yes">
      <userdata name="system">true</userdata>
      <item text="Floppy (A:)"
            id="11"
            child="0"
            im0="flop.gif"
            im1="flop.gif"
            im2="flop.gif"/>
      <item text="Local Disk (C:)"
            id="12"
            child="0"
            im0="drv.gif"
            im1="drv.gif"
            im2="drv.gif"/>
  </item>
  <item text="Recycle Bin"
        id="4"
        child="0"
        im0="recyc.gif"
        im1="recyc.gif"
        im2="recyc.gif"/>
</tree>

The used tags are the following:

  • <tree> tag is mandatory. It specifies the parent of the loading block of data. According to this, id parameter in the tag specifies the ID of that parent. To load root level the user needs to specify the ID used for creation of the tree object: new myObjTree(boxObject,width,height,0);
  • <item> tag can contain sub-items (in order to load more than one level at once) or not. It also can contain <<itemtext> tag that can be used to add some HTML to item label (attribute text should be skipped then):
<item id="123">
    <itemtext><![CDATA[<font color="red">Label</font>]]></itemtext>
</item>

Attributes of <item> tag are the following:

Mandatory attributes:

  • text - label of the node;
  • id - id of the node.

Optional attributes:

  • tooltip - tooltip of the node;
  • im0 - image for a node without child items (tree will get images from the path specified in setImagePath() method);
  • im1 - image for an expanded node with child items;
  • im2 - image for a collapsed node with child items;
  • aCol - colour of an item that is not selected;
  • sCol - colour of a selected item;
  • select - select a node on load (any value);
  • style - text style of a node;
  • open - show a node opened (any value);
  • call - call function on select(any value);
  • checked - check checkbox if exists (in case of three-state checkboxes the values can be: 1 - checked or -1 - unsure);
  • nocheckbox - instruct the component not to render checkbox for the related item, optional
  • child - specifies whether a node has child items (1) or not (0);
  • imheight - height of the icon;
  • imwidth - width of the icon;
  • topoffset - offset of the item from the node above;
  • radio - if not empty, child items of this node will have radio buttons.

To set userdata directly within XML the user should apply <tree> tag that has only one attribute - name, and value to specify the userdata value.

In PHP script the following code should be used for the page header:

<?php
    header("Content-type: text/xml");
    echo('<?xml version="1.0" encoding="iso-8859-1" ?>');

XML Format with Links Specified

XML format template for the tree containing links:

<tree..>
    <item ...>
        <userdata name="myurl">http://www.google.com</userdata>
        <item ...>
            <userdata name="myurl">http://groups.google.com</userdata>
        </item>

    </item>

Related sample: Initialization from xml

JSON Format Template

The structure of JSON template is the same as the one of XML where tags are transformed to objects and attributes to properties.

The used properties are the following:

  • id - (mandatory) specifies the ID of the parent. To load root level the user needs to specify the ID used for creation of the tree object: new myObjTree(boxObject,width,height,0);

  • item - (array of objects) specifies an item of the tree.

    Objects of the item property have the following properties:

Mandatory attributes:

  • text - label of the node;
  • id - id of the node.

Optional attributes:

  • tooltip - tooltip of the node;
  • im0 - image for a node without child items (tree will get images from the path specified in setImagePath() method);
  • im1 - image for an expanded node with child items;
  • im2 - image for a collapsed node with child items;
  • aCol - colour of an item that is not selected;
  • sCol - colour of a selected item;
  • select - select a node on load (any value);
  • style - text style of a node;
  • open - show a node opened (any value);
  • call - call function on select(any value);
  • checked - check checkbox if exists (in case of three-state checkboxes values can be: 1 - checked or -1 - unsure);
  • nocheckbox - instruct the component not to render checkbox for the related item, optional
  • child - specifies whether a node has child items (1) or not (0);
  • imheight - height of the icon;
  • imwidth - width of the icon;
  • topoffset - offset of the item from the node above;
  • radio - if not empty, child items of this node will have radio buttons;
  • userdata - (array of objects) userdata related to the item
    • name - the userdata name
    • content - the userdata value
{id:0,
    item:[
        {id:1,text:"first"},
        {id:2, text:"middle",child:"1",im0:"book.gif",
            item:[
                {id:"21", text:"child"}
            ]},
        {id:3,text:"last"}
    ]
}

Related sample: Smart JSON parsing

CSV Format Template

A tree item is represented by three values: id, parent_id, text.

For example:

1,0,node 1
2,1,node 1.1
3,2,node 1.1.1
4,0,node 2

Related sample: Loading from CSV

JS Array Format Template

Tree item is represented by three values presented as sub-arrays of the top array: id, parent_id, text.

For example:

var treeArray = new Array(
["1","0","node 1"],
["2","1","node 1.1"],
["3","2","node 1.1.1"],
["4","0","node 2"]
)

Related sample: Loading from JSArray

Cold Fusion Tag for dhtmlXTree

This section is devoted to a ready-made ColdFusion solution for Tree which, as it is believed by some users, simplifies the usage of dhtmlxTree. For example:

<cf_dhtmlXTree
    name="tree"
    width="250"
    height="250"
    JSPath="../" CSSPath="../"
    iconspath="gfx/"
    xmldoc="tree.xml"
    checkboxes="false"
    dragndrop="true"
    style="background-color:whitesmoke;border:1px solid blue;"
    onSelect="onNodeSelect"
    onDrop="onDropNode">
        ...configuration xml...
</cf_dhtmlXTree>

The parameters that should be indicated are as follows:

  • name - [optional] name of the tree JS object to use in JavaScript; if omitted, then a name will be generated automatically;
  • width - [optional] width of the tree (it sets the width of the tree box, leaving the width of the tree itself equal to 100%);
  • height - [optional] height of the tree;
  • JSPath - [optional] absolute or relative path to the directory containing the tree's JS files; "js" directory by default;
  • CSSPath - [optional] absolute or relative path to the directory containing the tree's CSS files; "css" directory by default;
  • iconspath - [optional] absolute or relative path to the directory containing the tree's icon files; "img" directory by default;
  • xmldoc - [mandatory for XML loading] URL of the XML file used to load the levels dynamically;
  • checkboxes - [optional] show checkboxes (none, twoState, threeState);
  • dragndrop - [optional] activate the drag-and-drop functionality (true,false);
  • style - [optional] style for the tree box;
  • onSelect - [optional] JavaScript function to be called on a node's selection;
  • oncheck - [optional] JavaScript function to be called on a node's (un)checking;
  • onDrop - [optional] JavaScript function to be called on a node's drop;
  • im1 - [optional] default image used for child nodes;
  • im2 - [optional] default image used for expanded branches;
  • im3 - [optional] default image used for collapsed branches.

Please, refer to Data Loading from XML section.

The minimal possible tag syntax with on-page XML is the following:

<cf_dhtmlXTree>
    <item text="Top node" id="t1" >
        <item text="Child node 1" id="c1" ></item>
        <item text="Child node 2" id="c2" ></item>
    </item>
/cf_dhtmlXTree>

The minimal possible tag syntax with server-side XML is as follows:

<cf_dhtmlXTree xmldoc="tree.xml">
</cf_dhtmlXTree>

Here is an example of ColdFusion tag for the tree with images specified:

<cf_dhtmlXTree
    im1="book.gif"
    im2="books_open.gif"
    im3="books_close.gif">
    <item text="Mystery " id="mystery" open="yes" >
        <item text="Lawrence Block" id="lb" >
            <item text="All the Flowers Are Dying" id="lb_1" />
            <item text="The Burglar on the Prowl" id="lb_2" />
            <item text="The Plot Thickens" id="lb_3" />
            <item text="Grifters Game" id="lb_4" />
            <item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
        </item>
        <item text="Robert Crais" id="rc" >
            <item text="The Forgotten Man" id="rc_1" />
            <item text="Stalking the Angel" id="rc_2" />
            <item text="Free Fall" id="rc_3" />
            <item text="Sunset Express" id="rc_4" />
            <item text="Hostage" id="rc_5" />
        </item>
        <item text="Ian Rankin" id="ir" ></item>
        <item text="James Patterson" id="jp" ></item>
        <item text="Nancy Atherton" id="na" ></item>
    </item>
</cf_dhtmlXTree>

The following code snippet shows the creation of the tree with Events Handlers, Checkboxes and Drag-n-drop functionality:

<cf_dhtmlXTree
    dragndrop="true"
    checkboxes="twoState"
    onSelect="onClick"
    onCheck="onCheck"
    onDrop="onDrag">
        <item text="Mystery " id="mystery" open="yes" >
            <item text="Lawrence Block" id="lb" >
                <item text="All the Flowers Are Dying" id="lb_1" />
                <item text="The Burglar on the Prowl" id="lb_2" />
                <item text="The Plot Thickens" id="lb_3" />
                <item text="Grifters Game" id="lb_4" />
                <item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
            </item>
            <item text="Robert Crais" id="rc" >
                <item text="The Forgotten Man" id="rc_1" />
                <item text="Stalking the Angel" id="rc_2" />
                <item text="Free Fall" id="rc_3" />
                <item text="Sunset Express" id="rc_4" />
                <item text="Hostage" id="rc_5" />
            </item>
            <item text="Ian Rankin" id="ir" ></item>
            <item text="James Patterson" id="jp" ><item>
            <item text="Nancy Atherton" id="na" ></item>
        </item>
</cf_dhtmlXTree>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Setting Tree Appearance DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
    • Tree Lines and Icons Manipulation
    • Tree Images Manipulation
    • Text Manipulation
    • Style Manipulation
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
  • Handling Events
Start Tree

Setting Tree Appearance

Tree Lines and Icons Manipulation

Enabling/Disabling Tree Lines

Tree lines are tiny lines that visually "connect" elements of the tree. These lines can be easily enabled/disabled from script:

tree.enableTreeLines(true/false); // true by default

Setting +/- Icons

"+" and "-" icons indicate whether a parent node is closed or opened. The setImageArrays() method is used to set these images:

tree.setImageArrays(arrayName,image1,image2,image3,image4,image5);

The parameters for this method are as follows:

  • arrayName - name of an array: plus, minus;
  • image1 - crossed lines image (+);
  • image2 - image with top line (г);
  • image3 - image with bottom line (L);
  • image4 - image without lines ( );
  • image5 - single root image (-).

Showing/Hiding +/- Icons

There is a simple way of showing/hiding +/- signs of a certain item:

tree.showItemSign(itemId,mode);

The following parameters should be indicated:

  • itemId - id of the item the +/- icon of which will be shown/hidden;
  • mode(true/false) - true stands for showing the icon, false means hiding it.

This method works only for individual items not for the entire tree.

Related sample: Item's sign and highlighting

Specifying Icons for Locked Items

If the user wants to specify the icons for the locked state of tree items, they should be indicated before any of the data loading methods:

...
tree.setLockedIcons("lock.gif","lock.gif","lock.gif");
tree.load("tree.xml")

The parameters of setLockedIcons method indicate paths to the icons that will be used for locked nodes:

  • m0 - icon for a locked leaf;
  • im1 - icon for a closed branch;
  • im2 - icon for an opened branch.

Tree Images Manipulation

Setting Images for Items

It should be noted that the tree will get images for its nodes from the path the user specified in the setImagePath() method.

But there are also other ways available for setting custom images of nodes in the tree. The difference between these two methods lies in the way the user adds item to the tree:

JavaScript way: using arguments of the insertNewChild() or insertNewNext() methods:

var im0 = "doc.gif"; // the icon for a leaf node
var im1 = "opened.gif"; // the icon for an expanded parent node
var im2 = "closed.gif"; // the icon for a collapsed parent node

tree.insertNewItem(0,1,"New Node 1",0,im0,im1,im2);
tree.insertNewNext(1,2,"New Node 2",0,"txt.gif","opened.gif","closed.gif");

JavaScript way: using the setItemImage() and setItemImage2() methods:

The first method for setting an image for an item should be written in this way:

tree.setItemImage(itemId,image1,image2);

The parameters are as follows:

  • itemId - id of the item in question;
  • image1 - image for the leaf item or image for the collapsed parent item (if the third parameter is indicated);
  • image2 - image for the expanded parent item.

The second method for setting an image is the following:

tree.setItemImage2(itemId,image1,image2, image3);

The parameters are as follows:

  • itemId - id of the item in question;
  • image1 - image for a leaf item;
  • image2 - image for a collapsed parent item;
  • image3 - image for an expanded parent item.

XML way: using parameters of the <item> tag:

<?xml version='1.0' encoding='iso-8859-1'>
 <tree id="0">
  <item text="My Computer" id="1" child="1" im0="doc.gif" im1="my_open.gif"
        im2="my_closed.gif">
 </tree>

See XML Format Template.

Getting Item's Image

Item's image can be got with the help of getItemImage() method:

var image = tree.getItemImage(itemId,imageInd,fullPath);

In order to get items image, the user should indicate:

  • itemId - id of the item the image of which should be got;
  • imageInd - index of the image (0 - leaf image, 1 - closed parent node image, 2 - open parent node image);
  • fullPath (true/false) - indicates whether the method returns full path to the image (true), or just the name of the image file (false).

Enabling Tree Images

Images are enabled in dhtmlxTree by default. To disable images the user should call the following method:

tree.enableTreeImages(false); // true to enable

Setting Default Item's Images

There is a simple way of setting default item's images in Tree:

tree.setStdImages(image1,image2,image3);

This method should be called before XML loading takes place. It is useful when a lot of similar images are going to be used in the tree. It is better to use this method once rather than specify these images every time for every item.

The parameters that the user should specify are the following:

  • image1 - image for a leaf node;
  • image2 - image for a closed parent node;
  • image3 - image for an opened parent node.

Changing Icon Sets

dhtmlxTree is a highly customizable component. You can use different icon sets for trees simply by changing the image path:

tree.setImagePath("[full path to this folder]/codebase/images/"); //default icons set
    //or
tree.setImagePath("[full path to this folder]/codebase/images/dhxtree_web/");
    // or
tree.setImagePath("[full path to this folder]/codebase/images/dhxtree_terrace/");

Setting Icon's Size

Setting icon's size is quite simple with the setIconSize() method. The default size of tree icons is 18x18 px.

tree.setIconSize(newWidth,newHeight,itemId);

The parameters the user should specify are:

  • newWidth - new width of the icon;
  • newHeight- new height of the icon;
  • itemId - the item that the new sizes will be applied to (optional parameter).

If the last parameter is not indicated, new sizes will be applied to all icons in the tree.

Related sample: Icon size

Making Images Clickable

There is a simple method used to make all images in the tree clickable:

tree.enableActiveImages(true/false); // enabled by default

Enabling Image Dragging

There is a method that is responsible for allowing the user to drag items not only by text, but also by their images. This functionality is enabled by default.

tree.enableImageDrag(true/false);

Enabling IE Images Fixing

There is a special method to change the way of images rendering in IE. It also helps to solve the problem of images caching in IE:

tree.enableIEImageFix(true|false); // disabled by default

Text Manipulation

Setting text Direction

dhtmlxTree supports both LTR and RTL text directions. LTR is set by default in the tree. The user can set the text direction to RTL like this:

tree.enableRTL(true); // false to disable

To set text direction to LTR again, use false in the above mentioned method.

Related sample: Text direction (LTR/RTL)

Enabling Multiline

Tree nodes' labels can contain only one text line by default. However, in some situations it can be useful to make them multiline. There is a special method for this in dhtmlxTree. It is recommended to turn tree lines off for better appearance:

tree.enableTreeLines(false);
tree.enableMultiLineItems(true/false/width);

This method should be called before loading tree data takes place. The parameter of this method can be one of these options:

  • true - the multiline is enabled;
  • false - the multiline is disabled;
  • width - the multiline is enabled and set in pixels (for example, "50px").

Related sample: Multi-line items

Setting Text Signs

There is the possibility to enable/disable text signs [+] and [-] instead of corresponding icons. This can be done in the following way:

tree.enableTextSigns(mode);

Setting this method to true equals enabling text signs for the tree, while false means disabling them.

Making Plain Text Tree

There is also a possibility to create a plain one-level tree. The steps the user should take for this are quite simple:

  • Add the following style in the HTML file where the tree will be created:

    treeboxbox_tree.standartTreeImage img{
    width:0px;
}

  • Create a div element on a page and write the following script lines:

<div id="treeboxbox_tree" style="width:200;height:200"></div>
<script>
    tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
    tree.setImagePath("[full path to this folder]/imgs/");
    tree.enableTreeImages("false"); // disable tree images
    tree.enableTreeLines("false"); // disable tree lines
    tree.load(file);
</script>

Enabling Loading Text

The user can set loading text for a tree item. This text will appear on item loading instead of its original text, and will be replaced by the original text when loading is done:

tree.enableLoadingItem(text);

The default loading text set in dhtmlxTree is "Loading...".

Using HTML in Item's Text

The user may use HTML escape characters in the text attribute of an item tag to include some HTML into a node's label, or he can use the nested <itemtext> tag with CDATA for the same purpose (this tag is supported only in PRO edition):

<?xml version="1.0">
 <tree id="0">
  <item id="1" text="&amp;lt; img src='some.gif' &amp;gt;"/> //using HTML escape characters
 </tree>
 <tree id="0">
 <item id="1">
  <itemtext><![CDATA <img src='some.gif'> ]]></itemtext> //using <itemtext> tag with CDATA
 </item>
</tree>

Related sample: Using HTML in item lable

Style Manipulation

Setting Individual Style for an Item

The user can set individual style for any item in the tree in the following way:

tree.setItemStyle(itemId,style_string);

The parameters here are responsible for:

  • itemId - id of the item;
  • style_string - valid CSS string.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Navigation and Selection in Tree DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
    • Navigation Manipulation
    • Selection Manipulation
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
  • Handling Events
Start Tree

Navigation and Selection in Tree

Navigation Manipulation

Enabling Keyboard Navigation

There is a possibility to enable keyboard navigation in dhtmlxTree. Using keyboard navigation the user can select any item in the tree and use the following keys:

  • Up arrow - selects the item above the currently selected one;
  • Down arrow - selects the item below the currently selected one;
  • Right arrow - opens the item;
  • Left arrow - closes the item;
  • Enter - calls the item's action;
  • F2 - edits the selected item;
  • Esc - closes the editor.

Keyboard navigation in the tree can be enabled/disabled in the following way:

tree.enableKeyboardNavigation(true/false);

This method should be called before any of the data loading methods.

Assigning Navigation Keys

The user can also set new navigation keys using the assignKeys() method:

// should be called when keyboard navigation is already switched on
tree.assignKeys([["up",104],["down",98],["open",102],["close",100],["call",101]]);

The first parameter is the name of the action, the second one indicates the key code.

Selection Manipulation

Focusing Item

The method below allows scrolling to the indicated item from script:

tree.focusItem(itemId);

In this case the item is not selected/highlighted.

Related sample: Navigation and Edit with keyboard

Selecting Item

To select an item from script the user should call the following command:

tree.selectItem(itemId,mode,preserve);

The parameters of the method are as follows:

  • itemId - item id;
  • mode(true/false) - if set to true, script function for the selected item will be called;
  • preserve(true/false) - preserve earlier selected items, set to false by default.

Clearing Selection

The clearSelection() method removes the selection of the specified item in the tree:

tree.clearSelection(itemId);

Enabling Multiselection

Multiselection in the tree allows the user to select multiple items using Ctrl+click. Drag-and-drop is also supported in multiselection mode as well as the Cut and Paste functionality.

tree.enableMultiselection(mode, strict);

The parameters are as follows:

  • mode(true/false) - this parameter is responsible for enabling/disabling multiselection;
  • strict(true/false) - the strict mode is on/off; the strict mode presupposes that only items of the same level can be objects of multiselection.

Enable Item Highlighting

There is a possibility to switch on an item's highlighting feature. When this feature is on, an item's label will be highlighted when the mouse pointer is over it. This feature is operated like this:

tree.enableHighlighting(true/false); // is switched off by default

When this method is set to false, the highlighting is switched off, while setting the method to true switches this feature on.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Searching and Sorting in Tree DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
    • Searching in Tree
    • Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
  • Handling Events
Start Tree

Searching and Sorting in Tree

Searching in Tree

Enabling Auto Search

First of all, the meaning of auto search should be explained. When auto search is switched on, the user can just select any item in the tree and start typing.

The search starts from the currently selected item. The Tree item the name of which meets the search conditions best of all will be selected.

To restart the search click the Backspace button.

Auto search can be enabled only after enabling the keyboard navigation:

tree.enableKeyboardNavigation(true);
tree.enableKeySearch(true); // false to disable

This method should be called before any of the data loading methods.

Searching Tree

The search in Tree can be implemented from script with the help of the findItem() and findItemIdByLabel() methods. The methods differ in one thing: whether the searched item will be selected and focused when found or not:

// the item will be selected and focused when found
tree.findItem(searchStr, direction, top);
//or
//the item will not be selected and focused when found
tree.findItemIdByLabel(searchStr, direction, top);

The parameters of both these methods are:

  • searchStr - the search query;
  • direction(false/true) - direction of the search, from the top to the bottom (false), and vice versa (true);
  • top(true/false) - start searching from the top (true) or start searching from the currently selected item (false).

Related sample: Search

Sorting in Tree

Sorting Tree

dhtmlxTree allows its users to sort the tree in either ASC or DES orders:

tree.sortTree(itemId, oder, all_levels);

The user should indicate the following parameters:

  • itemId - id of the node sorting starts from;
  • oder(ASC/DES) - sorting order;
  • all_levels(true/false) - sorting the tree by all levels (true), or by the current level.

Related sample: Smart XML parsing and Sorting

Custom Defined Sorting

The user can set a custom sort function. The function should have two parameters: id_of_item1, id_of_item2. For example:

//define the comparator (in our case it compares the second words in labels)
function mySortFunc(idA,idB){
    a=(tree.getItemText(idA)).split(" ")[1]||"";
    b=(tree.getItemText(idB)).split(" ")[1]||"";
    return ((a&amp;gt;b)?1:-1);
}

Then the setCustomSortFunction() method should be called. It takes the name of the function as the incoming parameter:

//attach the comparator to the tree
tree.setCustomSortFunction(mySortFunc);

It should be noted that if a custom comparator is specified, the sortTree() method will use it for sorting.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Serializing and Caching Tree DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
    • Serializing Tree
    • Setting Serialization Level
    • Preventing Caching in IE
    • Registering XML Entity
    • Removing Tree
  • Loading Big Datasets
  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
  • Handling Events
Start Tree

Serializing and Caching Tree

Serializing Tree

The user can get an XML representation (as a string) of the tree using the method serializeTree():

tree.serializeTree();

Also there is a possibility to return the tree as a JSON string like this:

tree.serializeTreeToJSON();

Related sample: User data

Setting Serialization Level

XML serialization can be easily configured in the following way:

tree.setSerializationLevel(userData,fullXML,escapeEntities,userDataAsCData,DTD);

The parameters are as follows:

  • userData - enable/disable user data serialization;
  • fullXML - enable/disable full XML serialization;
  • escapeEntities - convert tag brackets into related HTML entities;
  • userDataAsCData - output user data in CDATA sections;
  • DTD - if specified set as XML's DTD.

Preventing Caching in IE

The user can prevent caching in IE by adding random value to URL string with the help of the preventIECaching() method:

tree.preventIECaching(true/false); // false by default

Registering XML Entity

There is a possibility in dhtmlxTree to register an XML entity for replacement of special symbols during the initialization of the tree (the default ones are: ampersand, "less then" and "greater then" symbols):

tree.registerXMLEntity(rChar,rEntity);

The parameters are the following:

  • rChar - source char;
  • rEntity - target entity.

Removing Tree

There is a simple method that allows the user to remove the tree completely and to clear memory:

tree.destructor();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading Big Datasets DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
    • Dynamic Loading
    • Smart XML Parsing
    • Distributed Parsing
  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
  • Handling Events
Start Tree

Loading Big Datasets

The following ways of increasing performance when working with huge data sets are introduced in dhtmlxTree:

  • Dynamic Loading;
  • Smart XML Parsing;
  • Distributed Parsing.

Dynamic Loading

In case Tree contains large amount of nodes (or the user doesn't want to waste time on loading hidden nodes), it would be better to load them on request, not all at once.

The functionality to load tree's levels dynamically using XML was introduced for this purpose. Dynamic loading of items from XML stream gives the possibility to create DHTML trees with unlimited number of nodes.

Activating Dynamic Loading

Firstly, the user should indicate in XML the nodes that will be loaded dynamically in this way: add the parameter child="1" to all nodes that have child items. The items containing this parameter will be the objects for dynamic loading.

<?xml version="1.0" encoding="iso-8859-1" ?>
    <tree id="0">
        <item  text="Surveillance" id="a1" im0="book.gif" … child="1"/>
        <item …/>
        …
    </tree>

The setXMLAutoLoading method switches the dynamic loading on in the tree:

tree.setXMLAutoLoading(url);
tree.load(file); // load the first level of the tree

The above mentioned snippet is useful in case of a tree with large amount of data.

The system will firstly load the data indicated by the load() method.

The script specified in the setXMLAutoLoading() method will be called when the user clicks the tree to expand any of the parent nodes (the child nodes of which have not been loaded). The script will get the id of the node to open, and return an XML with the description of child items.

When dynamic loading is switched on in the tree, script methods work only for those items that are loaded at the moment.

Related sample: Autoloading from XML

Setting Auto Loading Behavior

This functionality is available in the PRO version only.

The setXMLAutoLoadingBehaviour method is responsible for specifying the way according to which the server-side URL is constructed during dynamic loading calls:

tree.setXMLAutoLoadingBehaviour(mode);

The following mode options are available here:

  • id - (default) some_script?id=[item_id]
  • function - used for calling a user-defined handler that should be set as a parameter of the setXMLAutoLoading() method (see example below)
  • name - some_script[item_id]
  • xmlname - some_script[item_id].xml

An example of using the function mode may look as follows:

tree.setXMLAutoLoadingBehavior("function");
tree.setXMLAutoLoading(function(id){
    tree.load("some.php?id="+id)
})

In this mode the setXMLAutoLoading() method receives a function that sends a request to the script to load the content of the clicked item by its id. The load() method called inside of this function returns an XML with the description of child items of the clicked item.

Related sample: Operations in a dynamic tree

Setting Escaping Mode

The setEscapingMode() method is responsible for setting the escaping mode (used for escaping id in requests). This method sets the mode for transferring the information of tree's item to the server:

tree.setEscapingMode(mode);

The following modes are available:

  • default - uses native escape functionality of the browser;
  • utf8 - is used for UTF escaping;
  • none - data is not escaped.

Smart XML Parsing

The idea of Smart XML Parsing is simple: the entire tree structure is loaded on the client side, but only the nodes that should be displayed are rendered. It helps to decrease the loading time and enhance the general performance of large trees greatly. Plus, the entire tree structure is available for most of the script methods (for example, searching is performed through all the nodes, not only through the rendered ones).

Activating Smart XML Parsing

To activate Smart XML Parsing the user should apply the following method:

tree.enableSmartXMLParsing(true); // false is used to disable

Please, pay attention to the fact that Smart XML Parsing does not work in case of loading a fully expanded tree.

Related sample: Smart XML parsing

Getting Parsing State

The parsing state can be got by means of the getItemParsingState() method which takes an item's id as the parameter:

var state = tree.getItemParsingState(itemId);

The method returns:

  • 1 - the item is already parsed;
  • 0 - the item is not parsed yet;
  • -1 - the item's parsing is in process.

Distributed Parsing

Another way of increasing the performance of the tree with some levels containing more than 100-200 nodes per level is introduced. This functionality is called Distributed Parsing.

The main advantage of this functionality lies in making a level visible and ready to use before it is completely parsed. Thus, items are loaded portion by portion with some timeouts.

Activating Distributed Parsing

To enable this functionality the user should make use of the following JS command:

tree.enableDistributedParsing(mode,count,delay);

Parameters of this method are:

  • mode - (true/false) enable/disable Distributed Parsing
  • count - number of nodes per portion (optional parameter);
  • delay - delay between portions parsing, set in milliseconds (optional parameter).

This functionaity is fully compatible with Smart XML Parsing.

Related sample: Distributed parsing

Getting Parsing State

The current state of Distributed Parsing can be easily got in the following way:

var state = tree.getDistributedParsingState(); // returns true/false

This method returns either true (meaning that parsing is still in progress) or false (meaning that parsing is already finished).

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Manipulating Nodes DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
  • Manipulating Nodes
    • Adding/Removing Items
    • Collapsing/Expanding Items
    • Editing Items
    • Integration with Cookies
    • Item's Text, Tooltip, Color Manipulation
    • Refreshing and Updating Items
    • Items' Ids Manipulation
    • Items Position Manipulation
    • Calculating Items
    • User Data Manipulation
    • Using Link-Like Functionality in Tree
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
  • Handling Events
Start Tree

Manipulating Nodes

Adding/Removing Items

Adding Parent Item

Parent tree nodes can be easily added to the tree from script with the help of the insertNewNext() method. The following incoming parameters should be indicated in this method:

  • siblingId - id of the item after which a new one will be created;
  • itemId - id of the new item;
  • label - text of the new item;
  • action - 0 in most cases, but it can be a custom function;
  • imageClosed - image for a collapsed item; if 0 is indicated - the default one is used;
  • imageOpen - image for an expanded item; if 0 is indicated - the default one is used;
  • imageLeaf - image for a leaf item; if 0 is indicated - the default one is used;
  • additional options - a comma-delimited string of the following possible values (upper case only):
    • SELECT - move selection to this item after its creation;
    • CALL - call a function on select;
    • TOP - add this item to the top position;
    • CHILD - the node contains child items;
    • CHECKED - the checkbox is checked (if exists).
tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD,CHECKED");

Adding Child Node

The insertNewChild() method allows adding a new child item for the chosen tree node. The parameters the user should indicate are:

  • parentId - id of the parent item in which the new child will be created;
  • itemId - id of the new item;
  • label - text of the new item;
  • action - 0 in most cases, but it can be a custom function;
  • imageClosed - image for a collapsed item; if 0 is indicated - the default one is used;
  • imageOpen - image for an expanded item; if 0 is indicated - the default one is used;
  • imageLeaf - image for a leaf item; if 0 is indicated - the default one is used;
  • additional options - a comma-delimited string of the following possible values (upper case only):
    • SELECT - move selection to this item after its creation;
    • CALL - call a function on item's select;
    • TOP - add this item to the top position;
    • CHILD - the node contains child items;
    • CHECKED - the checkbox is checked (if exists).
tree.insertNewChild(0,1,"New Node 1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED");

The item added as a child is always created as the last one of child items for the specified parent.

Removing Item

Any item can be easily removed from the tree in the following way:

tree.deleteItem(itemId, selectParent);

The parameters the user should specify are:

  • itemId - id of the item in question;
  • selectParent(true/false) - if set to true, the parent item of the removed child item becomes selected when the removal is done, while false means that no items will be selected in the tree after removal of the indicated item.

Removing All Child Items

The following method allows the user to remove all child items of a certain node easily:

tree.deleteChildItems(itemId);

Related sample: Add / Delete items

Collapsing/Expanding Items

Expanding Parent Item on Child Adding

There is a possibility in dhtmlxTree to set whether a parent item will be expanded or not when a child item is added to it.

tree.openOnItemAdded(mode);

The method can be set either to true (the parent item will be expanded on child adding) or to false (the parent item won't be expanded).

Collapsing/Expanding Item

There is a possibility to expand/collapse any node in dhtmlxTree from script. The only value that the user should indicate is the id of the item in question:

tree.openItem(itemId); // expand the indicated item
tree.closeItem(itemId); // collapse the indicated item

Collapsing/Expanding All Items

The user can also expand/collapse all items in the tree. The mandatory parameter here is the id of the item starting from which all items will be expanded/collapsed:

tree.openAllItems(itemId); // expand all items
tree.closeAllItems(itemId); // collapse all items

One more method to expand all tree items that is similar to the above mentioned one but works in dynamic trees:

tree.openAllItemsDynamic(itemId); // expands all items in a dynamic tree

Expanding Item's List

The method to expand a list of tree items in a dynamic tree (items are expanded one by one, the next item will be opened only when the previous one is loaded):

tree.openItemsDynamic(list,flag);

The parameters are:

  • list - list of the ids of the nodes that will be expanded;
  • flag (true/false) - indicates whether the last node in the list will be selected (true) or not (false).

Prevent Item from Collapsing

There is a method that can prevent the item from collapsing:

tree.setItemCloseable(itemId,flag);

The parameters here are as follows:

  • itemId - id of the node;
  • flag(true/false) - if set to false, prevents the item from collapsing.

Getting Item's State

Item's state (expanded/collapsed) can be got in the following way:

var state = tree.getOpenState(itemId);

The method returns true if the item in question is expanded, and false if the item is collapsed.

Related sample: Collapse/Expand nodes

Locking Tree/Item

By locking the tree the user denies expanding/collapsing tree nodes. A tree isn't locked (false) by default. To lock the tree, the lockTree() method should be set to true:

tree.lockTree(true); // false to unlock the tree

Any item, whether it is a parent or a child one, can also be locked by the lockItem() method:

tree.lockItem(itemId); // id of the item as the input parameter

Getting Locked/Unlocked State

To get the state (locked/unlocked) of any item in the tree, the user should apply the following method:

var itemState = tree.isLocked(itemId); // returns current item's state

If the item in question is locked, the method returns true, if it is unlocked, false is returned.

Related sample: Lock tree

Editing Items

Making Items Editable

Any item in the tree can be made editable: double click on the item allows editing its title text. All items in the tree are not editable (false) by default. To make them editable the user should write the following code line:

tree.enableItemEditor(true); // false to deny items editing

Activating Editor for Item

The user can activate the editor for a specified item from script with the help of the editItem() method. The only parameter that should be specified is the id of the item:

tree.editItem(itemId);

Deactivating Editor for Item

Item's editor can be easily deactivated from script bringing the item back to its normal view:

tree.stopEdit();

Defining Editing Event

The event that starts an item's editing can be defined from script in the following way:

tree.setEditStartAction(click, dblclick);

The parameters define the following:

  • click(true/false) - item's editing will be activated by a click on the selected item;
  • dblclick(true/false) - item's editing will be activated by a double click on the selected item.

Related sample: Editable items

Integration with Cookies

Saving Items' States to Cookies

The user has the possibility to store the states of items to cookies in the following way:

tree.saveOpenStates(cookie_name,cookie_param);

The parameters of this method are:

  • cookie_name - name of the cookie (optional parameter);
  • cookie_param - additional parameters added to cookie.

Restoring Items' States from Cookies

There is a method that restores items' states (expanded/collapsed) from cookie's information:

tree.loadOpenStates(cookie_name); // the parameter is optional

Saving Selection to Cookies

Item's selection can also be stored in cookies in the following way:

tree.saveSelectedItem(cookie_name,cookie_param);

The parameters of this method are:

  • cookie_name - name of the cookie (optional parameter);
  • cookie_param - additional parameters added to cookie.

Restoring Selection from Cookies

Item's selection can be restored from cookie in the following way:

tree.restoreSelectedItem(cookie_name); // the parameter is optional

Saving Tree to Cookies

The saveState() method stores the whole tree to cookies:

tree.saveState(cookie_name,cookie_param);

The parameters of this method are:

  • cookie_name - name of the cookie (optional parameter);
  • cookie_param - additional parameters added to cookie

Restoring Tree from Cookies

The loadState() method restores the whole tree from cookies:

tree.loadState(cookie_name); // the parameter is optional

Enabling Item's Auto Saving

dhtmlxTree allows its users to save the selected node automatically in cookies. The enableAutoSavingSelected() method is used to switch this functionality on/off in the tree:

tree.enableAutoSavingSelected(mode,cookieName);

The parameters are:

  • mode(true/false) - indicates whether the auto saving is on/off;
  • cookieName - name of the cookie.

Related sample: Storing state in Cookies

Item's Text, Tooltip, Color Manipulation

Setting Item's Label

The user can set the label (text) of a tree node in the following way:

tree.setItemText(itemId, newLabel, newTooltip);

The parameters are as follows:

  • itemId - id of the item in question;
  • newLabel - new text for item's label;
  • newTooltip - the text indicated in this parameter will be used as item's tooltip text (optional parameter).

Getting Item's Label

The user has the possibility to get text of an item's label by indicating the item's id in the following way:

var text = tree.getItemText(itemId);

The user can also get the text of the currently selected item in the following way:

var textSelected = tree.getSelectedItemText();

Setting Item's Color

The following line of code is responsible for specifying a node's color (text color) in the tree:

tree.setItemColor(itemId, defaultColor, selectedColor);

The parameters the user should specify are as follows:

  • itemId - id of the item in question;
  • defaultColor - the item's color;
  • selectedColor - the item's color for a selected state.

Getting Item's Color

Item's color can be easily received by an item's id in the following way:

car color = tree.getItemColor(itemId);

The object returned by the above mentioned method has the parameters { acolor:"value", scolor:"value" } where:

  • acolor - means the color for the normal state of the item;
  • scolor - means the color for the selected state of the item.

The format of the color will be the same as it was set by the setItemColor() method.

Related sample: Dynamical icon/text/style changing

Setting Item's Tooltip

There are three ways to set tooltip for an item in Tree:

  • using a node's text ("label" attribute of a node) as a tooltip. In this case the following method should be used:

    tree.enableAutoTooltips(true/false); // false by default

  • using the "tooltip" attribute of a node in XML (it is used by default if this attribute was specified);

  • using the setItemText() method specifying its third parameter.

Getting Item's Tooltip

Item's tooltip is also easy to get with the help of the getItemTooltip() method by indicating an item's id:

var tooltip = tree.getItemTooltip(itemId);

Refreshing and Updating Items

Refreshing Item/Items

The following method is used to refresh data for the specified node:

// if an item's id isn't indicated, the id of the top tree item will be used
tree.refreshItem(itemId);

The above mentioned code line presupposes that all the child items of the indicated node are removed, an XML file (indicated in the setXMLAutoLoading() method; auto loading should be activated) is loaded from the server. The data from this file is used for creating new child items of the node in question.

The following method is used to refresh data for several nodes:

tree.refreshItems(itemIdList, source);

The parameters of this method include the list of items that should be refreshed and the path to the XML file from which new data will be loaded. In this case the data is refreshed only for the nodes indicated in the itemIdList parameter (not their children).

Related sample: Refreshing Items

Smart Branch Refreshing

There is one more possibility to refresh data in the tree. The smartRefreshBranch() method is able to load XML from the server and refresh data for the specified branch (text, icons, items). It should be noted that the current position and all the changes introduced by the user stay the same in this case.

tree.smartRefreshBranch(itemId,source);

The parameters here are responsible for:

  • itemId - id of the item from which the refreshing starts in the branch;
  • source - a server-side script, optional parameter. If it is not set, the system will use the source indicated in setXMLAutoLoading().

Smart Item Refreshing

The smartRefreshItem() method is responsible for loading XML the data of which is used for refreshing the specified item in the tree. The same as the previous method, this one keeps the current position of the item and all other changes introduced by the user.

tree.smartRefreshItem(itemId,source);

The parameters are as follows:

  • itemId - id of the item in question;
  • source - a server-side script, optional parameter. If it is not set, the system will use the source indicated in setXMLAutoLoading().

Updating Item

There is a simple way of updating items in dhmlxTree - the updateItem() method. The used should indicate the id of the item that should be updated and the parameters that should be updated:

tree.updateItem(itemId,name,im0,im1,im2,achecked);

The parameters of this method are as follows:

  • itemId - id of the item in question;
  • name - the title text of the item;
  • im0 - the icon for a leaf node;
  • im1 - the icon for an expanded parent node;
  • im2 - the icon for a collapsed parent node;
  • achecked(true/false) - whether the checkbox is checked (true) or not (false).

Items' Ids Manipulation

Getting List of Parent Items' Ids

The following methods allow the user to get ids of all parent tree nodes:

var parents = tree.getAllItemsWithKids(); // returns an array of nodes' ids

Getting List of Leaf Items' Ids

The user can get the list of ids of all tree's items that don't have child nodes (childless items):

var childless = tree.getAllChildless(); // returns an array of nodes' ids

Getting List of Sub-Items' Ids

The user can easily get the ids of all sub-items starting from the item the id of which is indicated in this method:

var subItems = tree.getAllSubItems(itemId);

Getting the list of all sub-items' ids for the specified item is quite easy. This parent item's id should be specified:

tree.getSubItems(itemId);

Changing Item's Id

The user can change any node's id, if there's such a need, in the following way:

tree.changeItemId(itemCurrentId,itemNewId);

Getting Child Item's Id

The user can get any child item's id by its index (sequence number) and the id of its parent:

var childId = tree.getItemIdByIndex(itemId,index);

The parameters are:

  • itemId - id of the parent item;
  • index - sequence number of the child item (starting with 0).

Getting Child Item's Index

Child item's index (sequence number) can be easily got by its id:

var childIndex = tree.getIndexById(itemId);

The parameter is the id of the child item the index of which the user wants to get.

Getting Item's Parent Id

The getParentId() method can be used to get an item's parent id:

var parent = tree.getParentId(itemId);

The id of the item should be indicated as the parameter.

Getting List of Checked/Unchecked Tree Items' Ids

The ids of all checked/unchecked items in the tree can be easily got by the getAllChecked() method:

var list = tree.getAllChecked(); //returns an array of all checked items' ids
    //or
var list = tree.getAllUnchecked(); // returns an array of all unchecked items' ids

Related sample: Checkboxes

Getting List of Partially Checked Items' Ids

The method, similar to the above mentioned ones, exists for getting the ids of all the partially checked items in the tree:

var list = tree.getAllPartiallyChecked(); // returns an array of all checked items' ids

Getting List of Checked Branches' Ids

Ids of all checked branches in the tree can be got like this:

var list = tree.getAllCheckedBranches(); // returns an array of all checked branches' ids

Getting Selected Item's Id

Selected item's id is easy to get through the getSelectedItemId() method which takes an item's id as a parameter:

var selectId = tree.getSelectedItemId();

Setting List Separator

There is a simple way of setting list separator in Tree:

tree.setListDelimeter(separator); // by default the separator is ","

There is only one parameter here - separator. It's a char or a string used for separating items in a list.

Items Position Manipulation

Moving Items

Any item in the tree can be moved with the help of the moveItem() method.

tree.moveItem(itemId, mode, targetId, targetTree);

The following parameters should be specified for this method:

  • itemId - id of the item in question;
  • mode - one of the moving modes available:
    • left - the item will be moved to the left of the node's current position;
    • up - the item will be moved one level up in the hierarchy;
    • up_strict - the item will be moved one position up, but will remain in the same level of the hierarchy;
    • down - the item will be moved one level down in the hierarchy;
    • down_strict - the item will be moved one position down, but will remain in the same level of the hierarchy;
    • item_child - the item will be made a child of the target item;
    • item_sibling - the item will be made a sibling of the target item, and will be placed before the target item;
    • item_sibling_next - the item will be made a sibling of the target item, and will be placed after the target item;
  • targetId - id of the item, relative to which the item in question will be moved;
  • targetTree (optional) - the object of some other tree, the item in question is moved into.

Related sample: Moving items

Cutting/Pasting Items

One more way of moving nodes is the use of the doCut() and doPaste() commands. But they work only with selected items:

tree.doCut(); // marks the selected item as cut
tree.doPaste(itemId); // id of a new parent node

The cut item will be made a child node of the item indicated in the doPaste() method.

Clearing Cut Mark

To clear the mark made by the doCut() method, the user is advised to use the clearCut() one:

tree.clearCut();

Getting Item's Level

There is a method in dhtmlxTree that allows the user to get an item's current level (position in the hierarchy) by indicating this item's id:

var level = getLevel(itemId);

Setting Item's Top Offset

There is a possibility to set the top offset for a tree item using the following method:

tree.setItemTopOffset(itemId,value);

The parameters are:

  • itemId - id of the item in question;
  • value - offset value.

Calculating Items

Setting Calculation Mode

The user can set the calculation mode for the tree in the following way:

tree.setChildCalcMode(mode); // disabled by default

There are the following mode variants available:

  • child - direct child items, no recursive;
  • leafs - direct child items without sub-items, no recursive;
  • childrec - child items (leaf items and those with their own child items), recursive;
  • leafsrec - child items without sub-items, recursive;
  • disabled - disable this mode.

All tree child nodes will be calculated in this mode.

Setting Calculation HTML

Along with setting the calculation mode for child items the user can specify calculation HTML like this:

tree.setChildCalcHTML(htmlA,htmlB);

The parameters here are:

  • htmlA - prefix of the calculator ("[" by default);
  • htmlB - postfix of the calculator ("]" by default).

Getting Number of Child Items

The number of child items of a certain parent can be got in the following way:

var childItems = tree.hasChildren(itemId);

User Data Manipulation

Setting User Data

User data can be set for any tree item:

tree.setUserData(itemId,name,value);

The parameters of this method are:

  • itemId - id of the item in question;
  • name - name of user data;
  • value - value of user data.

Getting User Data

User data set for a tree node can be got in the following way:

var userData = tree.getUserData(itemId,name);

The parameters of this method are:

  • itemId - id of the item in question;
  • name - name of user data.

Using Link-Like Functionality in Tree

Any node of the tree can have the link-like functionality specified for it. The link for an item can be set by user in XML. The user should also specify the onClick event for the item with link-like functionality.

Related sample: User data

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Drag-and-Drop DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
  • Manipulating Nodes
  • Handling Drag-and-Drop
    • Enabling/Disabling Drag-and-Drop
    • Setting Drag-and-Drop Mode
    • Copy with Drag-and-Drop
    • Dragging Into Tree
    • Dragging between Frames/Iframes
    • Enabling Custom Drag Out
    • Enabling Auto Scrolling
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
  • Handling Events
Start Tree

Handling Drag-and-Drop

dhtmlxTree has an extended drag-and-drop functionality (within one tree, between trees). Using this functionality it is easy to reorder nodes in a tree view, edit the tree by dragging nodes within one tree, between trees or even to another object.

Enabling/Disabling Drag-and-Drop

The user can switch d-n-d functionality on/off with the help of the enableDragAndDrop() method:

tree.enableDragAndDrop(mode, rmode);

The parameters here are as follows:

  • mode - the possible variants are:
    • true - d-n-d is enabled in the tree;
    • false - d-n-d is disabled in the tree.
  • rmode (true/false) - allows enabling/disabling dropping an item on an empty space in the tree, making this item the child of the top level tree node. This is enabled (true) by default.

If disabled (false), the user won't be able to drop an item on an empty space in the tree.

Related sample: Drag and Drop

Setting Drag-and-Drop Mode

There is a simple method that allows the user to set d-n-d mode - setDragBehavior():

tree.setDragBehavior(mode, select);

Dragging mode should be indicated as the parameter of this method. The parameters are the following:

  • mode - the following modes are available:
    • child - drop as a child;
    • sibling - drop as a sibling;
    • complex - both the above given modes are active;
  • select - select the dropped item after drag-n-drop; set to true by default.

Related sample: Drag and Drop behavior

Copy with Drag-and-Drop

There is also a possibility to enable "mercy" drag mode. In this case the copy of the dragged item will be moved to another place, leaving the source item intact (copy instead move):

tree.enableMercyDrag(true/false);

Related sample: Copy with Drag-n-Drop

Dragging Into Tree

Objects from page can be easily dragged into the tree. There are the following ways of making an object draggable:

  • using the makeDraggable() method the parameter of which is the id of the object that the user wants to make draggable:
    <div id="a0">Some text</div>
    <div id="a1" text="Tomb" image="tombs.gif">Some complex HTML</div>
<script>
    ...
    tree.makeDraggable("a0");
    tree.makeDraggable("a1");
</script>
  • using the makeDraggable() method the parameters of which are id of the object and the function that will be activated on d-n-d to add the element into the tree:
    <div id="a2" text="Green">
    <div style='width:50px; height:20px; background-color:green;'></div>
</div>
<script>
    tree.makeDraggable("a2",function(drop_obj,source_id,target_on,target_before){
        drop_obj.insertNewItem(target_on,source_id,"Green 1");
        drop_obj.insertNewItem(target_on,source_id,"Green 2");
        drop_obj.insertNewItem(target_on,source_id,"Green 3");
    });
</script>
  • using the makeAllDraggable() method without any input parameters:
    <div dragInDhtmlXTree="true" id="a3" text="Blue" >...</div>
<div dragInDhtmlXTree="true" id="a4" image="open2.gif" text="Open">...</div>
<div dragInDhtmlXTree="true" id="a5" image="tombs.gif" text="Tomb">...</div>

<script>
        tree.makeAllDraggable();
    </script>

Related sample: Drag-n-drop into tree

Dragging between Frames/Iframes

Drag-and-drop between frames/iframes is enabled by default (works in IE, Chrome and Safari), so no additional code is required except for:

tree.enableDragAndDrop(true);

All you need to do additionally is to insert the following code into the frame/iframe containing no tree:

new dhtmlDragAndDropObject();

Enabling Custom Drag Out

Dragging a node from the tree to some input control on a page is also possible in dhtmlxTree:

tree.dragger.addDragLanding(sinput, {
    _drag : function(){ ... },
    _dragIn : function(){ ... },
    _dragOut : function(){ ... }
});

The parameters of the addDragLanding() method are as follows:

  • sinput - the element that will act as a dragging area;
  • object - the object containing 3 functions:
    • _drag - will be called when the element is put on the dragging area;
    • _dragIn - will be called when the element is over the dragging area;
    • _dragOut - will be called when the element had been over the dragging area but was moved outside it.

The first function is responsible for the action itself, while the other two are used for its visualization.

Related sample: Custom Drag Out

Enabling Auto Scrolling

Auto scrolling is very useful in the process of d-n-d. This functionality is enabled by default, but it can be easily disabled in the following way:

tree.enableDragAndDropScrolling(false); // true to enable again
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Manipulating Checkboxes DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
    • Enabling/Disabling Checkboxes
    • Manipulating Checkboxes' State
  • Manipulating Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
  • Handling Events
Start Tree

Manipulating Checkboxes

dhtmlxTree operates an advanced checkbox system. Besides usual two-state checkboxes (checked/unchecked item), there is a possibility to use three-state checkboxes with a "partly checked" value.

Enabling/Disabling Checkboxes

Enabling Standard Checkboxes

The enableCheckBoxes method allows enabling standard checkboxes in Tree:

tree.enableCheckBoxes(mode, hidden);

The parameters of the method are as follows:

  • mode - (boolean) false stands for hiding all the checkboxes, while true stands for showing them all in the tree;
  • hidden - (boolean) setting it to true means that checkboxes are not rendered, but can be shown by the showItemCheckbox method.

In the case of creating checkboxes with the help of the above mentioned method, they will possess the usual checkbox states:

  • checked;
  • unchecked.

Related sample: Lists of check boxes states

Enabling Three-State Checkboxes

The enableThreeStateCheckboxes method is responsible for enabling three-state checkboxes:

tree.enableThreeStateCheckboxes(true|false);

The following states are available for three-state checkboxes:

  • checked;
  • unchecked;
  • partially checked.

The third state takes place when an item has several child nodes among which there are checked and unchecked ones.

It should be noted that in case when three-state checkboxes are enabled, a click on a parent unchecked checkbox will result in checking it together with all its child items, and vice versa.

Related sample: Mixed checkboxes

Enabling Smart Checkboxes

The enableSmartCheckboxes method enables auto-checking of children and parents for three-state checkboxes.

tree.enableSmartCheckboxes(true|false);

This functionality is enabled by default.

Disabling a Checkbox

A checkbox of a certain item can be disabled. The parameters that are to be specified:

  • itemId - (string|number) id of the item in question;
  • state - (boolean) indicates whether the checkbox is disabled (true) or enabled (false).
tree.disableCheckbox(itemId, state);

Enabling Checkboxes for Specific Items

The user can set checkboxes for some specific items. This can be done in the following way:

// enable checkboxes in Tree, but not render them
tree.enableCheckBoxes(true, true);
...
// show a checkbox for the specified item
tree.showItemCheckbox(itemId, state);

The parameters of the showItemCheckbox method are:

  • id - (string|number) the id of an item, set null to change states of all items;
  • state - (boolean) specifies whether the checkbox will be visible (true) or not (false).

Manipulating Checkboxes' State

Checking/Unchecking Tree Item

Any checkbox in the tree can be easily checked/unchecked from script with the help of the setCheck method:

tree.setCheck(id, state);

The parameters are as follows:

  • id - (string|number) the id of the item in question;
  • state - (boolean) if set to true, the item will be checked, while false means unchecking the item.

It should be noted that according to the three-state checkboxes' logic, if a parent item has been checked with the help of the setCheck() method, all its child items will be checked as well.

Related sample: Lists of check boxes states

Checking/Unchecking Tree Branch

Along with checking a tree item, a tree branch can also be easily checked/unchecked from script by using the setSubChecked method:

tree.setSubChecked(id, state);

The parameters are as follows:

  • id - (string|number) the id of the item in question;
  • state - (true|false) if set to true, the branch of items will be checked, while false means unchecking the branch.

Getting Checkbox's State

The state of the specified item's checkbox can be got via the isItemChecked method:

var checkState = tree.isItemChecked(itemId);

The method takes the id of the item in question and returns true for the checked state and false for the unchecked state correspondingly.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Manipulating Radio Buttons DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
    • Enabling/Disabling Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
  • Handling Events
Start Tree

Manipulating Radio Buttons

Enabling/Disabling Radio Buttons

Enabling/Disabling Radio Buttons for Tree

dhtmlxTree supports radio buttons. To turn them on for the whole tree the user should call the following method:

tree.enableRadiobuttons(true); // false - disables radio buttons for the whole tree

This method should be called before data loading in the tree takes place.

Enabling/Disabling Radio Buttons for Items

There is a possibility to enable radio buttons for child items of a certain node in the tree. In this case the checkboxes of these child items will be replaced by radio buttons:

tree.enableCheckboxes(true); //enable checkboxes
//enable radio buttons for child items of a certain node; false to disable
tree.enableRadiobuttons(true, itemId);

Enabling/Disabling Single Radio Mode

The enableSingleRadioMode() method changes the radio buttons logic in the way that there can be only one checked radio button in the whole tree. To switch this mode on the user should write the following code line:

tree.enableSingleRadioMode(mode, itemId);

The parameters are:

  • mode (true/false) - whether single radio mode is enabled/disabled;
  • itemId - id of the item that will be checked.

Related sample: Radio buttons tree

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Simultaneous Server Update DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
    • dataProcessor Module
    • Enabling dataProcessor Module
    • Server-Side dataProcessor Handling
  • Compatibility with Other DHTMLX Components
  • Handling Events
Start Tree

Simultaneous Server Update

dataProcessor Module

Common tree manipulations like drag-n-drop (including d-n-d between trees), removing an item, inserting an item, or updating an item's label can be simultaneously reflected in the server database now (since v.1.3) using dataProcessor module.

The main features of this module are:

  • An updated/inserted item is marked with the bold text, the text of a deleted item is strikethrough;
  • You can define the mode of data processing (automatic/manual).

The data of the updated/deleted items is sent to the server to the specified URL (we call it serverProcessor).

The serverProcessor should return a simple XML or JSON of the specified format to let the tree know about successful or unsuccessful processing. All the necessary after-save procedures will be done automatically.

Enabling dataProcessor Module

To enable this feature the user should do the following:

  • Create dataProcessor object for the tree;
  • Initialize dataProcessor.
<script>
    ...
    tree.init();
    myDataProcessor = new dataProcessor(serverProcessorURL);
    myDataProcessor.init(treeObj); // tree object to assign dataProcessor to, mandatory
</script>

The mandatory parameter for dataProcessor is:

  • serverProcessorURL - URL of the file that will process the incoming data. If our server-side routines are used, "dhtmlxDataProcessor/server_code/PHP/update.php?ctrl=tree" should be indicated.

Server-Side dataProcessor Handling

Using the server-side dataProcessor the user should bear in mind the following:

  • All data comes in GET scope:
    • tr_id - a node's id;
    • tr_order - a node's sequence on the level;
    • tr_pid - parent id;
    • tr_text - a node's text(label);
    • Userdata blocks are passed with their names.
    • !nativeeditor_status - values can be as follows:
      • "inserted" - item is inserted;
      • "deleted" - item is deleted;
      • "updated" or item doesn't exist - item is updated.
  • serverProcessor should return a valid XML of the following format:
<data>
<action type='insert/delete/update' sid='incoming_node_ID' tid='outgoing_node_ID'/>
</data>

In the above mentioned snippet, "incoming_node_ID" and "outgoing_node_ID" may be different for insert action only, but they are equal for other actions.

Related sample: Updating server datasource

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Compatibility with Other DHTMLX Components DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
    • Enabling Context Menu
    • Context Menu Based on Item's Properties
    • Contextual Menu for Individual Items
  • Handling Events
Start Tree

Compatibility with Other DHTMLX Components

Enabling Context Menu

A context menu can be easily added to dhtmlxTree. The content of this menu can be set with XML or script. To enable a context menu the user should do the following:

//initialization of the menu
menu = new dhtmlXMenuObject(null,"standard");
menu.setIconsPath("[full path to this folder]/images/");
menu.renderAsContextMenu();
menu.loadStruct("_context.xml");

//initialization of the tree
tree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
...
//link the context menu to the tree
tree.enableContextMenu(aMenu);

Related sample: Tree and Context menu

Context Menu Based on Item's Properties

One context menu's content can be attached to the whole tree. If the user wants the menu to be shown differently depending on the item it was called for, the menu methods hideButtons/showButtons should be used.

Note: For more information on the above mentioned menu buttons refer to Menu Guides.

<div id="treeboxbox_tree" style="width:200;height:200"></div>

<script>
    function onButtonClick(menuitemId,type){
        var id = tree.contextID;
        tree.setItemColor(id,menuitemId.split("_")[1]);
    }
        //initialization of the menu
    menu = new dhtmlXMenuObject(null,"standard");
    menu.setIconsPath("[full path to this folder]/images/");
    menu.renderAsContextMenu();
    menu.setOpenMode("web");
    menu.attachEvent("onClick",onButtonClick);
    menu.loadStruct("_context.xml");
        //initialization of the tree
    tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
    tree.setImagesPath("../imgs/");
    tree.enableDragAndDrop(true);
    tree.enableContextMenu(menu);
        //link context menu to the tree
    tree.load("tree.xml")

    tree.attachEvent("onBeforeContextMenu",function(itemId){
        if (tree.hasChildren(itemId) > 0){
            menu.hideItem('outher');
        } else {
            menu.showItem('outher');
        }
        return true
    })
</script>

Related sample: Context menu based on item properties

Contextual Menu for Individual Items

If you want to set different menus for individual tree items use the following method:

tree.setItemContextMenu(itemId,cMenu);

The parameters of the method are responsible for:

  • itemId - id of the item the context menu will be attached to;
  • cMenu - context menu object that will be attached.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXTree API
  • Initializing Tree
  • Syntax Templates
  • Setting Tree Appearance
  • Navigation and Selection in Tree
  • Searching and Sorting in Tree
  • Serializing and Caching Tree
  • Loading Big Datasets
  • Manipulating Nodes
  • Handling Drag-and-Drop
  • Manipulating Checkboxes
  • Manipulating Radio Buttons
  • Simultaneous Server Update
  • Compatibility with Other DHTMLX Components
  • Handling Events
    • Available Events
    • Attaching/Removing Event Handlers
Start Tree

Handling Events

Available Events

The following events are available in dhtmlxTree:

Drag-and-Drop Events:

  • onBeforeDrag - fires when an item's dragging starts (the item is selected and the mouse is moving);
  • onDrag - fires when an item was dragged and dropped on some other item, but before item's moving is processed;
  • onDragIn - fires when an item is dragged over some target the item can be dropped to;
  • onDrop - fires when drag-and-drop had already been processed; also fires when the nodes are moved programmatically;

Editing Events:

  • onEdit - fires on 4 different stages of editing process: before starting of editing (can be canceled), after starting of editing, before editor's closing (can be canceled), after editor's closing;
  • onBeforeCheck - fires before an item is checked/unchecked;
  • onCheck - fires immediately after an item in the tree has been checked/unchecked;

Loading Events:

  • onXLS - fires when XML parsing starts;
  • onXLE - fires when XML parsing is over, new items are already available in the tree;

Mouse Events:

  • onMouseIn - fires when the mouse pointer is hovered over an item;
  • onMouseOut - fires when the mouse pointer is moved out of an item's area;

Opening Events:

  • onOpenStart - fires right when an item in the tree starts to open, but before this item opens. This event is also available for "unclosable" nodes and nodes without the open/close functionality. In this case the result of the function will be ignored;
  • onOpenEnd - fires right when an item in the tree has become open. The event is also raised for "unclosable" nodes and nodes without the open/close functionality. In this case the result of function will be ignored.
  • onDblClick - fires right when a tree item has been double clicked, but before the default onDblClick functionality is processed;
  • onOpenDynamicEnd - fires when the openItemsDynamic() method loads and opens the required hierarchy of items;

Right Click Events

  • onRightClick- fires when the user clicks the right mouse button;
  • onBeforeContextMenu - fires before the moment a context menu appears by a right mouse click;

Selection Events

  • onClick - fires when the text part of a tree item was clicked, but after the default onClick functionality has been processed;
  • onSelect - fires when the selection in the tree was changed.

Attaching/Removing Event Handlers

The user can add any user-defined handler to available events. To do this he can use the attachEvent() method with the following parameters:

  • evName - name of the event;
  • evHandler - a user-defined event handler.
tree.attachEvent(evName, evHandler);

Several handlers can be attached to one and the same event, and all of them will be executed.

The names of events are case-insensitive.

There is a simple way of removing an event-handler:

tree.detachEvent(id); // unique id of the event handler

Related sample: Event handlers

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


TreeGrid DHTMLX Docs

Documentation
  • TreeGrid
    • dhtmlXTreeGrid API
    • Initializing TreeGrid
    • Loading and Manipulating Data
    • TreeGrid Specific API
    • TreeGrid Specific Extensions
    • Filtering in TreeGrid
    • Using Get-Methods
    • Font Awesome Icons in TreeGrid
Start

TreeGrid

This component is available in PRO version only.

You can show the nested tabular data using a special extension for dhtmlxGrid - dhtmlxTreeGrid. See dhtmlxGrid manual to get the details about the grid structure initialization and usage.

API reference
  • dhtmlXTreeGrid API
Related resources
  • You may download dhtmlxTreeGrid (available in Pro version only) from dhtmlx.com
  • Check online samples for dhtmlxTreeGrid
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Configuring TreeGrid

  • Initializing TreeGrid
  • Dynamic Loading in TreeGrid
  • Smart Parsing in TreeGrid
  • Setting Item's Label
  • Adding/Removing Rows
  • Expanding/Collapsing Rows
  • Font Awesome Icons in TreeGrid
 Discusses the initialization of TreeGrid, loading and parsing data in this component,as well as introduces possible operations with TreeGrid items.

TreeGrid Specific API

  • Built-in Iterator
  • Manipulating Cookies
  • Handling Events
 Describes specific TreeGrid functions used for setting iterator, interacting with cookies and handling events.

TreeGrid Specific Extensions

  • Lines Between Nodes
  • Math Formulas in TreeGrid
  • Statistic Counters in TreeGrid
  • Setting Drag Behavior
 Shows helpful extensions you may use for working with TreeGrid.

Special Functionality

  • Filtering in TreeGrid
  • Using Get-Methods
 Includes some particular TreeGrid features which extend this component's functionality in comparison with a plain grid.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXTreeGrid API DHTMLX Docs

Documentation
  • dhtmlXTreeGrid API
    • Methods
    • Events
    • Others
  • Initializing TreeGrid
  • Loading and Manipulating Data
  • TreeGrid Specific API
  • TreeGrid Specific Extensions
  • Filtering in TreeGrid
  • Using Get-Methods
  • Font Awesome Icons in TreeGrid
Start TreeGrid

dhtmlXTreeGrid API

Methods
addRow | adds a row to the grid
addRowAfter | adds a new row to treeGrid, after some other row
addRowBefore | adds new row to treeGrid, before some other row
addRowFromClipboard | allows the user to add a new row from clipboard
adjustColumnSize | adjusts a column's size to make all content visible
attachEvent | adds any user-defined handler to available events
attachFooter | attaches an additional line to the footer
attachHeader | attaches an additional line to the header
attachToObject | attaches Grid to some object in DOM
cellById | gets dhtmlXGridCellObject object
cellByIndex | gets dhtmlXGridCellObject object
cellToClipboard | copies the value of a cell to the clipboard
cells | gets dhtmlXGridCellObject object
cells2 | gets dhtmlXGridCellObject object
changePage | changes the current page in grid
changePageRelative | changes the current page in grid
changeRowId | changes id of the row to the new one
checkAll | checks all checkboxes in the grid
clearAll | deletes all rows in the grid
clearAndLoad | clears the existing grid state and loads data from an external file ( xml, json, jsarray, csv )
clearChangedState | clears wasChanged state for all cells in grid (and wasAdded state as well, if called with a parameter)
clearConfigCookie | clears cookie with grid config details
clearSelection | removes selection from the grid
closeItem | collapses row
collapseAll | collapses all tree structure
collapseAllGroups | collapses all groups
collapseColumns | collapses a group of columns
collapseGroup | collapses a group of rows
collectTreeValues | gets all possible values in a column
collectValues | gets all possible values of a column
copyBlockToClipboard | copies the content of a block selection into clipboard in CSV format (delimiter as set for CSV serialization)
copyRowContent | copies a row's content to another existing row
deleteChildItems | deletes all childs of the row in question
deleteColumn | deletes a column
deleteRow | deletes a row from the grid
deleteSelectedRows | deletes selected row(s)
destructor | destructor, removes the grid and cleans used memory
detachEvent | removes an event handler
detachFooter | removes a footer line from the grid (opposite to attachFooter)
detachHeader | removes a header line from the grid (opposite to attachHeader)
disableUndoRedo | disables the Undo/Redo functionality in the grid
doRedo | executes the redo operation
doUndo | executes the undo operation
doesRowExist | determines if a row with the specified id exists
editCell | creates an Editor object and switches the selected cell to the edit mode, if allowed
editStop | returns the value from the editor(if presents) to the cell and closes the editor
enableAccessKeyMap | enables Access keyboard navigation
enableAlterCss | sets css styles for even/odd rows
enableAutoHeight | enables autoheight of the grid
enableAutoHiddenColumnsSaving | enables automatic saving of a column's state ( hidden/shown )
enableAutoSaving | enables automatic saving of size, sorting order and columns order
enableAutoSizeSaving | enables automatic size saving to cookie
enableAutoWidth | changes the size of grid's container on the fly to fit total width of grid's columns
enableBlockSelection | enables block selection mode in grid
enableCSVAutoID | enables the mode in which IDs for the rows loaded from CSV are autogenerated
enableCSVHeader | enables recognizing the first row in CSV as the header
enableCellIds | enables/disables unique ids for cells (id will be automatically created by the template: 'c_[RowId]_[colIndex]')
enableColSpan | enables/disables colspan support
enableColumnAutoSize | adjusts column size to make all content visible on the header doublclick
enableColumnMove | enables the move column functionality
enableContextMenu | enables/disables context menu
enableDistributedParsing | enables/disables distributed parsing (rows are parsed portion by portion with some timeout)
enableDragAndDrop | enables/disables drag-and-drop
enableDragOrder | switches to the mode in which dragged items drop in the target location in the same order as they were in the source grid
enableEditEvents | enables/disables events which invoke excell editing
enableEditTabOnly | enables/disables the mode when readonly cell is not available with tab
enableExcelKeyMap | enables Excel keyboard navigation
enableHeaderImages | specifies if the values passed to Header are images' file names
enableHeaderMenu | enables a popup menu which allows hidding/showing columns
enableKeyboardSupport | enables/disables hot keys in grid
enableLightMouseNavigation | enables/disables light mouse navigation mode (row selection with mouse over, editing with single click)
enableMarkedCells | sets the marked cells support to enabled/disabled state
enableMathEditing | enables/disables editing of math cells
enableMathSerialization | enables/disables serialization of math formulas
enableMercyDrag | enables drag without removing (copy instead of move)
enableMultiline | sets the multiline rows support to enabled/disabled state
enableMultiselect | sets multiselect mode to enabled or disabled state
enableOrderSaving | enables automatic column order saving to cookie
enablePaging | enables smart paging mode
enablePreRendering | enables pre-rendering rows during scrolling.
enableResizing | enables/disables resizing for specified colums
enableRowsHover | enables/disables hovering on a row on mouse over
enableRowspan | enables rowspan in treegrid
enableSmartRendering | enables smart rendering mode
enableSmartXMLParsing | enables smart xml parsing mode
enableSortingSaving | enables automatic saving of the sorting state to cookie
enableStableSorting | enables stable sorting algorithm
enableTooltips | enables/disables tooltips for specified colums
enableTreeCellEdit | enables/disables editor of tree cell; enabled by default
enableTreeGridLines | enables lines in TreeGrid
enableUndoRedo | enables the Undo/Redo functionality in grid
enableValidation | enable validation in the grid
expandAll | expands all tree structure
expandAllGroups | expands all groups
expandColumns | expands a group of columns
expandGroup | expands a group of rows
filterBy | filters Grid by mask
filterByAll | forces Grid filtering by registered inputs (created by # starting shortcuts, or by the makeFilter function)
filterTreeBy | filters treegrid by mask
findCell | finds cell in grid by value
forEachCell | executes the code for each cell in a row
forEachRow | executes code for each row in the grid
forEachRowInGroup | iterates through all rows in some group
forceFullLoading | loads all data in the grid, which is in dyn. srnd or dyn. paging mode
forceLabelSelection | affects block selection, so it will copy/paste only the visible text, not the values behind
getAllRowIds | gets the list of all row ids in the grid
getAllSubItems | gets the list of ids of all nested rows
getCellExcellType | returns the excell type of the cell in question
getChangedRows | gets the list of IDs of the changed rows
getCheckedRows | gets the list of ids of all the rows with checked exCell in the specified column
getChildItemIdByIndex | gets the id of a child item in the specified position
getColIndexById | gets column index by column id
getColLabel | gets the label of the column specified by index
getColType | gets column type by column index
getColTypeById | gets the column type by its ID
getColWidth | gets the width of the specified column in pixels
getColumnCombo | returns dhtmlXCombo column object
getColumnId | gets the id of the column specified by index
getColumnLabel | gets the label of the column specified by index
getColumnsNum | returns the number of columns in the grid (including [hidden columns](setColumnHidden))
getCombo | gets Combo object of the specified column
getCustomCombo | gets the combobox specific for the cell in question
getFilterElement | gets the input object of the filter linked to the column in question
getFooterLabel | gets the label of the footer specified by index
getHeaderMenu | returns dhtmlXMenu object of the grid header menu
getItemIcon | returns the font awesome icon of an item
getItemImage | gets the image of the tree col
getItemText | gets real caption of tree col
getLevel | returns the level of a TreeGrid row
getMarked | returns an array of marked cells (pairs of row id and column index)
getOpenState | returns open/close state of the row
getParentId | returns id of the parent row
getRedo | gets length of available ReDo operations
getRowAttribute | returns the row attribute's value which was set in the XML tag
getRowData | returns the row data
getRowId | gets the row id by the row index
getRowIndex | gets the row index by the row id (grid only)
getRowsNum | returns the number of rows in the grid (in case of dynamic mode it will return an expected number of rows)
getSelectedBlock | returns the attributes of the current block selection
getSelectedCellIndex | returns the index of the selected cell or -1, if there is no selected cell
getSelectedRowId | returns the id of the selected row (a list of ids with default delimiter) or null, if there are no selected rows
getSortingState | gets the sorting state of the grid
getStateOfView | returns details about current grid state
getSubItems | returns a list of child rows ids, separated by comma
getUndo | gets length of available UnDo operations
getUserData | gets user data
gridFromClipboard | initializes grid from CSV stored in the clipboard
gridToClipboard | copies grid in CSV to the clipboard
gridToGrid | redefine this method in your code to specify how grid row values should be used in another grid
gridToTreeElement | redefine this method in your code to define how grid row values should be used in tree
groupBy | groups grid content by values of the specified column
groupStat | returns the result of aggregation for a column
hasChildren | returns the number of the row's children
init | initializes grid
insertColumn | adds a new column to the grid
isColumnHidden | gets the shown/hidden status of the column
load | loads data from an external file ( xml, json, jsarray, csv )
loadHiddenColumnsFromCookie | loads the sorting order from cookie
loadOpenStates | loads open state of TreeGrid into cookie
loadOrderFromCookie | loads sorting order from cookie
loadSizeFromCookie | loads grid layout from cookie
loadSortingFromCookie | loads sorting order from cookie
lockRow | locks/unlocks a row for editing
makeFilter | makes a filter from any input element (text filter), select (dropdown) or DIV (combobox based on dhtmlxCombo)
makeSearch | makes a search box (sets selection on the row with the found value) from any input
mark | marks/unmarks the specified cell
moveColumn | moves the column of the specified index to a new position
moveRow | moves a row
moveRowDown | moves a row one position down, if possible
moveRowTo | moves a row
moveRowUp | moves a row one position up, if possible
openItem | expands the specified row
parse | loads data from a local data source (XML string, CSV string, XML island, XML object, JSON object, javascript array)
pasteBlockFromClipboard | pastes the content of the clipboard into a block selection of the grid
post | allows sending POST requests by loading data from external file ( xml, json, jsarray, csv )
preventIECaching | prevents caching in IE by adding random values to URL string
printView | generates the print friendly view
refreshComboColumn | updates the cells of the combo column
refreshFilters | refreshes the lists of values in all the filters created by shortcuts or by makeFilter calls
refreshMath | restores math after column moving
registerCList | registers an array of options for a multiselect column ("clist") of the grid
rowToClipboard | copies the value of a row to the clipboard
rowToDragElement | redefine this method in your code to specify how grid row values should be displayed during the dragging
saveHiddenColumnsToCookie | saves hidden columns to cookie
saveOpenStates | stores open state of TreeGrid in cookie
saveOrderToCookie | saves the columns' order to cookie
saveSizeToCookie | saves grid layout to cookie
saveSortingToCookie | saves the sorting order to cookie
selectAll | selects all rows in the grid, doesn't trigger any events
selectBlock | selects a block in the Grid, according to the specified rows' ids and columns' indexes
selectCell | sets selection to the specified row-cell
selectRow | selects a row (and its first cell)
selectRowById | selects row by ID
serialize | gets actual xml of the grid
serializeToCSV | serializes to CSV string
setActive | sets the grid active to make key navigation possible
setAwaitedRowHeight | applies a custom height of a row which will be used in the smart rendering mode for row calculation
setCSVDelimiter | changes csv delimiter
setCellExcellType | sets an excell type for the cell in question
setCellTextStyle | sets a style for a cell
setCheckedRows | sets a value for all checkboxes in the specified column
setColAlign | aligns values in columns
setColLabel | sets a new label for the column header
setColSorting | sets the types of column sort
setColTypes | sets column types
setColVAlign | sets vertical align for columns
setColValidators | assigns validators to the related column
setColWidth | sets the width for the specified column in pixels (doesn't work with the percentage based grid)
setColspan | dynamically sets colspan in a row starting from the specified column index
setColumnColor | colors the background of columns
setColumnExcellType | sets an excell type for all the cells in the specified column
setColumnHidden | hides/shows a column
setColumnId | sets id for the specified column
setColumnIds | sets id for every column
setColumnLabel | sets a new column header label
setColumnMinWidth | sets the minimum column width (works only for manual resizing)
setColumnsVisibility | sets the list of visible/hidden columns
setCustomSorting | sets a custom sorting
setDateFormat | sets a mask for date formatting in the grid (works for "dhxCalendar" and "dhxCalendarA" types only)
setDelimiter | sets a delimiter character used in list values (default is ",")
setDragBehavior | sets Drag-And-Drop behavior
setEditable | manages the editability of the grid
setExternalTabOrder | sets elements which get focus when the Tab button is pressed in the last or in the first (Tab+Shift) cell
setFieldName | allows defining an input's name which will be used for data sending,
setFiltrationLevel | allows to define which level of tree must be used for filtering
setFooterLabel | sets a new label for a cell in the footer
setHeader | sets the header label and default params for new headers
setIconsPath | sets the path to external images used in the grid (tree and img column type)
setIconset | sets the font awesome iconset
setImageSize | sets size of treegrid images
setImagesPath | defines the path to the imgs folder
setInitWidths | sets the width of columns in pixels
setInitWidthsP | sets the width of columns in percents
setItemCloseable | enables/disables closing of row
setItemIcon | sets a Font Awesome icon for an item
setItemImage | sets image of tree col
setItemText | sets real caption of tree col
setMathRound | enables/disables rounding during the math calculations
setNoHeader | creates a grid without header
setNumberFormat | sets a mask for formatting numeric data (works for **"edn"**, **"ron"** excell only)
setOnOpenEndHandler | sets function called after tree node opened/closed
setOnOpenStartHandler | sets function called before tree node opened/closed
setPagingSkin | allows setting a custom paging skin
setPagingTemplates | allows setting paging templates for the default skin
setPagingWTMode | configures the paging with toolbar mode
setRowAttribute | sets a row attribute
setRowColor | sets the background color of a row (via the bgcolor attribute)
setRowData | sets new data for row's columns
setRowExcellType | sets an excell type for all cells in the specified row
setRowHidden | hides/shows a row
setRowId | sets a new id for a row by its index
setRowTextBold | sets the text of a row BOLD
setRowTextNormal | sets the text weight of a row to normal
setRowTextStyle | sets the style of a row
setRowspan | sets rowspan of the specified length starting from the specified cell
setSerializableColumns | specifies which column must be serialized (if you don't use this method, all columns will be serialized)
setSerializationLevel | configures XML serialization
setSizes | resets sizes of the grid's elements
setSkin | sets one of the predefined css styles (xp, mt, gray, light, clear, modern, sb_dark)
setSortImgState | sets the position and visibility of a sort arrow
setStyle | modifies the default style of the grid and its elements
setSubGrid | attaches a grid-like editor to a grid's column
setSubTree | attaches a tree-like editor to a grid's column
setTabOrder | sets the tab order of columns
setUserData | sets user data for a row
showRow | scrolls a grid to make the specified row visible
sortRows | sorts the Grid by the specified column
sortTreeRows | sorts TreeGrid by the specified column
splitAt | splits the grid
startFastOperations | starts the fast operation mode
stopFastOperations | turns off the fast operation mode, needs to be executed to normalize the view
submitAddedRows | includes additional data with the info about which rows were added and which ones deleted, enabled by default
submitColumns | sets the list of columns the data of which will be updated
submitOnlyChanged | includes only the changed rows into the form submit
submitOnlyRowID | includes only rows' IDS into the form submit
submitOnlySelected | includes only the selected rows into the form submit
submitSerialization | includes a serialized grid as a part of the form submit
toExcel | exports data from dhtmxlGrid to an Excel document
toPDF | exports data from dhtmxlGrid to a PDF document
treeToGridElement | redefine this method in your code to specify how tree node values should be used in the grid
uid | returns the unique ID
unGroup | ungroups the grid to return it into the plain view
uncheckAll | unchecks all checkboxes of the grid
unmarkAll | removes selection from all the marked cells
updateCellFromClipboard | sets the value of a cell from the clipboard
updateFromXML | refreshes grid from XML (doesn't work for buffering, tree grid or rows in smart rendering mode)
updateGroups | forces grid grouping by registered parameters
updateRowFromClipboard | sets the value of a row from the clipboard
validateCell | forces validation of a specific cell
Events
onAfterCMove | fires after the column has been moved to a new position
onAfterRowDeleted | fires after a row has been deleted from the grid
onAfterSorting | fires exactly after sorting has occured in the grid
onBeforeBlockSelected | fires when the user starts selecting a block
onBeforeCMove | fires when a column moving operation starts
onBeforeContextMenu | fires immediately before showing a context menu
onBeforeDrag | fires when the drag operation starts
onBeforeFormSubmit | fires before submitting data to the form
onBeforePageChanged | fires before the active page in the grid is changed (paging extension)
onBeforeRowDeleted | fires right before a row is deleted
onBeforeSelect | fires a moment before a row in the grid is selected
onBeforeSorting | fires before data sorting is started
onBlockRightClick | fires after clicking by the right mouse button on the selection block
onBlockSelected | fires when some area is selected in the grid (block selection extension)
onCalendarShow | fires when a calendar pops up in the grid
onCellChanged | fires when a cell value has been changed by user actions or by API calls ( )
onCellMarked | fires immediately after a cell has been selected
onCellUnMarked | fires immediately after a cell is unselected
onCheck | fires after the state of a checkbox has been changed
onCheckbox | the event is deprecated, use the onCheck event instead; fires after the state was changed
onClearAll | fires when the grid is cleared (reloaded)
onCollectValues | fires after the values have been collected to fill the select filter
onColumnCollapse | the event occurs after a group of columns has been collapsed
onColumnHidden | fires after a column has been hidden (the setColumnHidden method has been called)
onDataReady | fires when the data is loaded to the grid but hasn't been rendered yet
onDhxCalendarCreated | fires on calendar's initialization on the page
onDistributedEnd | fires on the end of distributed parsing
onDrag | fires when an item is dragged to another target and the mouse is released, the event can be blocked
onDragIn | fires when an item is dragged to a potential target (the event can be blocked)
onDragOut | fires when an item is dragged out of the potential target (the event can be blocked)
onDrop | fires when an item is already placed in its final position
onDynXLS | fires before requesting additional data from the server in case of dynamic Smart Rendering or dynamic Paging
onEditCancel | fires when the edit operation was canceled
onEditCell | fires 1-3 times depending on cell's editability (see the stage parameter)
onEmptyClick | fires on clicking the dhtmlxgrid area which is not filled with data
onEnter | fires immediately after the Enter key was pressed
onFilterEnd | fires when filtering is completed (filtering extension)
onFilterStart | fires when filtering has been activated but before the real filtering started
onGridReconstructed | fires immediately after a row has been added/deleted or the grid has been reordered
onGroup | fires when a grid was grouped by some column
onGroupClick | fires on clicking a group row (can be blocked)
onGroupStateChanged | fires when a group was opened/closed
onHeaderClick | fires right after the header has been clicked, before sorting or any other actions
onKeyPress | fires after a key has been pressed but before the default key processing starts
onLastRow | fires on pressing the Down-Arrow button while the last row of the page is selected
onLiveValidationCorrect | fires when validation runs successfully
onLiveValidationError | fires when validation runs and rules execution are failed
onMouseOver | fires when the mouse pointer is moved over a cell
onOpenEnd | fires after opening or closing a branch in treegrid
onOpenStart | fires at the moment when the "plus" icon is clicked in treegrid
onPageChanged | fires after the active page of the grid has been changed (paging extension)
onPaging | fires each time when paging settings are changed (paging extension)
onResize | fires on each resize iteration
onResizeEnd | fires when resizing of a column is finished
onRightClick | fires immediately after the right mouse button has been clicked on a grid's row
onRowAdded | fires right after a row has been added to the grid
onRowCreated | fires after a row has been created in the grid and filled with data
onRowDblClicked | fires right after a row has been double clicked, before a cell editor is opened by a dbl click
onRowHide | fires when the row is hiding
onRowIdChange | fires after the ID of a row has been changed (changeRowId, setRowId, dataprocessor)
onRowInserted | fires when the row is added to the grid and filled with data
onRowPaste | fires for each row pasted from the clipboard (block selection extension)
onRowSelect | fires immediately after a row in the grid has been clicked
onScroll | fires immediately after scrolling has occured
onSelectStateChanged | fires immediately when the selection state has been changed
onStatReady | fires after the stat values have been calculated
onSubAjaxLoad | fires when sub-row-ajax cell loads its data
onSubGridCreated | fires when the creation of a sub-grid was initialized (can be blocked)
onSubRowOpen | fires when a sub-row(sub-grid) was opened/closed
onSyncApply | fires when data synchronization is finished
onTab | fires during the tabulation in the grid, blockable
onUndo | fires after the undo operation is implemented
onUnGroup | fires when the grid was ungrouped
onValidationCorrect | fires when validation runs successfully
onValidationError | fires when validation runs and rules execution are failed
onXLE | fires simultaneously with ending XML parsing, new items are already available in the grid
onXLS | fires before sending the request for a new XML to the server
Other
csvParser | object that controls CSV parsing
editor | reference to the cell that is in the edit state
kidsXmlFile | path to script for dyn. loading
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • addRow
    • addRowAfter
    • addRowBefore
    • addRowFromClipboard
    • adjustColumnSize
    • attachEvent
    • attachFooter
    • attachHeader
    • attachToObject
    • cellById
    • cellByIndex
    • cellToClipboard
    • cells
    • cells2
    • changePage
    • changePageRelative
    • changeRowId
    • checkAll
    • clearAll
    • clearAndLoad
    • clearChangedState
    • clearConfigCookie
    • clearSelection
    • closeItem
    • collapseAll
    • collapseAllGroups
    • collapseColumns
    • collapseGroup
    • collectTreeValues
    • collectValues
    • copyBlockToClipboard
    • copyRowContent
    • deleteChildItems
    • deleteColumn
    • deleteRow
    • deleteSelectedRows
    • destructor
    • detachEvent
    • detachFooter
    • detachHeader
    • disableUndoRedo
    • doRedo
    • doUndo
    • doesRowExist
    • editCell
    • editStop
    • enableAccessKeyMap
    • enableAlterCss
    • enableAutoHeight
    • enableAutoHiddenColumnsSaving
    • enableAutoSaving
    • enableAutoSizeSaving
    • enableAutoWidth
    • enableBlockSelection
    • enableCSVAutoID
    • enableCSVHeader
    • enableCellIds
    • enableColSpan
    • enableColumnAutoSize
    • enableColumnMove
    • enableContextMenu
    • enableDistributedParsing
    • enableDragAndDrop
    • enableDragOrder
    • enableEditEvents
    • enableEditTabOnly
    • enableExcelKeyMap
    • enableHeaderImages
    • enableHeaderMenu
    • enableKeyboardSupport
    • enableLightMouseNavigation
    • enableMarkedCells
    • enableMathEditing
    • enableMathSerialization
    • enableMercyDrag
    • enableMultiline
    • enableMultiselect
    • enableOrderSaving
    • enablePaging
    • enablePreRendering
    • enableResizing
    • enableRowsHover
    • enableRowspan
    • enableSmartRendering
    • enableSmartXMLParsing
    • enableSortingSaving
    • enableStableSorting
    • enableTooltips
    • enableTreeCellEdit
    • enableTreeGridLines
    • enableUndoRedo
    • enableValidation
    • expandAll
    • expandAllGroups
    • expandColumns
    • expandGroup
    • filterBy
    • filterByAll
    • filterTreeBy
    • findCell
    • forEachCell
    • forEachRow
    • forEachRowInGroup
    • forceFullLoading
    • forceLabelSelection
    • getAllRowIds
    • getAllSubItems
    • getCellExcellType
    • getChangedRows
    • getCheckedRows
    • getChildItemIdByIndex
    • getColIndexById
    • getColLabel
    • getColType
    • getColTypeById
    • getColWidth
    • getColumnCombo
    • getColumnId
    • getColumnLabel
    • getColumnsNum
    • getCombo
    • getCustomCombo
    • getFilterElement
    • getFooterLabel
    • getHeaderMenu
    • getItemIcon
    • getItemImage
    • getItemText
    • getLevel
    • getMarked
    • getOpenState
    • getParentId
    • getRedo
    • getRowAttribute
    • getRowData
    • getRowId
    • getRowIndex
    • getRowsNum
    • getSelectedBlock
    • getSelectedCellIndex
    • getSelectedRowId
    • getSortingState
    • getStateOfView
    • getSubItems
    • getUndo
    • getUserData
    • gridFromClipboard
    • gridToClipboard
    • gridToGrid
    • gridToTreeElement
    • groupBy
    • groupStat
    • hasChildren
    • init
    • insertColumn
    • isColumnHidden
    • load
    • loadHiddenColumnsFromCookie
    • loadOpenStates
    • loadOrderFromCookie
    • loadSizeFromCookie
    • loadSortingFromCookie
    • lockRow
    • makeFilter
    • makeSearch
    • mark
    • moveColumn
    • moveRow
    • moveRowDown
    • moveRowTo
    • moveRowUp
    • openItem
    • parse
    • pasteBlockFromClipboard
    • post
    • preventIECaching
    • printView
    • refreshComboColumn
    • refreshFilters
    • refreshMath
    • registerCList
    • rowToClipboard
    • rowToDragElement
    • saveHiddenColumnsToCookie
    • saveOpenStates
    • saveOrderToCookie
    • saveSizeToCookie
    • saveSortingToCookie
    • selectAll
    • selectBlock
    • selectCell
    • selectRow
    • selectRowById
    • serialize
    • serializeToCSV
    • setActive
    • setAwaitedRowHeight
    • setCSVDelimiter
    • setCellExcellType
    • setCellTextStyle
    • setCheckedRows
    • setColAlign
    • setColLabel
    • setColSorting
    • setColTypes
    • setColVAlign
    • setColValidators
    • setColWidth
    • setColspan
    • setColumnColor
    • setColumnExcellType
    • setColumnHidden
    • setColumnId
    • setColumnIds
    • setColumnLabel
    • setColumnMinWidth
    • setColumnsVisibility
    • setCustomSorting
    • setDateFormat
    • setDelimiter
    • setDragBehavior
    • setEditable
    • setExternalTabOrder
    • setFieldName
    • setFiltrationLevel
    • setFooterLabel
    • setHeader
    • setIconsPath
    • setIconset
    • setImageSize
    • setImagesPath
    • setInitWidths
    • setInitWidthsP
    • setItemCloseable
    • setItemIcon
    • setItemImage
    • setItemText
    • setMathRound
    • setNoHeader
    • setNumberFormat
    • setOnOpenEndHandler
    • setOnOpenStartHandler
    • setPagingSkin
    • setPagingTemplates
    • setPagingWTMode
    • setRowAttribute
    • setRowColor
    • setRowData
    • setRowExcellType
    • setRowHidden
    • setRowId
    • setRowTextBold
    • setRowTextNormal
    • setRowTextStyle
    • setRowspan
    • setSerializableColumns
    • setSerializationLevel
    • setSizes
    • setSkin
    • setSortImgState
    • setStyle
    • setSubGrid
    • setSubTree
    • setTabOrder
    • setUserData
    • showRow
    • sortRows
    • sortTreeRows
    • splitAt
    • startFastOperations
    • stopFastOperations
    • submitAddedRows
    • submitColumns
    • submitOnlyChanged
    • submitOnlyRowID
    • submitOnlySelected
    • submitSerialization
    • toExcel
    • toPDF
    • treeToGridElement
    • uid
    • unGroup
    • uncheckAll
    • unmarkAll
    • updateCellFromClipboard
    • updateFromXML
    • updateGroups
    • updateRowFromClipboard
    • validateCell
  • Events
  • Others
Start TreeGrid dhtmlXTreeGrid API

Methods

addRow | adds a row to the grid
addRowAfter | adds a new row to treeGrid, after some other row
addRowBefore | adds new row to treeGrid, before some other row
addRowFromClipboard | allows the user to add a new row from clipboard
adjustColumnSize | adjusts a column's size to make all content visible
attachEvent | adds any user-defined handler to available events
attachFooter | attaches an additional line to the footer
attachHeader | attaches an additional line to the header
attachToObject | attaches Grid to some object in DOM
cellById | gets dhtmlXGridCellObject object
cellByIndex | gets dhtmlXGridCellObject object
cellToClipboard | copies the value of a cell to the clipboard
cells | gets dhtmlXGridCellObject object
cells2 | gets dhtmlXGridCellObject object
changePage | changes the current page in grid
changePageRelative | changes the current page in grid
changeRowId | changes id of the row to the new one
checkAll | checks all checkboxes in the grid
clearAll | deletes all rows in the grid
clearAndLoad | clears the existing grid state and loads data from an external file ( xml, json, jsarray, csv )
clearChangedState | clears wasChanged state for all cells in grid (and wasAdded state as well, if called with a parameter)
clearConfigCookie | clears cookie with grid config details
clearSelection | removes selection from the grid
closeItem | collapses row
collapseAll | collapses all tree structure
collapseAllGroups | collapses all groups
collapseColumns | collapses a group of columns
collapseGroup | collapses a group of rows
collectTreeValues | gets all possible values in a column
collectValues | gets all possible values of a column
copyBlockToClipboard | copies the content of a block selection into clipboard in CSV format (delimiter as set for CSV serialization)
copyRowContent | copies a row's content to another existing row
deleteChildItems | deletes all childs of the row in question
deleteColumn | deletes a column
deleteRow | deletes a row from the grid
deleteSelectedRows | deletes selected row(s)
destructor | destructor, removes the grid and cleans used memory
detachEvent | removes an event handler
detachFooter | removes a footer line from the grid (opposite to attachFooter)
detachHeader | removes a header line from the grid (opposite to attachHeader)
disableUndoRedo | disables the Undo/Redo functionality in the grid
doRedo | executes the redo operation
doUndo | executes the undo operation
doesRowExist | determines if a row with the specified id exists
editCell | creates an Editor object and switches the selected cell to the edit mode, if allowed
editStop | returns the value from the editor(if presents) to the cell and closes the editor
enableAccessKeyMap | enables Access keyboard navigation
enableAlterCss | sets css styles for even/odd rows
enableAutoHeight | enables autoheight of the grid
enableAutoHiddenColumnsSaving | enables automatic saving of a column's state ( hidden/shown )
enableAutoSaving | enables automatic saving of size, sorting order and columns order
enableAutoSizeSaving | enables automatic size saving to cookie
enableAutoWidth | changes the size of grid's container on the fly to fit total width of grid's columns
enableBlockSelection | enables block selection mode in grid
enableCSVAutoID | enables the mode in which IDs for the rows loaded from CSV are autogenerated
enableCSVHeader | enables recognizing the first row in CSV as the header
enableCellIds | enables/disables unique ids for cells (id will be automatically created by the template: 'c_[RowId]_[colIndex]')
enableColSpan | enables/disables colspan support
enableColumnAutoSize | adjusts column size to make all content visible on the header doublclick
enableColumnMove | enables the move column functionality
enableContextMenu | enables/disables context menu
enableDistributedParsing | enables/disables distributed parsing (rows are parsed portion by portion with some timeout)
enableDragAndDrop | enables/disables drag-and-drop
enableDragOrder | switches to the mode in which dragged items drop in the target location in the same order as they were in the source grid
enableEditEvents | enables/disables events which invoke excell editing
enableEditTabOnly | enables/disables the mode when readonly cell is not available with tab
enableExcelKeyMap | enables Excel keyboard navigation
enableHeaderImages | specifies if the values passed to Header are images' file names
enableHeaderMenu | enables a popup menu which allows hidding/showing columns
enableKeyboardSupport | enables/disables hot keys in grid
enableLightMouseNavigation | enables/disables light mouse navigation mode (row selection with mouse over, editing with single click)
enableMarkedCells | sets the marked cells support to enabled/disabled state
enableMathEditing | enables/disables editing of math cells
enableMathSerialization | enables/disables serialization of math formulas
enableMercyDrag | enables drag without removing (copy instead of move)
enableMultiline | sets the multiline rows support to enabled/disabled state
enableMultiselect | sets multiselect mode to enabled or disabled state
enableOrderSaving | enables automatic column order saving to cookie
enablePaging | enables smart paging mode
enablePreRendering | enables pre-rendering rows during scrolling.
enableResizing | enables/disables resizing for specified colums
enableRowsHover | enables/disables hovering on a row on mouse over
enableRowspan | enables rowspan in treegrid
enableSmartRendering | enables smart rendering mode
enableSmartXMLParsing | enables smart xml parsing mode
enableSortingSaving | enables automatic saving of the sorting state to cookie
enableStableSorting | enables stable sorting algorithm
enableTooltips | enables/disables tooltips for specified colums
enableTreeCellEdit | enables/disables editor of tree cell; enabled by default
enableTreeGridLines | enables lines in TreeGrid
enableUndoRedo | enables the Undo/Redo functionality in grid
enableValidation | enable validation in the grid
expandAll | expands all tree structure
expandAllGroups | expands all groups
expandColumns | expands a group of columns
expandGroup | expands a group of rows
filterBy | filters Grid by mask
filterByAll | forces Grid filtering by registered inputs (created by # starting shortcuts, or by the makeFilter function)
filterTreeBy | filters treegrid by mask
findCell | finds cell in grid by value
forEachCell | executes the code for each cell in a row
forEachRow | executes code for each row in the grid
forEachRowInGroup | iterates through all rows in some group
forceFullLoading | loads all data in the grid, which is in dyn. srnd or dyn. paging mode
forceLabelSelection | affects block selection, so it will copy/paste only the visible text, not the values behind
getAllRowIds | gets the list of all row ids in the grid
getAllSubItems | gets the list of ids of all nested rows
getCellExcellType | returns the excell type of the cell in question
getChangedRows | gets the list of IDs of the changed rows
getCheckedRows | gets the list of ids of all the rows with checked exCell in the specified column
getChildItemIdByIndex | gets the id of a child item in the specified position
getColIndexById | gets column index by column id
getColLabel | gets the label of the column specified by index
getColType | gets column type by column index
getColTypeById | gets the column type by its ID
getColWidth | gets the width of the specified column in pixels
getColumnCombo | returns dhtmlXCombo column object
getColumnId | gets the id of the column specified by index
getColumnLabel | gets the label of the column specified by index
getColumnsNum | returns the number of columns in the grid (including [hidden columns](setColumnHidden))
getCombo | gets Combo object of the specified column
getCustomCombo | gets the combobox specific for the cell in question
getFilterElement | gets the input object of the filter linked to the column in question
getFooterLabel | gets the label of the footer specified by index
getHeaderMenu | returns dhtmlXMenu object of the grid header menu
getItemIcon | returns the font awesome icon of an item
getItemImage | gets the image of the tree col
getItemText | gets real caption of tree col
getLevel | returns the level of a TreeGrid row
getMarked | returns an array of marked cells (pairs of row id and column index)
getOpenState | returns open/close state of the row
getParentId | returns id of the parent row
getRedo | gets length of available ReDo operations
getRowAttribute | returns the row attribute's value which was set in the XML tag
getRowData | returns the row data
getRowId | gets the row id by the row index
getRowIndex | gets the row index by the row id (grid only)
getRowsNum | returns the number of rows in the grid (in case of dynamic mode it will return an expected number of rows)
getSelectedBlock | returns the attributes of the current block selection
getSelectedCellIndex | returns the index of the selected cell or -1, if there is no selected cell
getSelectedRowId | returns the id of the selected row (a list of ids with default delimiter) or null, if there are no selected rows
getSortingState | gets the sorting state of the grid
getStateOfView | returns details about current grid state
getSubItems | returns a list of child rows ids, separated by comma
getUndo | gets length of available UnDo operations
getUserData | gets user data
gridFromClipboard | initializes grid from CSV stored in the clipboard
gridToClipboard | copies grid in CSV to the clipboard
gridToGrid | redefine this method in your code to specify how grid row values should be used in another grid
gridToTreeElement | redefine this method in your code to define how grid row values should be used in tree
groupBy | groups grid content by values of the specified column
groupStat | returns the result of aggregation for a column
hasChildren | returns the number of the row's children
init | initializes grid
insertColumn | adds a new column to the grid
isColumnHidden | gets the shown/hidden status of the column
load | loads data from an external file ( xml, json, jsarray, csv )
loadHiddenColumnsFromCookie | loads the sorting order from cookie
loadOpenStates | loads open state of TreeGrid into cookie
loadOrderFromCookie | loads sorting order from cookie
loadSizeFromCookie | loads grid layout from cookie
loadSortingFromCookie | loads sorting order from cookie
lockRow | locks/unlocks a row for editing
makeFilter | makes a filter from any input element (text filter), select (dropdown) or DIV (combobox based on dhtmlxCombo)
makeSearch | makes a search box (sets selection on the row with the found value) from any input
mark | marks/unmarks the specified cell
moveColumn | moves the column of the specified index to a new position
moveRow | moves a row
moveRowDown | moves a row one position down, if possible
moveRowTo | moves a row
moveRowUp | moves a row one position up, if possible
openItem | expands the specified row
parse | loads data from a local data source (XML string, CSV string, XML island, XML object, JSON object, javascript array)
pasteBlockFromClipboard | pastes the content of the clipboard into a block selection of the grid
post | allows sending POST requests by loading data from external file ( xml, json, jsarray, csv )
preventIECaching | prevents caching in IE by adding random values to URL string
printView | generates the print friendly view
refreshComboColumn | updates the cells of the combo column
refreshFilters | refreshes the lists of values in all the filters created by shortcuts or by makeFilter calls
refreshMath | restores math after column moving
registerCList | registers an array of options for a multiselect column ("clist") of the grid
rowToClipboard | copies the value of a row to the clipboard
rowToDragElement | redefine this method in your code to specify how grid row values should be displayed during the dragging
saveHiddenColumnsToCookie | saves hidden columns to cookie
saveOpenStates | stores open state of TreeGrid in cookie
saveOrderToCookie | saves the columns' order to cookie
saveSizeToCookie | saves grid layout to cookie
saveSortingToCookie | saves the sorting order to cookie
selectAll | selects all rows in the grid, doesn't trigger any events
selectBlock | selects a block in the Grid, according to the specified rows' ids and columns' indexes
selectCell | sets selection to the specified row-cell
selectRow | selects a row (and its first cell)
selectRowById | selects row by ID
serialize | gets actual xml of the grid
serializeToCSV | serializes to CSV string
setActive | sets the grid active to make key navigation possible
setAwaitedRowHeight | applies a custom height of a row which will be used in the smart rendering mode for row calculation
setCSVDelimiter | changes csv delimiter
setCellExcellType | sets an excell type for the cell in question
setCellTextStyle | sets a style for a cell
setCheckedRows | sets a value for all checkboxes in the specified column
setColAlign | aligns values in columns
setColLabel | sets a new label for the column header
setColSorting | sets the types of column sort
setColTypes | sets column types
setColVAlign | sets vertical align for columns
setColValidators | assigns validators to the related column
setColWidth | sets the width for the specified column in pixels (doesn't work with the percentage based grid)
setColspan | dynamically sets colspan in a row starting from the specified column index
setColumnColor | colors the background of columns
setColumnExcellType | sets an excell type for all the cells in the specified column
setColumnHidden | hides/shows a column
setColumnId | sets id for the specified column
setColumnIds | sets id for every column
setColumnLabel | sets a new column header label
setColumnMinWidth | sets the minimum column width (works only for manual resizing)
setColumnsVisibility | sets the list of visible/hidden columns
setCustomSorting | sets a custom sorting
setDateFormat | sets a mask for date formatting in the grid (works for "dhxCalendar" and "dhxCalendarA" types only)
setDelimiter | sets a delimiter character used in list values (default is ",")
setDragBehavior | sets Drag-And-Drop behavior
setEditable | manages the editability of the grid
setExternalTabOrder | sets elements which get focus when the Tab button is pressed in the last or in the first (Tab+Shift) cell
setFieldName | allows defining an input's name which will be used for data sending,
setFiltrationLevel | allows to define which level of tree must be used for filtering
setFooterLabel | sets a new label for a cell in the footer
setHeader | sets the header label and default params for new headers
setIconsPath | sets the path to external images used in the grid (tree and img column type)
setIconset | sets the font awesome iconset
setImageSize | sets size of treegrid images
setImagesPath | defines the path to the imgs folder
setInitWidths | sets the width of columns in pixels
setInitWidthsP | sets the width of columns in percents
setItemCloseable | enables/disables closing of row
setItemIcon | sets a Font Awesome icon for an item
setItemImage | sets image of tree col
setItemText | sets real caption of tree col
setMathRound | enables/disables rounding during the math calculations
setNoHeader | creates a grid without header
setNumberFormat | sets a mask for formatting numeric data (works for **"edn"**, **"ron"** excell only)
setOnOpenEndHandler | sets function called after tree node opened/closed
setOnOpenStartHandler | sets function called before tree node opened/closed
setPagingSkin | allows setting a custom paging skin
setPagingTemplates | allows setting paging templates for the default skin
setPagingWTMode | configures the paging with toolbar mode
setRowAttribute | sets a row attribute
setRowColor | sets the background color of a row (via the bgcolor attribute)
setRowData | sets new data for row's columns
setRowExcellType | sets an excell type for all cells in the specified row
setRowHidden | hides/shows a row
setRowId | sets a new id for a row by its index
setRowTextBold | sets the text of a row BOLD
setRowTextNormal | sets the text weight of a row to normal
setRowTextStyle | sets the style of a row
setRowspan | sets rowspan of the specified length starting from the specified cell
setSerializableColumns | specifies which column must be serialized (if you don't use this method, all columns will be serialized)
setSerializationLevel | configures XML serialization
setSizes | resets sizes of the grid's elements
setSkin | sets one of the predefined css styles (xp, mt, gray, light, clear, modern, sb_dark)
setSortImgState | sets the position and visibility of a sort arrow
setStyle | modifies the default style of the grid and its elements
setSubGrid | attaches a grid-like editor to a grid's column
setSubTree | attaches a tree-like editor to a grid's column
setTabOrder | sets the tab order of columns
setUserData | sets user data for a row
showRow | scrolls a grid to make the specified row visible
sortRows | sorts the Grid by the specified column
sortTreeRows | sorts TreeGrid by the specified column
splitAt | splits the grid
startFastOperations | starts the fast operation mode
stopFastOperations | turns off the fast operation mode, needs to be executed to normalize the view
submitAddedRows | includes additional data with the info about which rows were added and which ones deleted, enabled by default
submitColumns | sets the list of columns the data of which will be updated
submitOnlyChanged | includes only the changed rows into the form submit
submitOnlyRowID | includes only rows' IDS into the form submit
submitOnlySelected | includes only the selected rows into the form submit
submitSerialization | includes a serialized grid as a part of the form submit
toExcel | exports data from dhtmxlGrid to an Excel document
toPDF | exports data from dhtmxlGrid to a PDF document
treeToGridElement | redefine this method in your code to specify how tree node values should be used in the grid
uid | returns the unique ID
unGroup | ungroups the grid to return it into the plain view
uncheckAll | unchecks all checkboxes of the grid
unmarkAll | removes selection from all the marked cells
updateCellFromClipboard | sets the value of a cell from the clipboard
updateFromXML | refreshes grid from XML (doesn't work for buffering, tree grid or rows in smart rendering mode)
updateGroups | forces grid grouping by registered parameters
updateRowFromClipboard | sets the value of a row from the clipboard
validateCell | forces validation of a specific cell
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addRow DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

addRow

adds a row to treegrid

void addRow(string|number new_id,array text,number ind,string|number parent_id,string img,boolean child);

Parameters

new_id | string|number | new row id
text | array | an array of cell labels in a row
ind | number | position of a row (set to null, for using parentId)
parent_id | string|number | id of the parent row
img | string | img url for new row
child | boolean | child flag (optional)

Example

myTreeGrid.addRow("new_id",["col1_value","col2_value","col3_value"],0,"parent_row",
"folder.img",true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addRowAfter DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

addRowAfter

adds a new row to treeGrid, after some other row

void addRowAfter(string|number new_id,array text,string|number sibl_id,string img,boolean child);

Parameters

new_id | string|number | new row id
text | array | an array of cell labels in a row
sibl_id | string|number | id of row, related to which new one will be added
img | string | img url for new row
child | boolean | child flag (optional)

Example

myTreeGrid.addRowAfter("new_id",["col1_value","col2_value","col3_value"],"row_id",
"folder.img",true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addRowBefore DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

addRowBefore

adds new row to treeGrid, before some other row

void addRowBefore(string|number new_id,array text,string|number sibl_id,string img,boolean child);

Parameters

new_id | string|number | new row id
text | array | an array of cell labels in a row
sibl_id | string|number | id of row, related to which new one will be added
img | string | img url for new row
child | boolean | child flag [optional]

Available only in PRO Edition

Example

myTreeGrid.addRowBefore("new_id",["col1_value","col2_value","col3_value"],"row_id",
"folder.img",true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addRowFromClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

addRowFromClipboard

allows the user to add a new row from clipboard

void addRowFromClipboard();

Available only in PRO Edition

Example

myTreeGrid.addRowFromClipboard();

Details

A new row is being added to the last position in the grid

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


adjustColumnSize DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

adjustColumnSize

adjusts a column's size to make all content visible

void adjustColumnSize(number cInd);

Parameters

cInd number index of a column

Example

//adjust the first column's size
myTreeGrid.adjustColumnSize(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

attachEvent

adds any user-defined handler to available events

void attachEvent(string evName,function evHandler);

Parameters

evName | string | an event's name
evHandler | function | a user-defined event handler

Example

myTreeGrid.attachEvent("onRowSelect",function(rowId,cellIndex){
    alert("Row with id="+rowId+" was selected");
});

Details
  • return 'true' - confirms the action
  • return 'false' - denies the action
  • if there is no "return" command, it is treated as return 'false'
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachFooter DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

attachFooter

attaches an additional line to the footer

void attachFooter(array values, [array style] );

Parameters

values | array | array of header titles
style | array | array of styles, optional

Available only in PRO Edition

Example

//plain usage
myTreeGrid.attachFooter("A,B,C,D");
//alternative syntax
myTreeGrid.attachFooter(["A","B","C","D"])
//colspans in the footer
myTreeGrid.attachFooter("A,#cspan,C,#cspan");
//rowspans in the footer
myTreeGrid.attachFooter("A,#rspan,C,#rspan");
//styles assigned
myTreeGrid.attachFooter("A,B,C,D",["","color:red;","",""]);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHeader DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

attachHeader

attaches an additional line to the header

void attachHeader(array values, [array style] );

Parameters

values | array | array of header titles
style | array | array of styles, optional

Example

//plain usage
myTreeGrid.attachHeader("A,B,C,D");
//alternative syntax
myTreeGrid.attachHeader(["A","B","C","D"])
//colspans in header
myTreeGrid.attachHeader("A,#cspan,C,#cspan");
//rowspans in header
myTreeGrid.attachHeader("A,#rspan,C,#rspan");
//styles assigned
myTreeGrid.attachHeader("A,B,C,D",["","color:red;","",""]);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToObject DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

attachToObject

attaches Grid to some object in DOM

void attachToObject(object obj);

Parameters

obj object object to attach Grid to

Example

myTreeGrid.attachToObject(obj);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cellById DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

cellById

gets dhtmlXGridCellObject object

void cellById(string|number row_id,number col_ind);

Parameters

row_id | string|number | row id
col_ind | number | column index

Example

var cellObj = myTreeGrid.cellById(row_id, col);

Details

If there are no arguments, the method gets dhtmlXGridCellObject object of the currently selected cell

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cellByIndex DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

cellByIndex

gets dhtmlXGridCellObject object

void cellByIndex(number row_ind,number col_ind);

Parameters

row_ind | number | row index
col_ind | number | column index

Example

var cellObj = myTreeGrid.cellByIndex(row_index, col);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cellToClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

cellToClipboard

copies the value of a cell to the clipboard

void cellToClipboard( [string|number rowId,number cellInd] );

Parameters

rowId | string|number | row id (optional, uses selected row by default)
cellInd | number | column index (optional, uses selected cell by default)

Available only in PRO Edition

Example

//minimal parameters set
myTreeGrid.cellToClipboard();
//maximal parameters set
myTreeGrid.cellToClipboard("rowID",0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cells DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

cells

gets dhtmlXGridCellObject object

dhtmlXCellObject cells(string|number row_id,number col);

Parameters

row_id | string|number | row id
col | number | column index

Returns

dhtmlXCellObject object of the specified cell

Example

var cellObj = myTreeGrid.cells(row_id, col);

Details

If there are no arguments, the method gets dhtmlXGridCellObject object of the currently selected cell

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cells2 DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

cells2

gets dhtmlXGridCellObject object

dhtmlXCellObject cells2(number row_index,number col);

Parameters

row_index | number | row index
col | number | column index

Returns

dhtmlXCellObject object of the specified cell

Example

var cellObj = myTreeGrid.cells2(row_index, col);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


changePage DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

changePage

changes the current page in grid

void changePage(number pageNum);

Parameters

pageNum number a new active page

Available only in PRO Edition

Example

//go to the 5th page
myTreeGrid.changePage(5);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


changePageRelative DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

changePageRelative

changes the current page in treegrid

void changePageRelative(number ind);

Parameters

ind number correction ( -1,1,2, etc.) to the currently active page

Available only in PRO Edition

Example

<a href="javascript:void(0)" onclick="myTreeGrid.changePageRelative(-1)">Previous page</a>
<a href="javascript:void(0)" onclick="myTreeGrid.changePageRelative(1)">Next page</a>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


changeRowId DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

changeRowId

changes id of the row to the new one

void changeRowId(string|number oldRowId,string|number newRowId);

Parameters

oldRowId | string|number | row id to change
newRowId | string|number | row id to set

Example

myTreeGrid.changeRowId("old_rowID","new_rowID");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


checkAll DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

checkAll

checks all checkboxes in the grid

void checkAll(boolean mode);

Parameters

mode boolean {true/false} check

Example

//check all checkboxes in grid
myTreeGrid.checkAll(true);
//uncheck all checkboxes in grid
myTreeGrid.checkAll(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearAll DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

clearAll

deletes all rows in the grid

void clearAll(boolean header);

Parameters

header boolean enable/disable cleaning header

Example

//delete all rows from the grid
myTreeGrid.clearAll();
//delete all rows from the grid, clear header
myTreeGrid.clearAll(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearAndLoad DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

clearAndLoad

clears the existing grid state and loads data from an external file ( xml, json, jsarray, csv )

void clearAndLoad(string url, [function call,string type] );

Parameters

url | string | url to an external file
call | function | after loading callback function, optional
type | string | type of data (xml,csv,json,jsarray), optional, XML by default

Example

//clear grid and load new data
myTreeGrid.clearAndLoad("grid_new.xml");
//clear grid, load new data, execute doAfterRefresh() function after grid was loaded
myTreeGrid.clearAndLoad("grid_new.xml",doAfterRefresh);
//clear grid, load new data in csv format, execute doAfterRefresh() function after grid was loaded
myTreeGrid.clearAndLoad("grid_new.csv",doAfterRefresh,csv);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearChangedState DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

clearChangedState

clears wasChanged state for all cells in grid (and wasAdded state as well, if called with a parameter)

void clearChangedState(boolean mode);

Parameters

mode boolean true - to clear the wasAdded state

Available only in PRO Edition

Example

myTreeGrid.clearChangedState();

Change log

the mode param added in the version 5.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearConfigCookie DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

clearConfigCookie

clears cookie with grid config details

void clearConfigCookie( [string name] );

Parameters

name string optional,cookie name

Available only in PRO Edition

Example

<button onclick="myTreeGrid.clearConfigCookie()">Clear cookies</button>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearSelection DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

clearSelection

removes selection from the grid

void clearSelection();

Example

myTreeGrid.clearSelection();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


closeItem DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

closeItem

collapses row

void closeItem(string|number rowId);

Parameters

rowId string|number id of row

Example

myTreeGrid.closeItem(rowId)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


collapseAll DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

collapseAll

collapses all tree structure

void collapseAll();

Example

myTreeGrid.collapseAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


collapseAllGroups DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

collapseAllGroups

collapses all groups

void collapseAllGroups();

Available only in PRO Edition

Example

myTreeGrid.collapseAllGroups();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


collapseColumns DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

collapseColumns

collapses a group of columns

void collapseColumns(number cInd);

Parameters

cInd number index of the first column in the group

Available only in PRO Edition

Example

//collapse the group of columns
myTreeGrid.collapseColumns(3); //can be called after the init only

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


collapseGroup DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

collapseGroup

collapses a group of rows

void collapseGroup(string val);

Parameters

val string a value used to determine what group to collapse (in other words, this should be a value common for all of them)

Available only in PRO Edition

Example

//collapse "John Grisham" group
myTreeGrid.collapseGroup('John Grisham');

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


collectTreeValues DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

collectTreeValues

gets all possible values in a column

array collectTreeValues(number column);

Parameters

column number zero based index of column

Returns

array an array of all possible values in a column

Example

var values=myTreeGrid.collectTreeValues(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


collectValues DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

collectValues

gets all possible values of a column

array collectValues(number column);

Parameters

column number zero based index of column

Returns

array an array of all possible values of a column

Example

//collect possible values in the 2nd column
var values=myTreeGrid.collectValues(1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


copyBlockToClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

copyBlockToClipboard

copies the content of a block selection into clipboard in CSV format (delimiter as set for CSV serialization)

void copyBlockToClipboard();

Example

myTreeGrid.attachEvent("onKeyPress",onKeyPressed);
...
function onKeyPressed(code,ctrl,shift){
    if(code==67&&ctrl){
        myTreeGrid.setCSVDelimiter("t");
        myTreeGrid.copyBlockToClipboard()
    }
    if(code==86&&ctrl){
        myTreeGrid.pasteBlockFromClipboard()
    }
    return true;
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


copyRowContent DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

copyRowContent

copies a row's content to another existing row

void copyRowContent(string|number from_row,string|number to_row_id);

Parameters

from_row | string|number | id of the row to copy content from
to_row_id | string|number | of the row to copy content to

Example

myTreeGrid.copyRowContent("from_row_id","to_row_id");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


deleteChildItems DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

deleteChildItems

deletes all childs of the row in question

void deleteChildItems(string|number rowId);

Parameters

rowId string|number id of row

Example

myTreeGrid.deleteChildItems(5);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


deleteColumn DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

deleteColumn

deletes a column

void deleteColumn(number ind);

Parameters

ind number index of column

Available only in PRO Edition

Example

//delete first column
myTreeGrid.deleteColumn(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


deleteRow DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

deleteRow

deletes a row from the grid

void deleteRow(string|number row_id);

Parameters

row_id string|number row ID

Example

//delete row with id "row1"
myTreeGrid.deleteRow("row1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


deleteSelectedRows DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

deleteSelectedRows

deletes selected row(s)

void deleteSelectedRows();

Example

myTreeGrid.deleteSelectedRows();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


destructor DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

destructor

destructor, removes the grid and cleans used memory

void destructor();

Example

myTreeGrid.destructor();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

detachEvent

removes an event handler

void detachEvent(string id);

Parameters

id string event id

Example

myTreeGrid.detachEvent(id); // unique id of the event handler

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachFooter DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

detachFooter

removes a footer line from the grid (opposite to attachFooter)

void detachFooter(number index);

Parameters

index number index of the footer

Available only in PRO Edition

Example

myTreeGrid.detachFooter(0); //detach first footer's line

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachHeader DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

detachHeader

removes a header line from the grid (opposite to attachHeader)

void detachHeader(number index);

Parameters

index number index of the row to be removed ( zero-based )

Example

myTreeGrid.detachHeader(0); //detach the first header's line

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disableUndoRedo DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

disableUndoRedo

disables the Undo/Redo functionality in the grid

void disableUndoRedo();

Available only in PRO Edition

Example

myTreeGrid.disableUndoRedo();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


doRedo DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

doRedo

executes the redo operation

void doRedo();

Available only in PRO Edition

Example

myTreeGrid.doRedo();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


doUndo DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

doUndo

executes the undo operation

void doUndo();

Available only in PRO Edition

Example

myTreeGrid.doUndo();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


doesRowExist DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

doesRowExist

determines if a row with the specified id exists

void doesRowExist(string|number row_id);

Parameters

row_id string|number row id

Example

var exist=myTreeGrid.doesRowExist("some_row_ID");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


editCell DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

editCell

creates an Editor object and switches the selected cell to the edit mode, if allowed

void editCell();

Example

myTreeGrid.selectCell(rowIndex,cellIndex);
myTreeGrid.editCell();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


editStop DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

editStop

returns the value from the editor(if presents) to the cell and closes the editor

void editStop(boolean ode);

Parameters

ode boolean if true - current edit value will be reverted to the previous one

Example

//close opened editor and return value from editor to the cell
myTreeGrid.editStop();
//close opened editor and revert cell value to the previous one
myTreeGrid.editStop(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAccessKeyMap DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableAccessKeyMap

enables Access keyboard navigation

void enableAccessKeyMap();

Available only in PRO Edition

Example

myGrid.enableAccessKeyMap();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAlterCss DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableAlterCss

sets css styles for even/odd rows

void enableAlterCss(string cssE,string cssU, [boolean perLevel,boolean levelUnique] );

Parameters

cssE | string | name of css class for even rows
cssU | string | name of css class for odd rows
perLevel | boolean | true|false - mark rows not by order, but by level in treegrid (optional, default value: true - treeGrid, false - Grid)
levelUnique | boolean | true|false - creates additional unique css class based on the row level (optional, false by default)

Example

.even{
    background-color:#22FF44;
}
.uneven{
    background-color:#41964e;
}

//a minimal parameters' set:
myTreeGrid.enableAlterCss("even","uneven");
//disable even/odd rows in the grid:
myTreeGrid.enableAlterCss("","");
//color rows in treeGrid by order:
myTreeGrid.enableAlterCss("even","uneven",false,false);
//color rows in treeGrid by level,each row level will have a unique class
//(even_0 - 1st level, uneven_1 - 2nd level, even_2 - 3rd level, etc.)
myTreeGrid.enableAlterCss("even","uneven",true,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoHeight DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableAutoHeight

enables autoheight of the grid

void enableAutoHeight(boolean mode,number maxHeight,boolean countFullHeight);

Parameters

mode | boolean | true/false
maxHeight | number | maximum height before scrolling appears (no limit by default)
countFullHeight | boolean | control usage of maxHeight param:if true,all grid height included in max height calculation,if false(default)-only data part(no header)of the grid included in it

Example

//enable auto height mode
myTreeGrid.enableAutoHeight(true);
//disable auto height mode
myTreeGrid.enableAutoHeight(false);
//enable auto height mode, set maximum height before scrolling appears,
//only data part included in max height calculation
myTreeGrid.enableAutoHeight(true,100);
//enable auto height mode, set maximum height before scrolling appears,
//all grid height included in max height calculation
myTreeGrid.enableAutoHeight(true,100,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoHiddenColumnsSaving DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableAutoHiddenColumnsSaving

enables automatic saving of a column's state ( hidden/shown )

void enableAutoHiddenColumnsSaving( [string name,string cookie_param] );

Parameters

name | string | optional, cookie name
cookie_param | string | optional, additional parameters added to cookie

Available only in PRO Edition

Example

//minimal parameters' set
myTreeGrid.enableAutoHiddenColumnsSaving();
//maximal parameters' set
myTreeGrid.enableAutoHiddenColumnsSaving(
    "some_name",
    "expires=Fri,31-Dec-2010 23:59:59 GMT"
);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoSaving DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableAutoSaving

enables automatic saving of size, sorting order and columns order

void enableAutoSaving(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

//minimal parameters' set
myTreeGrid.enableAutoSaving();
//maximal parameters' set
myTreeGrid.enableAutoSaving("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");

Details

If you need to save hidden columns as well, you should use the enableAutoHiddenColumnsSaving() in addition to this command.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoSizeSaving DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableAutoSizeSaving

enables automatic size saving to cookie

void enableAutoSizeSaving(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

//minimal parameters set
myTreeGrid.enableAutoSizeSaving();
//maximal parameters set
myTreeGrid.enableAutoSizeSaving("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoWidth DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableAutoWidth

changes the size of grid's container on the fly to fit total width of grid's columns

void enableAutoWidth(boolean mode,number max_limit,number min_limit);

Parameters

mode | boolean | true/false - enable / disable
max_limit | number | max allowed width, not limited by default
min_limit | number | min allowed width, not limited by default

Example

//enable auto width mode
myTreeGrid.enableAutoWidth(true);
//disable auto width mode
myTreeGrid.enableAutoWidth(true);
//enable auto width mode, set the maximal and minimal allowed width
myTreeGrid.enableAutoWidth(true,600,100);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableBlockSelection DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableBlockSelection

enables block selection mode in grid

void enableBlockSelection(boolean mode);

Parameters

mode boolean enable/disable block selection (optional, true by default)

Example

//enable block selection
myTreeGrid.enableBlockSelection(true);
//disable block selection
myTreeGrid.enableBlockSelection(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableCSVAutoID DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableCSVAutoID

enables the mode in which IDs for the rows loaded from CSV are autogenerated

void enableCSVAutoID(boolean mode);

Parameters

mode boolean true/false

Available only in PRO Edition

Example

//enable autogenerated rows IDs for the CSV loading
myTreeGrid.enableCSVAutoID(true);
//disable autogenerated rows IDs for the CSV loading
myTreeGrid.enableCSVAutoID(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableCSVHeader DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableCSVHeader

enables recognizing the first row in CSV as the header

void enableCSVHeader(boolean mode);

Parameters

mode boolean true/false

Available only in PRO Edition

Example

//enable recognizing first row in CSV as header
myTreeGrid.enableCSVHeader(true);
//disable recognizing first row in CSV as header
myTreeGrid.enableCSVHeader(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableCellIds DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableCellIds

enables/disables unique ids for cells (id will be automatically created by the template: 'c_[RowId]_[colIndex]')

void enableCellIds(boolean mode);

Parameters

mode boolean enable/disable unique ids for cells

Example

//enable unique ids for cells
myTreeGrid.enableCellIds(true);
//disable unique ids for cells
myTreeGrid.enableCellIds(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableColSpan DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableColSpan

enables/disables colspan support

void enableColSpan(boolean mode);

Parameters

mode boolean enable/disable colspan support

Available only in PRO Edition

Example

//enable colspan mode
myTreeGrid.enableColSpan(true);
//disable colspan mode
myTreeGrid.enableColSpan(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableColumnAutoSize DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableColumnAutoSize

adjusts column size to make all content visible on the header doublclick

void enableColumnAutoSize(boolean mode);

Parameters

mode boolean true/false

Example

myTreeGrid.enableColumnAutoSize(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableColumnMove DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableColumnMove

enables the move column functionality

void enableColumnMove(boolean mode,string columns);

Parameters

mode | boolean | true/false
columns | string | list of true/false values, optional

Available only in PRO Edition

Example

//minimal parameters set
myTreeGrid.enableColumnMove(true);
//maximal parameters set
myTreeGrid.enableColumnMove(true,"false,true,true,true,true,true");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableContextMenu DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableContextMenu

enables/disables context menu

void enableContextMenu(object menu);

Parameters

menu object dhtmlxMenu object, if null - context menu will be disabled

Example

var menu = new dhtmlXMenuObject(null, "standard");
...
myTreeGrid.enableContextMenu(menu);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDistributedParsing DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableDistributedParsing

enables/disables distributed parsing (rows are parsed portion by portion with some timeout)

void enableDistributedParsing(boolean mode,number count,number time);

Parameters

mode | boolean | true/false
count | number | count of nodes parsed by a step (optional, 10 by default)
time | number | time between parsing counts in milliseconds (optional, 250 by default)

Available only in PRO Edition

Example

//enable distributed parsing mode
myTreeGrid.enableDistributedParsing(true);
//enable distributed parsing mode, parse 50 nodes by one step,
//parse nodes with a 2 seconds delay
myTreeGrid.enableDistributedParsing(true,50,2000);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDragAndDrop DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableDragAndDrop

enables/disables drag-and-drop

void enableDragAndDrop(boolean mode);

Parameters

mode boolean enables/disables drag-and-drop support

Example

//enable drag-and-drop
myTreeGrid.enableDragAndDrop(true);
//disable drag-and-drop
myTreeGrid.enableDragAndDrop(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDragOrder DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableDragOrder

switches to the mode in which dragged items drop in the target location in the same order as they were in the source grid

void enableDragOrder(boolean mode);

Parameters

mode boolean true|false to enable/disable mode

Example

//enable drag order
myTreeGrid.enableDragOrder(true);
//disable drag order
myTreeGrid.enableDragOrder(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableEditEvents DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableEditEvents

enables/disables events which invoke excell editing

void enableEditEvents(boolean click,boolean dblclick,boolean f2Key);

Parameters

click | boolean | enable/disable editing by single click
dblclick | boolean | enable/disable editing by double click
f2Key | boolean | enable/disable editing by pressing F2 key

Example

//enable editing by single click and by pressing F2 key,disable editing by double click
myTreeGrid.enableEditEvents(true,false,true);

Details

mutually exclusive with the enableLightMouseNavigation() method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableEditTabOnly DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableEditTabOnly

enables/disables the mode when readonly cell is not available with tab

void enableEditTabOnly(boolean state);

Parameters

state boolean true/false to enable/disable the mode

Example

//enable mode when readonly cell is not available with tab
myTreeGrid.enableEditTabOnly(true);
//disable mode when readonly cell is not available with tab
myTreeGrid.enableEditTabOnly(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableExcelKeyMap DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableExcelKeyMap

enables Excel keyboard navigation

void enableExcelKeyMap();

Available only in PRO Edition

Example

myGrid.enableExcelKeyMap();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableHeaderImages DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableHeaderImages

specifies if the values passed to Header are images' file names

void enableHeaderImages(boolean mode);

Parameters

mode boolean true to treat column header values as image names

Example

//enable header images
myTreeGrid.enableHeaderImages(true);
//disable header images
myTreeGrid.enableHeaderImages(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableHeaderMenu DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableHeaderMenu

enables a popup menu which allows hidding/showing columns

void enableHeaderMenu(string list);

Parameters

list string a comma-separated string of true/false values (true means that the related column will be shown)

Available only in PRO Edition

Example

myTreeGrid.enableHeaderMenu("false,true,false,false");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableKeyboardSupport DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableKeyboardSupport

enables/disables hot keys in grid

void enableKeyboardSupport(boolean mode);

Parameters

mode boolean true/false (true by default)

Example

//enable hot keys in grid
myTreeGrid.enableKeyboardSupport(true);
//disable hot keys in grid
myTreeGrid.enableKeyboardSupport(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableLightMouseNavigation DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableLightMouseNavigation

enables/disables light mouse navigation mode (row selection with mouse over, editing with single click)

void enableLightMouseNavigation(boolean mode);

Parameters

mode boolean true/false

Example

//enable light mouse navigation
myTreeGrid.enableLightMouseNavigation(true);
//disable light mouse navigation
myTreeGrid.enableLightMouseNavigation(false);

Details

mutually exclusive with the enableEditEvents method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMarkedCells DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableMarkedCells

sets the marked cells support to enabled/disabled state

void enableMarkedCells(boolean mode);

Parameters

mode boolean enable/disable marked cells support

Available only in PRO Edition

Example

//enable marked cells
myTreeGrid.enableMarkedCells(true);
//disable marked cells
myTreeGrid.enableMarkedCells(false);

Details

the user will be able to select single cell instead of selecting the whole row

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMathEditing DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableMathEditing

enables/disables editing of math cells

void enableMathEditing(boolean mode);

Parameters

mode boolean enable/disable editing of math cells

Available only in PRO Edition

Example

//enable editing of math cells
myTreeGrid.enableMathEditing(true);
//disable editing of math cells
myTreeGrid.enableMathEditing(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMathSerialization DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableMathSerialization

enables/disables serialization of math formulas

void enableMathSerialization(boolean mode);

Parameters

mode boolean enable/disable math formulas serialization

Available only in PRO Edition

Example

//enable math formulas serialization
myTreeGrid.enableMathSerialization(true);
//disable math formulas serialization
myTreeGrid.enableMathSerialization(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMercyDrag DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableMercyDrag

enables drag without removing (copy instead of move)

void enableMercyDrag(boolean mode);

Parameters

mode boolean enable/disable mode

Available only in PRO Edition

Example

//enable mercy drag
myTreeGrid.enableMercyDrag(true);
//disable mercy drag
myTreeGrid.enableMercyDrag(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMultiline DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableMultiline

sets the multiline rows support to enabled/disabled state

void enableMultiline(boolean state);

Parameters

state boolean enable/disable multi line mode

Example

//enable multi line mode
myTreeGrid.enableMultiline(true);
//disable multi line mode
myTreeGrid.enableMultiline(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMultiselect DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableMultiselect

sets multiselect mode to enabled or disabled state

void enableMultiselect(boolean state);

Parameters

state boolean true or false

Example

//enable multi select mode
myTreeGrid.enableMultiselect(true);
//disable multi select mode
myTreeGrid.enableMultiselect(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableOrderSaving DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableOrderSaving

enables automatic column order saving to cookie

void enableOrderSaving(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

//minimal parameters set
myTreeGrid.enableOrderSaving();
//maximal parameters set
myTreeGrid.enableOrderSaving("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enablePaging DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enablePaging

enables smart paging mode

void enablePaging(boolean mode,number pageSize,number pagesInGrp,id|HTMLElement pagingControlsContainer,boolean showRecInfo,id|HTMLElement pagingStateContainer);

Parameters

mode | boolean | enable/disable paging mode
pageSize | number | count of rows per page
pagesInGrp | number | count of visible page selectors
pagingControlsContainer | id|HTMLElement | ID or container which will be used for showing paging controls
showRecInfo | boolean | enable/disable showing of additional info about paging state
pagingStateContainer | id|HTMLElement | ID or container which will be used for showing paging state

Available only in PRO Edition

Example

//enable paging with 10 rows per page
myTreeGrid.enablePaging(true,10,5,"pagingArea",true,"recinfoArea");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enablePreRendering DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enablePreRendering

enables pre-rendering rows during scrolling.

void enablePreRendering(number buffer);

Parameters

buffer number count of rows to pre-render

Example

myTreeGrid.enablePreRendering(50);

Details

makes scrolling smoother but with a small drop in overall perfomance

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableResizing DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableResizing

enables/disables resizing for specified colums

void enableResizing(string list);

Parameters

list string a list of true/false values separated by the default delimiter (comma)

Example

//disable resizing of the first column
myTreeGrid.enableResizing("false,true,true,true,true,true,true");

Details

resizing enabled for all columns by default

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableRowsHover DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableRowsHover

enables/disables hovering on a row on mouse over

void enableRowsHover(boolean mode,string cssClass);

Parameters

mode | boolean | true/false
cssClass | string | css class for hovering on a row

Example

.hover {
    background-color: navy;
}

myTreeGrid.enableRowsHover(true,"hover");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableRowspan DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableRowspan

enables rowspan in treegrid

void enableRowspan();

Available only in PRO Edition

Example

myTreeGrid.enableRowspan();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableSmartRendering DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableSmartRendering

enables smart rendering mode

void enableSmartRendering(boolean mode,number buffer);

Parameters

mode | boolean | enable/disable the mode
buffer | number | count of rows requested from server by single operation(optional,makes sense only in dynamic loading mode)

Example

//enable smart rendering mode
myTreeGrid.enableSmartRendering(true);
//enable smart rendering mode,
//set a count of rows requested from the server by single operation
myTreeGrid.enableSmartRendering(true,50);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableSmartXMLParsing DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableSmartXMLParsing

enables smart xml parsing mode

void enableSmartXMLParsing(boolean mode);

Parameters

mode boolean boolean flag

Example

myTreeGrid.enableSmartXMLParsing(true);

Details

In this mode treegrid doesn't parse data from closed branches until opening. It improves the initial rendering performance.

Makes sense only for static components (makes no sense if treegrid is in dynamic loading mode)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableSortingSaving DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableSortingSaving

enables automatic saving of the sorting state to cookie

void enableSortingSaving(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

//minimal parameters set
myTreeGrid.enableSortingSaving();
//maximal parameters set
myTreeGrid.enableSortingSaving("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableStableSorting DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableStableSorting

enables stable sorting algorithm

void enableStableSorting(boolean mode);

Parameters

mode boolean true/false

Example

myTreeGrid.enableStableSorting(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableTooltips DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableTooltips

enables/disables tooltips for specified colums

void enableTooltips(string list);

Parameters

list string list of true/false values, tooltips are enabled for all columns by default

Example

//disable first column's tooltips
myTreeGrid.enableTooltips("false,true,true,true,true");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableTreeCellEdit DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableTreeCellEdit

enables/disables editor of tree cell; enabled by default

void enableTreeCellEdit(boolean mode);

Parameters

mode boolean enables/disables editor of tree cell

Example

myTreeGrid.enableTreeCellEdit(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableTreeGridLines DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableTreeGridLines

enables lines in TreeGrid

void enableTreeGridLines(boolean mode);

Parameters

mode boolean true/false to enable/disable lines in TreeGrid

Example

myTreeGrid.enableTreeGridLines(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableUndoRedo DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableUndoRedo

enables the Undo/Redo functionality in grid

void enableUndoRedo();

Available only in PRO Edition

Example

myTreeGrid.enableUndoRedo();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableValidation DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

enableValidation

enable validation in the grid

void enableValidation(boolean mode);

Parameters

mode boolean enable/disable the validation in the grid

Available only in PRO Edition

Example

myTreeGrid.enableValidation(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


expandAll DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

expandAll

expands all tree structure

void expandAll();

Example

myTreeGrid.expandAll()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


expandAllGroups DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

expandAllGroups

expands all groups

void expandAllGroups();

Available only in PRO Edition

Example

myTreeGrid.expandAllGroups();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


expandColumns DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

expandColumns

expands a group of columns

void expandColumns(number cInd);

Parameters

cInd number index of the first column in the group

Available only in PRO Edition

Example

//expand the group of columns
myTreeGrid.expandColumns(3); //can be called after the init only

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


expandGroup DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

expandGroup

expands a group of rows

void expandGroup(string val);

Parameters

val string value used to determine what group to expand (a common value for all rows in the group)

Available only in PRO Edition

Example

//expand 'John Grisham' group
myTreeGrid.expandGroup('John Grisham')

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


filterBy DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

filterBy

filters TreeGrid by mask

void filterBy(number column,string value,boolean preserve);

Parameters

column | number | a zero-based index of column
value | string | a value by which the column will be filtered
preserve | boolean | filter current or initial state (false by default)

Available only in PRO Edition

Example

//filter treegrid by 2nd column by value "alf"
myTreeGrid.filterBy(1,"alf");
//filter treegrid by 2nd column with a more complex rule
myTreeGrid.filterBy(1,function(data){
// true - show the related row, false - hide the related row
    return  data.toString().indexOf("alf")!=-1;
});
//filter current treegrid state by 3rd column by value "Omega"
myTreeGrid.filterBy(2,"Omega",true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


filterByAll DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

filterByAll

forces Grid filtering by registered inputs (created by # starting shortcuts, or by the makeFilter function)

void filterByAll();

Available only in PRO Edition

Example

myTreeGrid.filterByAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


filterTreeBy DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

filterTreeBy

filters treegrid by mask

void filterTreeBy(number column,string value,boolean preserve);

Parameters

column | number | zero based index of column
value | string | filtering mask
preserve | boolean | filter current or initial state (false by default)

Example

myTreeGrid.filterTreeBy(0,"alf",true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


findCell DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

findCell

finds cell in treegrid by value

void findCell(string value,number c_ind,boolean first,boolean compare);

Parameters

value | string | search string
c_ind | number | index of the column to search in (optional, if not specified, search everywhere)
first | boolean | find only the first occurence (optional, false by default)
compare | boolean | find only exact matches of the entered value, false by default

Available only in PRO Edition

Example

//search "alf" value in all grid cells
var searchResult=myTreeGrid.findCell("alf");
//search "alf" value at the second column, find only the first occurence
var searchResult=myTreeGrid.findCell("alf",1,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachCell DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

forEachCell

executes the code for each cell in a row

void forEachCell(string|number rowId,function custom_code);

Parameters

rowId | string|number | the id of the row where cells must be iterated
custom_code | function | a function which gets the eXcell object as an incoming argument

Example

myTreeGrid.forEachCell("row1",function(cellObj,ind){
//execute code for each cell in a row with the id "row1"
//cellObj - related cell object
//ind - column index
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachRow DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

forEachRow

executes code for each row in the treegrid

void forEachRow(function custom_code);

Parameters

custom_code function function which gets the row id as the incoming argument

Example

myTreeGrid.forEachRow(function(id){
//your code here
//id - row's id
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachRowInGroup DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

forEachRowInGroup

iterates through all rows in some group

void forEachRowInGroup(string name,function custom_code);

Parameters

name | string | name of the group
custom_code | function | function which gets row id as the incoming argument

Available only in PRO Edition

Example

myTreeGrid.forEachRowInGroup("John",function(id){
    do_something_with_row(id);
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forceFullLoading DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

forceFullLoading

loads all data in the treegrid, which is in dyn. srnd or dyn. paging mode

void forceFullLoading(number buffer);

Parameters

buffer number size of data which will be loaded by single iteration, optional, 50 rows by default

Example

//load all data in treegrid
myTreeGrid.forceFullLoading();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forceLabelSelection DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

forceLabelSelection

affects block selection, so it will copy/paste only the visible text, not the values behind

void forceLabelSelection(boolean mode);

Parameters

mode boolean affects block selection

Example

//enable label selection
myTreeGrid.forceLabelSelection(true);
//disable label selection
myTreeGrid.forceLabelSelection(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllRowIds DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getAllRowIds

gets the list of all row ids in the grid

string getAllRowIds(string separator);

Parameters

separator string delimiter to be used in the list (optional, comma by default)

Returns

string the list of all row ids in the grid

Example

//return the list of row ids with comma delimiter
var ids=myTreeGrid.getAllRowIds();
//return the list of row ids with dot delimiter
var ids=myTreeGrid.getAllRowIds(".");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllSubItems DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getAllSubItems

gets the list of ids of all nested rows

array getAllSubItems(string|number rowId);

Parameters

rowId string|number id of a row

Returns

array returns a list of ids of all nested rows

Example

var mumb = myTreeGrid.getAllSubItems(rowId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCellExcellType DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getCellExcellType

returns the excell type of the cell in question

string getCellExcellType(string|number rowId,number cellIndex);

Parameters

rowId | string|number | the row ID
cellIndex | number | the cell index

Returns

string the type of excell (the code like "ed", "txt", "ch", etc.)

Available only in PRO Edition

Example

// setting the type "txt" for the 2nd cell in the row with the id "row1"
myGrid.setCellExcellType("row1",1,"txt");

// getting the the type of the 2nd cell in the row with the id "row1"
var type = myGrid.setCellExcellType("row1",1); // -> returns "txt"

See also
  • API
    • setCellExcellType
  • Articles
    • Column Types
    • Change log

    added in version 5.1

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


getChangedRows DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getChangedRows

gets the list of IDs of the changed rows

string getChangedRows(boolean nd_added);

Parameters

nd_added boolean if true, include ids of added rows

Returns

string the list of IDs of the changed rows

Available only in PRO Edition

Example

//get the list of changed rows
var ids=myTreeGrid.getChangedRows();
//get the list of changed rows including added rows
var ids=myTreeGrid.getChangedRows(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCheckedRows DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getCheckedRows

gets the list of ids of all the rows with checked exCell in the specified column

string getCheckedRows(number col_ind);

Parameters

col_ind number column index

Returns

string the list of ids of all the rows with checked exCell in the specified column

Example

//get the list of ids of checked rows from the first column
var checked=myTreeGrid.getCheckedRows(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getChildItemIdByIndex DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getChildItemIdByIndex

gets the id of a child item in the specified position

string|number getChildItemIdByIndex(string|number rowId,number ind);

Parameters

rowId | string|number | id of row
ind | number | child node index

Returns

string|number id of a child item in the specified position

Example

myTreeGrid.getChildItemIdByIndex(rowId, ind);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColIndexById DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getColIndexById

gets column index by column id

number getColIndexById(number id);

Parameters

id number column id

Returns

number the index of a column

Example

//get index of the column with id "col1"
var colIndex=myTreeGrid.getColIndexById("col1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColLabel DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getColLabel

gets the label of the column specified by index

string getColLabel(number cin,number ind);

Parameters

cin | number | column index
ind | number | header row index (optional, 0 by default, makes sense only for a multiline header)

Returns

string the label of the column specified by index

Example

//get label of the first column
var colLabel=myTreeGrid.getColLabel(0);
//get label of the second line of the first column
var colLabel=myTreeGrid.getColLabel(0,1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColType DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getColType

gets column type by column index

string getColType(number cInd);

Parameters

cInd number column index

Returns

string the type of a column

Example

//get type of the first column
var type=myTreeGrid.getColType(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColTypeById DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getColTypeById

gets the column type by its ID

string getColTypeById(string|number cID);

Parameters

cID string|number column id

Returns

string the type of a column

Example

//get type of the column with the id "column1"
var type=myTreeGrid.getColTypeById("column1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColWidth DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getColWidth

gets the width of the specified column in pixels

number getColWidth(number ind);

Parameters

ind number column index

Returns

number the width of the specified column in pixels

Example

//get width of the first column
var width=myTreeGrid.getColWidth(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColumnCombo DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getColumnCombo

returns dhtmlXCombo column object

object getColumnCombo(number column_index);

Parameters

column_index number the column index

Returns

object dhtmlXCombo column object

Example

//getting dhtmlXCombo column object
myCombo = myTreeGrid.getColumnCombo(column_index);

//using it later with dhtmlxCombo API
myCombo.enableFilteringMode(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColumnId DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getColumnId

gets the id of the column specified by index

string|number getColumnId(number cin);

Parameters

cin number column index

Returns

string|number the id of the column specified by index

Example

//get id of the first column
var colId=myTreeGrid.getColumnId(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColumnLabel DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getColumnLabel

gets the label of the column specified by index

string getColumnLabel(number cin,number ind);

Parameters

cin | number | column index
ind | number | header row index (optional, 0 by default, makes sense only for a multiline header)

Returns

string the label of the column specified by index

Example

//get label of the first column
var colLabel=myTreeGrid.getColLabel(0);
//get label of the second line of the first column
var colLabel=myTreeGrid.getColLabel(0,1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getColumnsNum DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getColumnsNum

returns the number of columns in the grid (including hidden columns)

number getColumnsNum();

Returns

number the number of columns in the grid

Example

var colNum=myTreeGrid.getColumnsNum();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCombo DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getCombo

gets Combo object of the specified column

object getCombo(number col_ind);

Parameters

col_ind number index of the column to get combo object for (column must have 'co', 'coro' or 'combo' type)

Returns

object Combo object of the specified column

Example

//get combo object of the first column
var combo=myTreeGrid.getCombo(0);

Details

use the method to change select box value for cell before editor opened

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getCustomCombo DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getCustomCombo

gets the combobox specific for the cell in question

object getCustomCombo(string|number id,number ind);

Parameters

id | string|number | row id
ind | number | column index (the cell must have 'co', 'coro' or 'combo' type)

Returns

object the combobox specific for the cell in question

Example

var combo=myTreeGrid.getCustomCombo("row1",0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFilterElement DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getFilterElement

gets the input object of the filter linked to the column in question

object getFilterElement(number index);

Parameters

index number index of a column

Returns

object the input object of the filter linked to the column in question

Example

//get filter object placed at the header of the first column
var filterObject=myTreeGrid.getFilterElement(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFooterLabel DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getFooterLabel

gets the label of the footer specified by index

string getFooterLabel(number cin,number ind,boolean mode);

Parameters

cin | number | column index
ind | number | footer row index (optional, 0 by default)
mode | boolean | true, to return a label in HTML format, preserving formatting tags

Returns

string the label of the footer specified by index

Example

//minimal parameters set
var footerLabel=myTreeGrid.getFooterLabel(0);
//maximal parameters set
var footerLabel=myTreeGrid.getFooterLabel(0,1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getHeaderMenu DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getHeaderMenu

returns dhtmlXMenu object of the grid header menu

object getHeaderMenu(object columns);

Parameters

columns object an object with grid columns

Returns

object dhtmlXMenu object of the grid header menu

Example

var headerObject=myTreeGrid.getHeaderMenu(columns);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemIcon DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getItemIcon

returns the font awesome icon of an item

string getItemIcon(string|number rowId);

Parameters

rowId string|number the row id

Returns

string the font awesome icon of an item

Example

var fa_icon = myTreeGrid.getItemIcon("row1");

Related samples

  • TreeGrid - font awesome icons
See also
  • API
    • setItemIcon
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


getItemImage DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getItemImage

gets the image of the tree col

string getItemImage(string|number rowId);

Parameters

rowId string|number id of row

Returns

string the image of the tree col

Example

myTreeGrid.getItemImage(rowId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemText DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getItemText

gets real caption of tree col

string getItemText(string|number rowId);

Parameters

rowId string|number id of row

Returns

string the real caption of tree col

Example

myTreeGrid.getItemText(rowId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getLevel DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getLevel

returns the level of a TreeGrid row

number getLevel(string|number rowId);

Parameters

rowId string|number id of a row

Returns

number the level of a TreeGrid row

Example

myTreeGrid.getLevel(rowId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getMarked DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getMarked

returns an array of marked cells (pairs of row id and column index)

array getMarked();

Returns

array an array of marked cells

Available only in PRO Edition

Example

var markedArray = myTreeGrid.getMarked();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getOpenState DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getOpenState

returns open/close state of the row

boolean getOpenState(string|number rowId);

Parameters

rowId string|number id of the row

Returns

boolean true/false for open/closed state of the row

Example

myTreeGrid.getOpenState(rowId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getParentId DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getParentId

returns id of the parent row

string|number getParentId(string|number rowId);

Parameters

rowId string|number id of the row

Returns

string|number id of the parent row

Example

myTreeGrid.getParentId(rowId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getRedo DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getRedo

gets length of available ReDo operations

array getRedo();

Returns

array an array of available ReDo operations

Available only in PRO Edition

Example

var redo=myTreeGrid.getRedo();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getRowAttribute DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getRowAttribute

returns the row attribute's value which was set in the XML tag

mixed getRowAttribute(string|number rId,string name);

Parameters

rId | string|number | row id
name | string | the attribute's name

Returns

mixed the row attribute's value set in the XML tag

Example

<?xml version='1.0' encoding='iso-8859-1'?>
    <rows>
        <row id="unique_rowid" some="data">
            <cell some="data">cell content</cell>
        </row>
    </rows>
    ...
var rowAttr = myTreeGrid.getRowAttribute("unique_rowid","some");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getRowData DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getRowData

returns the row data

object getRowData(string rowId);

Parameters

rowId string the row id

Returns

object the row data

Example

myGrid.setColumnIds("id1,id2,id3"); //setting ids for columns of the row with id "row1"
var data = myGrid.getRowData("row1");
// -> data = {"id1":"value","id2":"value2","id3":"value3"}

Details

In order to get data of the row, you need to check that related columns have ids specified.

See also
  • API
    • setRowData
    • Change log

    added in version 5.1

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


getRowId DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getRowId

gets the row id by the row index

string|number getRowId(number ind);

Parameters

ind number row index

Returns

string|number the id of the row

Example

//get ID of the first row
var rowID=myTreeGrid.getRowId(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getRowIndex DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getRowIndex

gets the row index by the row id (grid only)

number getRowIndex(string|number row_id);

Parameters

row_id string|number row id

Returns

number the row index

Example

//get the index of the row with the id "row1"
var rowIndex=myTreeGrid.getRowIndex("row1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getRowsNum DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getRowsNum

returns the number of rows in the grid (in case of dynamic mode it will return an expected number of rows)

number getRowsNum();

Returns

number the number of rows in the grid

Example

var count=myTreeGrid.getRowsNum();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelectedBlock DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getSelectedBlock

returns the attributes of the current block selection

object getSelectedBlock();

Returns

object the attributes of the current block selection

Example

var top_row=myTreeGrid.getSelectedBlock().LeftTopRow;
var bottom_row=myTreeGrid.getSelectedBlock().RightBottomRow;
var left_column=myTreeGrid.getSelectedBlock().LeftTopCol;
var right_column=myTreeGrid.getSelectedBlock().RightBottomCol;

Details

returns an object with four properties:

  • LeftTopRow: the index of the top row in the selected block,
  • LeftTopCol: the index of the first column in the selected block,
  • RightBottomRow: the index of the bottom row in the selected block,
  • RightBottomCol: the index of the last column in the selected block describing the boundary elements of the block
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelectedCellIndex DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getSelectedCellIndex

returns the index of the selected cell or -1, if there is no selected cell

number getSelectedCellIndex();

Returns

number the index of the selected cell or -1

Example

var ind=myTreeGrid.getSelectedCellIndex();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelectedRowId DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getSelectedRowId

returns the id of the selected row (a list of ids with default delimiter) or null, if there are no selected rows

string|number getSelectedRowId();

Returns

string|number the id of the selected row

Example

var selectedId=myTreeGrid.getSelectedRowId();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSortingState DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getSortingState

gets the sorting state of the grid

string getSortingState();

Returns

string the sorting state of the grid

Example

var state=myTreeGrid.getSortingState();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getStateOfView DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getStateOfView

returns details about current grid state

array getStateOfView();

Returns

array details about current grid state

Example

var state=myTreeGrid.getStateOfView();

Details

If the paging mode is enabled:

  • state[0] = the number of the currently active page
  • state[1] = the index of the top row on the page
  • state[2] = the index of the last row on the page
  • state[3] = the number of rows in the grid

If the paging mode is disabled:

  • state[0] = the index of the top visible row
  • state[1] = the height of the visible area in rows
  • state[2] = the number of rows in the grid
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSubItems DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getSubItems

returns a list of child rows ids, separated by comma

string getSubItems(string|number rowId);

Parameters

rowId string|number the id of a row

Returns

string a list of child rows ids

Example

myTreeGrid.getSubItems(rowId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getUndo DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getUndo

gets length of available UnDo operations

array getUndo();

Returns

array length of available UnDo operations

Available only in PRO Edition

Example

var undo=myTreeGrid.getUndo();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getUserData DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

getUserData

gets user data

mixed getUserData(string|number row_id,string name);

Parameters

row_id | string|number | row id, if empty, user data of the grid (not of a row)
name | string | name of the user data

Returns

mixed user data value

Example

//get row user data
var userdata = myTreeGrid.getUserData("unique_rowid","someName1");
//get global user data
var userdata = myTreeGrid.getUserData("","someName1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


gridFromClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

gridFromClipboard

initializes grid from CSV stored in the clipboard

void gridFromClipboard();

Available only in PRO Edition

Example

<a href="javascript:void(0)"
    onclick="myTreeGrid.clearAll(); myTreeGrid.gridFromClipboard();">
    Load grid from clipboard
</a>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


gridToClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

gridToClipboard

copies grid in CSV to the clipboard

void gridToClipboard();

Available only in PRO Edition

Example

<a href="javascript:void(0)" onclick="copyData()">
    Copy entire grid (with tab as delimiter) to clipboard
</a>

<script>
function copyData(type,delim){
   myTreeGrid.setCSVDelimiter('\t');
   myTreeGrid.gridToClipboard();
}
</script>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


gridToGrid DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

gridToGrid

redefine this method in your code to specify how grid row values should be used in another grid

void gridToGrid(string|number rowId,object sgrid,object tgrid);

Parameters

rowId | string|number | the id of the dragged row
sgrid | object | source grid object
tgrid | object | target grid object

Example

myTreeGrid.gridToGrid = function(rowId,sgrid,tgrid){
    var z=[];
    for (var i=0; i<sgrid.getColumCount(); i++) // for each cell in the source grid
    z[i]=sgrid.cells(rowId,i).getValue();       // prepare data for the target grid
    return z;
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


gridToTreeElement DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

gridToTreeElement

redefine this method in your code to define how grid row values should be used in tree

void gridToTreeElement(object treeObj,string|number treeNodeId,string|number gridRowId);

Parameters

treeObj | object | object of tree
treeNodeId | string|number | id of the node created in tree
gridRowId | string|number | id of the grid row

Available only in PRO Edition

Example

myTreeGrid.gridToTreeElement = function(tree,treeID,gridID){
    return this.cells(gridId,0).getValue(); //take data from 1st column as a tree value
};

Details

using input parameters you can change id of a new tree node, set label, set userdata blocks, etc.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


groupBy DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

groupBy

groups grid content by values of the specified column

void groupBy(number ind,array mask);

Parameters

ind | number | column index to group by
mask | array | optional, array, each value of which is mapped to the related column

Available only in PRO Edition

Example

//minimal parameters set. Group rows by the second column
myTreeGrid.groupBy(1);
//maximal parameters set
myTreeGrid.groupBy(2,["#stat_max","#title","","#stat_total",
                        "","#cspan","#cspan","#cspan"]);

Details

The values of the mask parameter are:

  • title (string) - mandatory, will be used for group-key;
  • cspan (string) - organize colspan with a sibling cell (the same as in cspan in header);
  • stat_total (number) - calculates total of values for the group;
  • stat_max (number) - calculates maximum value in the group;
  • stat_min (number) - calculates minimum value in the group;
  • stat_average (number) - calculates the average value in the group;
  • stat_count (number) - calculates count of records in the group.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


groupStat DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

groupStat

returns the result of aggregation for a column

number groupStat(string key,number ind,string item);

Parameters

key | string | the group key
ind | number | the index of a column (zero-based numbering)
item | string | the aggregation shortcut

Returns

number the result of aggregation for a column

Example

myTreeGrid.groupStat(name,3,"stat_total");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hasChildren DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

hasChildren

returns the number of the row's children

number hasChildren(string|number rowId);

Parameters

rowId string|number id of row

Returns

number the number of the row's children

Example

myTreeGrid.hasChildren(rowId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


init DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

init

initializes treegrid

void init();

Example

myTreeGrid.init();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


insertColumn DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

insertColumn

adds a new column to the grid

void insertColumn(number ind,string header,string type,number width,string sort,string align,string valign,any reserved,string columnColor);

Parameters

ind | number | index of the column
header | string | header content of column (optional, blank by default)
type | string | the type of the column (optional, 'ed' by default)
width | number | the width of the column (optional, '100' by default)
sort | string | the sort type of the column (optional, 'na' by default)
align | string | the align of the column (optional, 'left' by default)
valign | string | vertical align of column (optional)
reserved | any | not used for now
columnColor | string | background color of the column (optional)

Available only in PRO Edition

Example

//minimal parameters set
myTreeGrid.insertColumn(10);
//maximal parameters set
myTreeGrid.insertColumn(11,'Some text','ed',120,'na','left','top',null,'red');

Details

The method can be used after grid is initialized. At least one column should be in the grid

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isColumnHidden DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

isColumnHidden

gets the shown/hidden status of the column

void isColumnHidden(number ind);

Parameters

ind number column index

Available only in PRO Edition

Example

//check if the first column is hidden
var isHidden=myTreeGrid.isColumnHidden(0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


load DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

load

loads data from an external file ( xml, json, jsarray, csv )

promise load(string url,function call,string type);

Parameters

url | string | url to an external file
call | function | after loading callback function, optional, can be omitted
type | string | type of data (xml,csv,json,jsarray), optional, xml by default

Returns

promise a "promise" object

Example

//load grid from the external file
myTreeGrid.load("grid.xml");
//load grid, execute doAfterRefresh() function after grid was loaded
myTreeGrid.load("grid.xml",doAfterRefresh);
//load grid from the external csv file,
//execute doAfterRefresh() function after grid was loaded
myTreeGrid.load("grid.csv",doAfterRefresh,"csv");
// returns a "promise" object, see details
myTreeGrid.load(url).then(function(text){
    // text - a server side response
});

Details

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadHiddenColumnsFromCookie DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

loadHiddenColumnsFromCookie

loads the sorting order from cookie

void loadHiddenColumnsFromCookie(string name);

Parameters

name string optional,cookie name

Available only in PRO Edition

Example

myTreeGrid.load("grid.xml",function(){
    //minimal parameters set
    myTreeGrid.loadHiddenColumnsFromCookie();
    //maximal parameters set
    myTreeGrid.loadHiddenColumnsFromCookie("some_name");
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadOpenStates DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

loadOpenStates

loads open state of TreeGrid into cookie

void loadOpenStates(string name);

Parameters

name string optional, cookie name

Available only in PRO Edition

Example

myTreeGrid.load("grid.xml",function(){
    //minimal parameters set
    myTreeGrid.loadOpenStates();
    //maximal parameters set
    myTreeGrid.loadOpenStates("some_name");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadOrderFromCookie DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

loadOrderFromCookie

loads sorting order from cookie

void loadOrderFromCookie(string name);

Parameters

name string optional,cookie name

Available only in PRO Edition

Example

myTreeGrid.load("grid.xml",function(){
    //minimal parameters set
    myTreeGrid.loadOrderFromCookie();
    //maximal parameters set
    myTreeGrid.loadOrderFromCookie("some_name");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadSizeFromCookie DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

loadSizeFromCookie

loads grid layout from cookie

void loadSizeFromCookie(string name);

Parameters

name string optional,cookie name

Available only in PRO Edition

Example

myTreeGrid.load("grid.xml",function(){
    //minimal parameters set
    myTreeGrid.loadSizeFromCookie();
    //maximal parameters set
    myTreeGrid.loadSizeFromCookie("some_name");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadSortingFromCookie DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

loadSortingFromCookie

loads sorting order from cookie

void loadSortingFromCookie(string name);

Parameters

name string optional,cookie name

Available only in PRO Edition

Example

myTreeGrid.load("grid.xml",function(){
    //minimal parameters set
    myTreeGrid.loadSortingFromCookie();
    //maximal parameters set
    myTreeGrid.loadSortingFromCookie("some_name");
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


lockRow DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

lockRow

locks/unlocks a row for editing

void lockRow(string|number rowId,boolean mode);

Parameters

rowId | string|number | id of a row
mode | boolean | true/false to lock/unlock

Example

//lock row with id "row1" for editing
myTreeGrid.lockRow("row1",true);
//unlock row with id "row1" for editing
myTreeGrid.lockRow("row1",false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


makeFilter DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

makeFilter

makes a filter from any input element (text filter), select (dropdown) or DIV (combobox based on dhtmlxCombo)

void makeFilter(id|HTMLElement id,number column,boolean preserve);

Parameters

id | id|HTMLElement | input id or input HTML object
column | number | index of a column
preserve | boolean | filter the current state or the initial one (optional, false by default)

Available only in PRO Edition

Example

//minimal parameters set
myTreeGrid.makeFilter("some_el",0);
//maximal parameters set
myTreeGrid.makeFilter("some_el",0,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


makeSearch DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

makeSearch

makes a search box (sets selection on the row with the found value) from any input

void makeSearch(string|number|HTMLElement id,number column);

Parameters

id | string|number|HTMLElement | input id or input HTML object
column | number | index of a column

Available only in PRO Edition

Example

myTreeGrid.makeSearch("input_id",0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


mark DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

mark

marks/unmarks the specified cell

void mark(string|number row,number cInd,boolean state);

Parameters

row | string|number | row id
cInd | number | cell index
state | boolean | true or false

Available only in PRO Edition

Example

//mark cell
myTreeGrid.mark('row1',0,true);
//unmark cell
myTreeGrid.mark('row1',0,false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveColumn DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

moveColumn

moves the column of the specified index to a new position

void moveColumn(number oldInd,number newInd);

Parameters

oldInd | number | the current index of column
newInd | number | the index of the column, before which the moved column will be inserted

Available only in PRO Edition

Example

//put the 1st column before the 3rd column
myTreeGrid.moveColumn(0,2);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveRow DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

moveRow

moves a row

void moveRow(string|number rowId,string mode, [string|number targetId,object targetGrid] );

Parameters

rowId | string|number | the id of the source row (the row that will be moved)
mode | string | moving mode ("up","down","row_sibling")
targetId | string|number | used just in the "row_sibling" mode. The id of the target row (the row after which the source row will be pasted) (optional)
targetGrid | object | used for moving between grids (optional)

Available only in PRO Edition

Example

//move row up
myTreeGrid1.moveRow("row1","up");
//move row down
myTreeGrid1.moveRow("row1","down");
//put row with id "row1" after row with the id "row2" in the treegrid[2]
myTreeGrid1.moveRow("row1","row_sibling","row2",myTreeGrid2);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveRowDown DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

moveRowDown

moves a row one position down, if possible

void moveRowDown(string|number row_id);

Parameters

row_id string|number row id

Example

<a href="javascript:void(0)" onclick="myTreeGrid.moveRowDown(myTreeGrid.getSelectedId())">
    Move selected row down
</a>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveRowTo DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

moveRowTo

moves a row

void moveRowTo(string|number srowId,string|number trowId,string mode, [string dropmode,object sourceGrid,object targetGrid] );

Parameters

srowId | string|number | the id of the source row (the row that will be moved or copied)
trowId | string|number | the id of the target row (in the 'sibling' mode - the row after which the source row will be pasted, in the 'child' mode - the row that will be the parent for the source row in the specified grid)
mode | string | "move" or "copy"
dropmode | string | "sibling" or "child" (optional, "sibling" by default)
sourceGrid | object | source grid object used for moving between grids (optional, current grid by default)
targetGrid | object | target grid object used for moving between grids (optional, current grid by default)

Available only in PRO Edition

Example

//move row with id "row1" after row with id "row2"
myTreeGrid1.moveRowTo("row1","row2","move");
//copy row with id "row1" from treegrid[1] as child of row with id "row2" in treegrid[2]
var movedId=myTreeGrid1.moveRowTo("row1","row2","copy","child",myTreeGrid1,myTreeGrid2);

Details

Details on the trowId parameter - the target row is:

  • in the 'sibling' mode - the row after which the source row will be pasted
  • in the 'child' mode - the row that will be the parent for the source row in the specified grid
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


moveRowUp DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

moveRowUp

moves a row one position up, if possible

void moveRowUp(string|number row_id);

Parameters

row_id string|number row id

Example

<a href="javascript:void(0)" onclick="myTreeGrid.moveRowUp(myTreeGrid.getSelectedId())">
    Move selected row up
</a>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


openItem DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

openItem

expands the specified row

void openItem(string|number rowId);

Parameters

rowId string|number id of row

Example

myTreeGrid.openItem(rowId)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


parse DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

parse

loads data from a local data source (XML string, CSV string, XML island, XML object, JSON object, javascript array)

void parse(string|object data, [string type] );

Parameters

data | string|object | the data to load
type | string | data type (XML,JSON,JSarray,CSV), optional, data is treated as XML by default

Example

//parse grid from the xml string
myTreeGrid.parse(data);
//parse grid from the csv string
myTreeGrid.parse(data,"csv");
//parse grid from the javascript array
myTreeGrid.parse(data,"jsarray");
//parse grid from the json string
myTreeGrid.parse(data,"json");

Details

the method works in the synchronous mode

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


pasteBlockFromClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

pasteBlockFromClipboard

pastes the content of the clipboard into a block selection of the grid

void pasteBlockFromClipboard();

Example

myTreeGrid.attachEvent("onKeyPress",onKeyPressed);
...
function onKeyPressed(code,ctrl,shift){
    if(code==67&&ctrl){
       myTreeGrid.setCSVDelimiter("\t");
       myTreeGrid.copyBlockToClipboard();
    }
    if(code==86&&ctrl){
       myTreeGrid.pasteBlockFromClipboard();
    }
    return true;
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


post DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

post

allows sending POST requests by loading data from external file ( xml, json, jsarray, csv )

void post(string url,string post,function call,string type);

Parameters

url | string | url to an external file
post | string | POST request
call | function | an after loading callback function, optional, can be omitted
type | string | type of data (xml,csv,json,jsarray), optional, xml by default

Available only in PRO Edition

Example

myTreeGrid.post("data.php?id=1","data=10",ondataload,"xml");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


preventIECaching DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

preventIECaching

prevents caching in IE by adding random values to URL string

void preventIECaching(boolean mode);

Parameters

mode boolean enable/disable random values in URLs (disabled by default)

Example

//enable preventing IE caching mode
myTreeGrid.preventIECaching(true);
//disable preventing IE caching mode
myTreeGrid.preventIECaching(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


printView DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

printView

generates the print friendly view

void printView(string before,string after);

Parameters

before | string | html which will be placed before the printed grid
after | string | html which will be placed after the printed grid

Available only in PRO Edition

Example

//minimal parameters set
myTreeGrid.printView();
//maximal parameters set
myTreeGrid.printView('<div>before</div>','<strong>after</strong>');

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


refreshComboColumn DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

refreshComboColumn

updates the cells of the combo column

void refreshComboColumn(number index);

Parameters

index number the column index

Example

myTreeGrid.refreshComboColumn(index);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


refreshFilters DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

refreshFilters

refreshes the lists of values in all the filters created by shortcuts or by makeFilter calls

void refreshFilters();

Available only in PRO Edition

Example

myTreeGrid.refreshFilters();

Details

the method can be used if data in grid has been changed and filters need to be updated

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


refreshMath DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

refreshMath

restores math after column moving

void refreshMath();

Example

myGrid.refreshMath();

Change log

added in version 4.6.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


registerCList DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

registerCList

registers an array of options for a multiselect column ("clist") of the grid

void registerCList(index col,array list);

Parameters

col | index | the column index
list | array | an array of options set in the list

Example

myTreeGrid.registerCList(2,["Stephen King","John Grisham","Honore de Balzac"]);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


rowToClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

rowToClipboard

copies the value of a row to the clipboard

void rowToClipboard(string|number rowId);

Parameters

rowId string|number the id of a row (optional, uses the selected row by default)

Available only in PRO Edition

Example

<a href="javascript:void(0)" onclick="copyData()">
    Copy selected row (with tab as delimiter) to clipboard
</a>
<script>
function copyData(type,delim){
   myTreeGrid.setCSVDelimiter('\t');
   myTreeGrid.rowToClipboard();
}
</script>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


rowToDragElement DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

rowToDragElement

redefine this method in your code to specify how grid row values should be displayed during the dragging

void rowToDragElement(string|number id);

Parameters

id string|number the id of the grid's row

Example

myTreeGrid.rowToDragElement=function(id){
    //your code here

    // prepare a text string
    var text = "<img src = 'some.gif'> - "+myTreeGrid.cells(id,0).getValue();
    return text;
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveHiddenColumnsToCookie DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

saveHiddenColumnsToCookie

saves hidden columns to cookie

void saveHiddenColumnsToCookie(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

myTreeGrid.attachEvent("onColumnHidden", function(index,state){
  //minimal parameters set
  myTreeGrid.saveHiddenColumnsToCookie();
  //maximal parameters set
  myTreeGrid.saveHiddenColumnsToCookie("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveOpenStates DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

saveOpenStates

stores open state of TreeGrid in cookie

void saveOpenStates(string name);

Parameters

name string optional, cookie name

Available only in PRO Edition

Example

myTreeGrid.attachEvent("onOpenEnd", function(index,state){
    //minimal parameters set
    myTreeGrid.saveOpenStates();
    //maximal parameters set
    myTreeGrid.saveOpenStates("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveOrderToCookie DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

saveOrderToCookie

saves the columns' order to cookie

void saveOrderToCookie(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

myTreeGrid.attachEvent("onAfterCMove", function(cInd,posInd){
    //minimal parameters set
    myTreeGrid.saveOrderToCookie();
    //maximal parameters set
    myTreeGrid.saveOrderToCookie("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveSizeToCookie DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

saveSizeToCookie

saves grid layout to cookie

void saveSizeToCookie(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

myTreeGrid.attachEvent("onResizeEnd", function(obj){
    //minimal parameters set
    myTreeGrid.saveSizeToCookie();
    //maximal parameters set
    myTreeGrid.saveSizeToCookie("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


saveSortingToCookie DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

saveSortingToCookie

saves the sorting order to cookie

void saveSortingToCookie(string name,string cookie_param);

Parameters

name | string | optional, cookie name
cookie_param | string | additional parameters added to cookie

Available only in PRO Edition

Example

myTreeGrid.attachEvent("onAfterSorting", function(index,type,direction){
    //minimal parameters set
    myTreeGrid.saveSortingToCookie();
    //maximal parameters set
    myTreeGrid.saveSortingToCookie("some_name","expires=Fri, 31-Dec-2010 23:59:59 GMT");
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectAll DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

selectAll

selects all rows in the grid, doesn't trigger any events

void selectAll();

Example

myTreeGrid.selectAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectBlock DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

selectBlock

selects a block in the Grid, according to the specified rows' ids and columns' indexes

void selectBlock(string|number start_row,number start_col,string|number end_row,number end_column);

Parameters

start_row | string|number | the start row's id
start_col | number | the start column's index
end_row | string|number | the end row's id
end_column | number | the end column's index

Example

myTreeGrid.selectBlock("row1",0,"row5",4);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectCell DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

selectCell

sets selection to the specified row-cell

void selectCell(number|HTMLElement row,number cInd,boolean preserve,boolean edit,boolean show);

Parameters

row | number|HTMLElement | row index or row object
cInd | number | cell index
preserve | boolean | preserve previously selected rows, true/false (optional, false by default). Multiselect mode should be enabled
edit | boolean | switch selected cell to the edit mode (optional, false by default)
show | boolean | true|false - scroll row to view (optional, true by default)

Example

//select the second cell of the first row
myTreeGrid.selectCell(0,1);
//select the second cell of the first row, call "onRowSelect" event,
//preserve previously selected rows
myTreeGrid.selectCell(0,1,true,true);

//select the second cell of the 11th row, switch cell to the edit mode
<button onclick="myfunc()">select cell</button>

<script>
    function myfunc(){
        (arguments[0]||window.event).cancelBubble=true;
        myTreeGrid.selectCell(10,1,false,false,true);
    }
</script>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectRow DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

selectRow

selects a row (and its first cell)

void selectRow(number|HTMLElement row,boolean fl,boolean preserve,boolean show);

Parameters

row | number|HTMLElement | row index or row object
fl | boolean | if true, call function on select (optional, false by default)
preserve | boolean | preserve previously selected rows, true/false (false by default). Multi select mode should be enabled.
show | boolean | true|false - scroll row to view, true by default

Example

//select the first row in the grid
mygrid.selectRow(0);
//select the first row in the grid, call the "onRowSelect" function,
//preserve previously selected rows, scroll row to view
mygrid.selectRow(0,true,true,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectRowById DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

selectRowById

selects row by ID

void selectRowById(string|number row_id,boolean preserve,boolean show,boolean call);

Parameters

row_id | string|number | row id
preserve | boolean | preserve previously selected (optional, false by default). Multi select mode should be enabled.
show | boolean | scroll row to view (optional, true by default)
call | boolean | if true, call the onRowSelect function (optional, false by default)

Example

// minimal parameters' set
mygrid.selectRowById('row1');
// maximal parameters' set
mygrid.selectRowById('row1',true,true,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


serialize DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

serialize

gets actual xml of the grid

void serialize();

Available only in PRO Edition

Example

var str=mygrid.serialize();

Details

the depth of serialization can be set with setSerializationLevel() method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


serializeToCSV DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

serializeToCSV

serializes to CSV string

void serializeToCSV(boolean text_only);

Parameters

text_only boolean optional, force serialization of the text values (skip HTML elements), false by default

Available only in PRO Edition

Example

//serialize grid to CSV format
var csv=mygrid.serializeToCSV();
//serialize grid to CSV format, only the text values will be serialized
var csv=mygrid.serializeToCSV(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setActive DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setActive

sets the grid active to make key navigation possible

void setActive(boolean mode);

Parameters

mode boolean set focus on/off the grid

Example

mygrid.setActive(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setAwaitedRowHeight DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setAwaitedRowHeight

applies a custom height of a row which will be used in the smart rendering mode for row calculation

void setAwaitedRowHeight(number height);

Parameters

height number the awaited height of a row

Example

myTreeGrid.setAwaitedRowHeight(25);

Details

the function needs to be used if you use a custom skin which changes the default row height of the grid.

It can be called only after the setSkin method.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCSVDelimiter DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setCSVDelimiter

changes csv delimiter

void setCSVDelimiter(string str);

Parameters

str string the delimiter used in CSV operations, comma by default (only single char delimiters allowed)

Example

mygrid.setCSVDelimiter(":")
var  str="11:12:13\n21:22:23\n31:32:33";
mygrid.loadCSVString(str);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCellExcellType DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setCellExcellType

sets an excell type for the cell in question

void setCellExcellType(string|number rowId,number cellIndex,string type);

Parameters

rowId | string|number | the row ID
cellIndex | number | the cell index
type | string | the type of excell (code like "ed", "txt", "ch", etc.)

Available only in PRO Edition

Example

// setting the type "txt" for the 2nd cell in the row with the id "row1"
myGrid.setCellExcellType("row1",1,"txt");

See also
  • API
    • getCellExcellType
  • Articles
    • Column Types
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setCellTextStyle DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setCellTextStyle

sets a style for a cell

void setCellTextStyle(string|number row_id,number ind,string styleString);

Parameters

row_id | string|number | the row id
ind | number | the cell index
styleString | string | a style string in the common format (ex: "color:red;border:1px solid gray;")

Example

mygrid.setCellTextStyle("row1",0,"color:red;border:1px solid gray;");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCheckedRows DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setCheckedRows

sets a value for all checkboxes in the specified column

void setCheckedRows(number col_ind,number v);

Parameters

col_ind | number | column index
v | number | value, 0 - not checked, any other value - checked

Example

//check all the checkboxes in the first column
mygrid.setCheckedRows(0,1);
//uncheck all the checkboxes in the first column
mygrid.setCheckedRows(0,0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColAlign DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColAlign

aligns values in columns

void setColAlign(string alStr);

Parameters

alStr string a list of align values (possible values are: right,left,center,justify). Default delimiter is ","

Example

mygrid.setColAlign("right,left,center,justify")

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColLabel DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColLabel

sets a new label for the column header

void setColLabel(number col,number ind);

Parameters

col | number | the index of the header column
ind | number | the index of the header row (default is 0)

Example

//set a new label for the first column
mygrid.setColLabel(0,"New Column Label");
//set a new label for the second line of the first column
mygrid.setColLabel(0,"Some Other Label",1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColSorting DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColSorting

sets the types of column sort

void setColSorting(string sortStr);

Parameters

sortStr string a list of sort codes with the default delimiter

Example

mygrid.setColSorting("int,str,date,na,sortingFunction")

Details

the available sort types are: str, int, date, na or function object for custom sorting

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColTypes DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColTypes

sets column types

void setColTypes(string typeStr);

Parameters

typeStr string the list of type codes(default delimiter is ",")

Example

mygrid.setColTypes("dyn,ed,txt,price,ch,coro,ra,ro");

Details

You can find the list of possible column types with their description in the article Column Types.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColVAlign DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColVAlign

sets vertical align for columns

void setColVAlign(string valStr);

Parameters

valStr string the list of vertical align values for columns (possible values are: baseline,sub,super,top,text-top,middle,bottom,text-bottom)

Example

mygrid.setColVAlign("top,middle,bottom,top,top,sub");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColValidators DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColValidators

assigns validators to the related column

void setColValidators(string vals);

Parameters

vals string the list of validators

Available only in PRO Edition

Example

//sets validators for the 1st and 2nd columns
mygrid.setColValidators("ValidInteger,ValidEmail");
//alternative syntax
mygrid.setColValidators(["ValidInteger","ValidEmail"]);
//adding a few rules for the same column
mygrid.setColValidators(["NotEmpty,ValidInteger","ValidEmail"]);
//seting null/empty value for the columns which shouldn't be affected by validation
mygrid.setColValidators("ValidInteger,,,ValidEmail");
//alternative syntax
mygrid.setColValidators(["ValidInteger",null,null,"ValidEmail"]);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColWidth DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColWidth

sets the width for the specified column in pixels (doesn't work with the percentage based grid)

void setColWidth(number ind,string value);

Parameters

ind | number | the index of a column
value | string | a new width value

Example

//set width of the first column
mygrid.setColWidth(0,"150");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColspan DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColspan

dynamically sets colspan in a row starting from the specified column index

void setColspan(string| number row_id,number col_index,number colspan);

Parameters

row_id | string| number | the id of a row
col_index | number | the index of a column
colspan | number | the size of colspan

Available only in PRO Edition

Example

mygrid.enableColSpan(true);
//merge first 2 cells in the row with the id "row1"
mygrid.setColspan("row1",0,2);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnColor DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColumnColor

colors the background of columns

void setColumnColor(string clr);

Parameters

clr string a comma-delimited list of colors

Example

//set colors for the first 3 columns
mygrid.setColumnColor("white,#d5f1ff,#d5f1ff");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnExcellType DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColumnExcellType

sets an excell type for all the cells in the specified column

void setColumnExcellType(number colIndex,string type);

Parameters

colIndex | number | the index of a column
type | string | the type of excell

Available only in PRO Edition

Example

//set type "ch" for the cells in the 3rd column
mygrid.setColumnExcellType(2,"ch");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnHidden DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColumnHidden

hides/shows a column

void setColumnHidden(number ind,boolean state);

Parameters

ind | number | the index of a column
state | boolean | true/false to hide/show a column

Available only in PRO Edition

Example

//hide the first column
mygrid.setColumnHidden(0,true);
//show the first column
mygrid.setColumnHidden(0,false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnId DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColumnId

sets id for the specified column

void setColumnId(number ind,string|number id);

Parameters

ind | number | the index of a column
id | string|number | the id to set for a column

Example

//set id for the first column
mygrid.setColumnId(0,"column1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnIds DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColumnIds

sets id for every column

void setColumnIds(string ids);

Parameters

ids string a comma-delimited list of ids or an empty one, if the values to use have been set earlier

Example

mygrid.setColumnIds("sales,book,author,price,store,shipping,best,date");

Details

the method can be used to retreive the index of the desired column

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnLabel DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColumnLabel

sets a new column header label

void setColumnLabel(number colIndex,string label,number rowIndex);

Parameters

colIndex | number | the index of the header column
label | string | a text for a new column header label
rowIndex | number | the index of the header row (the default one is 1)

Example

// set a new label for the first column
mygrid.setColLabel(0,"New Column Label");
// set a new label for the second line of the first column
mygrid.setColLabel(0,"New Column Label",1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnMinWidth DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColumnMinWidth

sets the minimum column width (works only for manual resizing)

void setColumnMinWidth(number width,number ind);

Parameters

width | number | the minimum column width, can be set for the specified column, or as a comma-separated list for all columns
ind | number | the index of a column

Example

//set the min width of the first column
mygrid.setColumnMinWidth(50,0);
//set columns min widths
mygrid.setColumnMinWidth("50,100,100,150,200,100,150");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setColumnsVisibility DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setColumnsVisibility

sets the list of visible/hidden columns

void setColumnsVisibility(string list);

Parameters

list string a list of true/false separated by comma, false to show column, true to hide column

Available only in PRO Edition

Example

//hide the first column
mygrid.setColumnsVisibility("true,false,false,false,false");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCustomSorting DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setCustomSorting

sets a custom sorting

void setCustomSorting(function func,number col);

Parameters

func | function | the function used for comparison
col | number | the index of a column to apply the custom sorting to

Available only in PRO Edition

Example

//the second column is sorted by the number of symbols in the text
mygrid.setCustomSorting(sort_custom,1);
...
function sort_custom(a,b,order){
    var n=a.length;
    var m=b.length;
    if(order=="asc")
        return n>m?1:-1;
    else
        return n<m?1:-1;
}

Details

the custom sort has three params:valueA,valueB,order; where the order can be "asc" or "des"

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDateFormat DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setDateFormat

sets a mask for date formatting in the grid (works for "dhxCalendar" and "dhxCalendarA" types only)

void setDateFormat(string mask,string server_mask);

Parameters

mask | string | sets the client-side date format
server_mask | string | sets the server-side date format

Available only in PRO Edition

Example

mygrid.setDateFormat("%m/%d/%Y", "%Y/%m/%d"); // 05/26/2010, 2010/05/26

Details

You can get more format details in the chapter Formatting Number and Date Values.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDelimiter DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setDelimiter

sets a delimiter character used in list values (default is ",")

void setDelimiter(string delim);

Parameters

delim string delimiter as a string

Example

mygrid.setDelimiter(";");
mygrid.setHeader("First Column;Second Column;Third Column");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDragBehavior DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setDragBehavior

sets Drag-And-Drop behavior

void setDragBehavior(string mode);

Parameters

mode string the name of the behavior

Example

mygrid.setDragBehavior("sibling");

Details

the possible variants of behavior mode:

  • child - the item is dropped as a child of the target item;
  • sibling - the item is dropped as a sibling of the target item; if drop occurs between the parent and the child elements, the item is moved to the parent level;
  • complex - the item is dropped as a sibling or a child depending on the position of the target item towards the landing; if drop occurs between the parent and the child elements, the item is moved to the parent level;
  • sibling-next - the item is dropped as a sibling of the target; if drop occurs between the parent and the child elements, the item is moved to the child level;
  • complex-next - the item is dropped as a sibling or a child depending on the position of the target item towards the landing; if drop occurs between the parent and the child elements, the item is moved to the child level.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setEditable DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setEditable

manages the editability of the grid

void setEditable(boolean mode);

Parameters

mode boolean set non-editable if FALSE, set editable otherwise

Example

//set grid editable
mygrid.setEditable(true);
//set grid non-editable
mygrid.setEditable(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setExternalTabOrder DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setExternalTabOrder

sets elements which get focus when the Tab button is pressed in the last or in the first (Tab+Shift) cell

void setExternalTabOrder(string|number|HTMLElement start,string|number|HTMLElement end);

Parameters

start | string|number|HTMLElement | HTML object or its id - gets focus when Tab+Shift are pressed in the first cell
end | string|number|HTMLElement | HTML object or its id - gets focus when Tab is pressed in the last cell

Example

mygrid.setExternalTabOrder("elem1","elem2");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setFieldName DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setFieldName

allows defining an input's name which will be used for data sending,

void setFieldName(string name);

Parameters

name string the mask of an input's name

Example

mygrid.setFieldName("{GRID_ID}[{ROW_INDEX}].{COLUMN_ID}"); // gridbox[0].columnA

Details

the input's name may contain the following auto-replaced elements:

  • GRID_ID - the id of the grid's container,
  • ROW_ID - the ID of a row,
  • ROW_INDEX - the index of a row,
  • COLUMN_ID - the id of a column,
  • COLUMN_INDEX - the index of a column.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setFiltrationLevel DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setFiltrationLevel

allows to define which level of tree must be used for filtering

void setFiltrationLevel(number level,boolean show_upper);

Parameters

level | number | level value, -1 value means the last one
show_upper | boolean | enables/disables the "Top Level Show" mode

Available only in PRO Edition

Details

the show_upper param enables the mode in which the upper level items without children and matching the filtering criteria are still shown, the items situated on the filtration level and below are hidden. More details are given in the article Filtering in TreeGrid.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setFooterLabel DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setFooterLabel

sets a new label for a cell in the footer

void setFooterLabel(number col,string label,number ind);

Parameters

col | number | the index of a column
label | string | a new label for the specified footer's column. Can contain img:[imageUrl]Text Label
ind | number | the index of a footer row (optional, 1 by default)

Example

//set a new label for the first cell in the first footer's line
mygrid.setFooterLabel(0,'New Label');
//set a new label with an image for the first cell in the second footer's line
mygrid.setFooterLabel(0,'img:[../codebase/imgs/image.gif]New Label',1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setHeader DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setHeader

sets the header label and default params for new headers

void setHeader(string hdrStr,string splitSign,array styles);

Parameters

hdrStr | string | a header string with delimiters
splitSign | string | a string used as a split marker, optional. Default is "#cspan"
styles | array | an array of header styles

Example

// setting columns' labels
mygrid.setHeader("A,B,C");
// setting columns' labels and their styles
mygrid.setHeader(
    "A,B,C",
    null,
    ["text-align:right;","text-align:left;","text-align:center"]
);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconsPath DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setIconsPath

sets the path to external images used in the grid (tree and img column type)

void setIconsPath(string path);

Parameters

path string url of (or a relative path to) the images' folder with the closing ”/”

Example

myGrid.setIconsPath("../codebase/imgs/icons_greenfolders/");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconset DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setIconset

sets the font awesome iconset

void setIconset(string name);

Parameters

name string "fontawesome"

Example

myTreeGrid.setIconset("fontawesome");

Related samples

  • TreeGrid - font awesome icons
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setImageSize DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setImageSize

sets size of treegrid images

void setImageSize(number width,number height);

Parameters

width | number | width of image
height | number | height of image
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setImagesPath DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setImagesPath

defines the path to the imgs folder

void setImagesPath(string path);

Parameters

path string the path to the imgs folder, relative to the current page

Example

grid.setImagesPath("./codebase/imgs");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setInitWidths DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setInitWidths

sets the width of columns in pixels

void setInitWidths(string wp);

Parameters

wp string a list of columns' width in pixels

Example

mygrid.setInitWidths("150,100,100,100,100");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setInitWidthsP DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setInitWidthsP

sets the width of columns in percents

void setInitWidthsP(string wp);

Parameters

wp string a list of columns' width in percents. The sum of columns' widths must be equal to 100.

Example

mygrid.setInitWidthsP("50,40,10");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemCloseable DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setItemCloseable

enables/disables closing of row

void setItemCloseable(string|number rowId,boolean status);

Parameters

rowId | string|number | id of row
status | boolean | enables/disables closing of row

Example

myTreeGrid.setItemCloseable(rowId, status)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemIcon DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setItemIcon

sets a Font Awesome icon for an item

void setItemIcon(string|number rowId,string icon);

Parameters

rowId | string|number | the row id
icon | string | the name of an icon from the Font Awesome collection

Example

myTreeGrid.setItemIcon("row1", "folder-o");

Related samples

  • TreeGrid - font awesome icons
See also
  • API
    • getItemIcon
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setItemImage DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setItemImage

sets image of tree col

void setItemImage(string|number rowId,string url);

Parameters

rowId | string|number | id of row
url | string | image url

Example

myTreeGrid.setItemImage(rowId,"../../../dhtmlxGrid/codebase/imgs/csh_bluebooks/folder.gif")

Details

Note, this method should be called only after appropriate row is loaded

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemText DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setItemText

sets real caption of tree col

void setItemText(string|number rowId,string newtext);

Parameters

rowId | string|number | id of row
newtext | string | new text

Example

myTreeGrid.setItemText(rowId, "New Text")

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setMathRound DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setMathRound

enables/disables rounding during the math calculations

void setMathRound(number digits);

Parameters

digits number set how many digits must be rounded, set 0 for disabling

Available only in PRO Edition

Example

mygrid.setMathRound(2);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setNoHeader DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setNoHeader

creates a grid without header

void setNoHeader(boolean fl);

Parameters

fl boolean true - for not using header in the grid

Example

mygrid.setNoHeader(true);

Details

call the method before initialization, but after the setHeader() call. The setHeader() method should be called any way, as it defines the number of columns.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setNumberFormat DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setNumberFormat

sets a mask for formatting numeric data (works for "edn", "ron" excell only)

void setNumberFormat(string mask,number cInd,string p_sep,string d_sep);

Parameters

mask | string | a numeric mask; for example 0,000.00 - 1,234.56
cInd | number | the index of a column
p_sep | string | a char used as a decimal separator (point by default)
d_sep | string | a char used as groups part separator (comma by default)

Available only in PRO Edition

Example

mygrid.setNumberFormat("0,000.00",index,".",",");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOnOpenEndHandler DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setOnOpenEndHandler

sets function called after tree node opened/closed

void setOnOpenEndHandler(function func);

Parameters

func function event handling function
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOnOpenStartHandler DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setOnOpenStartHandler

sets function called before tree node opened/closed

void setOnOpenStartHandler(function func);

Parameters

func function event handling function
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setPagingSkin DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setPagingSkin

allows setting a custom paging skin

void setPagingSkin(string name);

Parameters

name string the skin's name (default,toolbar,bricks)

Example

//set the "bricks" paging skin
mygrid.setPagingSkin("bricks");
//set the "toolbar" paging skin with the "dhx_skyblue" toolbar's skin
mygrid.setPagingSkin("toolbar");
//set the "toolbar" paging skin with the "dhx_web" toolbar's skin
mygrid.setPagingSkin("toolbar","dhx_web");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setPagingTemplates DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setPagingTemplates

allows setting paging templates for the default skin

void setPagingTemplates(string navigation_template,string info_template);

Parameters

navigation_template | string | a template for paging controls zone
info_template | string | a template for paging state zone

Example

mygrid.setPagingTemplates(
    "Pages - [current:0] [current:+1] [current:+2], from [total] rows",
    "Pages <b>[from]-[to]</b> of <b>[total]</b>"
);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setPagingWTMode DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setPagingWTMode

configures the paging with toolbar mode

void setPagingWTMode(boolean navButtons,boolean navLabel,boolean pageSelect,boolean|array perPageSelect);

Parameters

navButtons | boolean | enables/disables navigation buttons
navLabel | boolean | enables/disables a navigation label
pageSelect | boolean | enables/disables a page selector
perPageSelect | boolean|array | enables/disables a rows-per-page selector. If the parameter is specified as an array, it defines options of the dropdown list.

Available only in PRO Edition

Example

//disables the page selector
mygrid.setPagingWTMode(true,true,false,true);
//disables the row-per-page selector
mygrid.setPagingWTMode(true,true,true,false);
//defines options of the row-per-page selector: 30 rows per page, 60 rows per page,etc.
mygrid.setPagingWTMode(true,true,true,[30,60,90,120])

Details

the method must be called BEFORE the enablePaging() call

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowAttribute DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setRowAttribute

sets a row attribute

void setRowAttribute(string|number id,string name,mixed value);

Parameters

id | string|number | the id of a row
name | string | an attribute's name
value | mixed | a new attribute's value

Example

<?xml version='1.0' encoding='iso-8859-1'?>
<rows>
    <row id="unique_rowid" some="data">
        <cell some="data">cell content</cell>
    </row>
</rows>
...
var rowAttr = grid.setRowAttribute("unique_rowid","some","new value");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowColor DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setRowColor

sets the background color of a row (via the bgcolor attribute)

void setRowColor(string|number row_id,string color);

Parameters

row_id | string|number | the id of a row
color | string | a color value

Example

mygrid.setRowColor("row1","red");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowData DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setRowData

sets new data for row's columns

void setRowData(string rowId,object data);

Parameters

rowId | string | the row id
data | object | data to be set for a row in JSON format

Example

var new_data = {"id1":"value","id2":"value2","id3":"value3"};
myGrid.setRowData("row1",new_data); // setting new data for the row with id "row1"

Details

In order to set data for the row, you need to check that related columns have ids specified.

See also
  • API
    • getRowData
    • Change log

    added in version 5.1

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setRowExcellType DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setRowExcellType

sets an excell type for all cells in the specified row

void setRowExcellType(string|number rowId,string type);

Parameters

rowId | string|number | the id of a row
type | string | the type of an excell

Available only in PRO Edition

Example

//set the "ra_str" type for the cells in the row with the id "row1"
mygrid.setRowExcellType("row1","ra_str");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowHidden DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setRowHidden

hides/shows a row

void setRowHidden(string|number id,boolean state);

Parameters

id | string|number | the id of a row
state | boolean | true/false to hide/show a row

Example

// hide row with the id "row1"
mygrid.setRowHidden("row1",true);
// show row with the id "row1"
mygrid.setRowHidden("row1",false);

Details

Warning! This command doesn't affect row indexes, only visual appearance.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowId DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setRowId

sets a new id for a row by its index

void setRowId(number ind,string|number row_id);

Parameters

ind | number | the index of a row
row_id | string|number | a new id of a row

Example

//set a new id for the first row
mygrid.setRowId(0,"new_row_id");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowTextBold DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setRowTextBold

sets the text of a row BOLD

void setRowTextBold(string|number row_id);

Parameters

row_id string|number the id of a row

Example

mygrid.setRowTextBold("row1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowTextNormal DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setRowTextNormal

sets the text weight of a row to normal

void setRowTextNormal(string|number row_id);

Parameters

row_id string|number the id of a row

Example

mygrid.setRowTextNormal("row1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowTextStyle DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setRowTextStyle

sets the style of a row

void setRowTextStyle(string|number row_id,string styleString);

Parameters

row_id | string|number | the id of a row
styleString | string | a style string in the common format (example: "color:red;border:1px solid gray;")

Example

grid.setRowTextStyle("r123", "background-color: red; font-family: arial;");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setRowspan DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setRowspan

sets rowspan of the specified length starting from the specified cell

void setRowspan(string|number rowID,number colInd,number length);

Parameters

rowID | string|number | the id of a row
colInd | number | the index of a column
length | number | the length of rowspan

Available only in PRO Edition

Example

mygrid.setRowspan("row1",0,2);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSerializableColumns DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setSerializableColumns

specifies which column must be serialized (if you don't use this method, all columns will be serialized)

void setSerializableColumns(string list);

Parameters

list string a list of true/false values separated by comma, if the list is empty, all fields will be serialized

Available only in PRO Edition

Example

//serialize only the 1st and the 4th columns
mygrid.setSerializableColumns("true,false,false,true,false,false,false");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSerializationLevel DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setSerializationLevel

configures XML serialization

void setSerializationLevel(boolean userData,boolean selectedAttr,boolean config,boolean changedAttr,boolean onlyChanged,boolean asCDATA);

Parameters

userData | boolean | enable/disable user data serialization
selectedAttr | boolean | include the "selected" row's attribute in the resulting XML
config | boolean | serialize the grid's configuration (only the information about the grid's structure)
changedAttr | boolean | include the "changed" cell's attribute in the resulting XML
onlyChanged | boolean | include only the changed rows in the resulting XML
asCDATA | boolean | output cell values as CDATA sections (prevent invalid XML)

Available only in PRO Edition

Example

mygrid.setSerializationLevel(true,false,true,false,true,true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSizes DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setSizes

resets sizes of the grid's elements

void setSizes();

Example

mygrid.setSizes();

Details

the method is used to refresh the grid after the size of its container has changed

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setSkin

sets one of the predefined skins ("material" (default),"skyblue","web","terrace")

void setSkin(string name);

Parameters

name string the name of a style

Example

myGrid.setSkin("web"); // sets the "light" skin to the grid

See also
  • Articles
    • Exploring Available Skins
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setSortImgState DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setSortImgState

sets the position and visibility of a sort arrow

void setSortImgState(boolean state,number ind,string order,number row);

Parameters

state | boolean | true/false to show/hide an image
ind | number | the index of a column
order | string | asc/desc - the type of an image (optional, "asc" by default)
row | number | one-based index of the header row (used in multirow headers, the top row by default)

Example

//minimal parameters set
mygrid.setSortImgState(true,1);
//maximal parameters set
mygrid.setSortImgState(true,1,"desc",2);
//hide the sorting image
mygrid.setSortImgState(false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setStyle DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setStyle

modifies the default style of the grid and its elements

void setStyle(string ss_header,string ss_grid,string ss_selCell,string ss_selRow);

Parameters

ss_header | string | style def. expression for the header
ss_grid | string | style def. expression for grid cells
ss_selCell | string | style def. expression for the selected cell
ss_selRow | string | style def. expression for the selected row

Example

mygrid.setStyle(
    "background-color:navy;color:white;font-weight:bold;",
    "","color:red;",""
);

Details

call the method before or after init()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSubGrid DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setSubGrid

attaches a grid-like editor to a grid's column

void setSubGrid(object subgrid,number sInd,number tInd);

Parameters

subgrid | object | the subgrid object
sInd | number | the column of the main grid, which should contain the subgrid
tInd | number | the column of the subgrid, its value will be displayed in the main grid cell

Example

mygrid.setColTypes("grid");
mygrid.setSubGrid(subgrid,sInd,tInd);

Details

read more about a grid-like editor in the article Column Types

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSubTree DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setSubTree

attaches a tree-like editor to a grid's column

void setSubTree(object subgrid,number sInd);

Parameters

subgrid | object | the tree object
sInd | number | the column of the main grid, which should contain the tree

Example

mygrid.setColTypes("stree");
mygrid.setSubTree(subgrid,sInd);

Details

read more about a grid-like editor in the article Column Types

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setTabOrder DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setTabOrder

sets the tab order of columns

void setTabOrder(string order);

Parameters

order string a list of tab indexes (the default delimiter is ",")

Example

mygrid.setTabOrder("1,3,5,2,4,6,7,8");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setUserData DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

setUserData

sets user data for a row

void setUserData(string|number row_id,string name,mixed value);

Parameters

row_id | string|number | the id of a row, if empty, user data is set for grid (not for a row)
name | string | the name of a user data block
value | mixed | the value of a user data block

Example

//set row userdata
mygrid.setUserData("unique_rowid","someName1","new value");
//set global userdata
mygrid.setUserData("","someName1","new value");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRow DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

showRow

scrolls a grid to make the specified row visible

void showRow(number|string rowID);

Parameters

rowID number|string the id of a row

Example

mygrid.showRow("row1");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


sortRows DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

sortRows

sorts the Grid by the specified column

void sortRows(number col,string type,string order);

Parameters

col | number | the index of the column, by which the grid needs to be sorted
type | string | the sorting type ("str"|"int"|"date"), optional, by default the sorting type is taken from the column's setting
order | string | the sorting order ("asc"|"des"), optional, by default the sorting order is based on the previous sorting operation

Example

//sort the first column in the grid
myGrid.sortRows(0);
//sort the first column in the grid by the "str" type in the "des" order
myGrid.sortRows(0,"str","des");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


sortTreeRows DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

sortTreeRows

sorts TreeGrid by the specified column

void sortTreeRows(number col,string type,string order);

Parameters

col | number | the index of the column, by which the TreeGrid needs to be sorted
type | string | the sorting type ("str"|"int"|"date"), optional, by default the sorting type is taken from the column's setting
order | string | the sorting order ("asc"|"des"), optional, by default the sorting order is based on the previous sorting operation

Example

// sort the first column in the TreeGrid
myTreeGrid.sortRows(0);
// sort the first column in the TreeGrid by the "str" type in the "des" order
myTreeGrid.sortRows(0,"str","des");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


splitAt DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

splitAt

splits the grid

void splitAt(number ind);

Parameters

ind number the index of the column at which the grid should be split

Available only in PRO Edition

Example

mygrid.splitAt(2);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


startFastOperations DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

startFastOperations

starts the fast operation mode

void startFastOperations();

Available only in PRO Edition

Example

mygrid.startFastOperations();

for (var i=0; i<1000; i++)
    mygrid.addRow(mygrid.uid(),[i,"new row"]);

mygrid.stopFastOperations();

Details

in the fast operation mode events are not generated, some time-consuming actions are applied only once, which allows increasing the performance

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


stopFastOperations DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

stopFastOperations

turns off the fast operation mode, needs to be executed to normalize the view

void stopFastOperations();

Example

mygrid.startFastOperations();

for (var i=0; i<1000; i++)
    mygrid.addRow(mygrid.uid(),[i,"new row"]);

mygrid.stopFastOperations();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


submitAddedRows DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

submitAddedRows

includes additional data with the info about which rows were added and which ones deleted, enabled by default

void submitAddedRows(boolean mode);

Parameters

mode boolean enable/disable the mode

Example

mygrid.submitAddedRows(true);

Details

the method is incompatible with the submitSerialization method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


submitColumns DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

submitColumns

sets the list of columns the data of which will be updated

void submitColumns(string inds);

Parameters

inds string a list of columns' indexes

Available only in PRO Edition

Example

mygrid.submitColumns("0,1,2,5");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


submitOnlyChanged DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

submitOnlyChanged

includes only the changed rows into the form submit

void submitOnlyChanged(boolean mode);

Parameters

mode boolean enable/disable the mode

Example

mygrid.submitOnlyChanged(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


submitOnlyRowID DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

submitOnlyRowID

includes only rows' IDS into the form submit

void submitOnlyRowID(boolean mode);

Parameters

mode boolean enable/disable the mode

Example

mygrid.submitOnlyRowID(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


submitOnlySelected DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

submitOnlySelected

includes only the selected rows into the form submit

void submitOnlySelected(boolean mode);

Parameters

mode boolean enable/disable the mode

Example

mygrid.submitOnlySelected(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


submitSerialization DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

submitSerialization

includes a serialized grid as a part of the form submit

void submitSerialization(boolean mode);

Parameters

mode boolean enable/disable the mode

Example

mygrid.submitSerialization(true);

Details

the method is incompatible with the submitAddedRows method

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


toExcel DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

toExcel

exports data from dhtmxlGrid to an Excel document

void toExcel(string path);

Parameters

path string the path to the generate.php file resided in the Export package

Available only in PRO Edition

Example

mygrid.toExcel('codebase/grid-excel-php/generate.php');

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


toPDF DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

toPDF

exports data from dhtmxlGrid to a PDF document

void toPDF(string path);

Parameters

path string the path to the generate.php file resided in the Export package

Available only in PRO Edition

Example

mygrid.toPDF('codebase/grid-pdf-php/generate.php');

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


treeToGridElement DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

treeToGridElement

redefine this method in your code to specify how tree node values should be used in the grid

void treeToGridElement(object treeObj,string|number treeNodeId,string|number gridRowId);

Parameters

treeObj | object | a tree object
treeNodeId | string|number | the id of a node created in the tree
gridRowId | string|number | the id of a grid's row

Available only in PRO Edition

Example

grid.treeToGridElement = function(tree,treeID,gridID){
  var z=[treeObj.getItemText(treeID)]; //set tree text as a value of 1st column in grid
  return z;
}

Details

by using the input parameters you can change the id of a new row, values for cells, userdata blocks, etc.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


uid DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

uid

returns the unique ID

void uid();

Example

var uniqueID=mygrid.uid();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unGroup DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

unGroup

ungroups the grid to return it into the plain view

void unGroup();

Available only in PRO Edition

Example

mygrid.unGroup();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


uncheckAll DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

uncheckAll

unchecks all checkboxes of the grid

void uncheckAll();

Example

mygrid.uncheckAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unmarkAll DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

unmarkAll

removes selection from all the marked cells

void unmarkAll();

Available only in PRO Edition

Example

mygrid.unmarkAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


updateCellFromClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

updateCellFromClipboard

sets the value of a cell from the clipboard

void updateCellFromClipboard( [string|number rowId,number cellInd] );

Parameters

rowId | string|number | the id of a row (optional, the selected row is used by default)
cellInd | number | the index of a column (optional, the selected cell is used by default)

Available only in PRO Edition

Example

//minimal parameters set
mygrid.updateCellFromClipboard();
//maximal parameters set
mygrid.updateCellFromClipboard("rowID",0);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


updateFromXML DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

updateFromXML

refreshes grid from XML (doesn't work for buffering, tree grid or rows in smart rendering mode)

void updateFromXML(string url,boolean insert_new,boolean del_missed,function afterCall);

Parameters

url | string | url of the file
insert_new | boolean | insert new items (optional, true by default)
del_missed | boolean | delete missed rows (optional, false by default)
afterCall | function | the function that will be executed after refresh is completted

Example

//update grid from xml
mygrid.updateFromXML("grid_updated.xml");
//update grid from xml, insert new items, delete missed rows,
//execute the doAfterUpdate() function after rows have been updated
mygrid.updateFromXML("grid_updated.xml",true,true,doAfterUpdate);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


updateGroups DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

updateGroups

forces grid grouping by registered parameters

void updateGroups();

Available only in PRO Edition

Example

mygrid.updateGroups();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


updateRowFromClipboard DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

updateRowFromClipboard

sets the value of a row from the clipboard

void updateRowFromClipboard( [string|number rowId] );

Parameters

rowId string|number the id of a row (optional, the selected row is used by default)

Available only in PRO Edition

Example

//minimal parameters set
mygrid.updateRowFromClipboard();
//maximal parameters set
mygrid.updateRowFromClipboard("rowID");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


validateCell DHTMLX Docs

Documentation
  • addRow
  • addRowAfter
  • addRowBefore
  • addRowFromClipboard
  • adjustColumnSize
  • attachEvent
  • attachFooter
  • attachHeader
  • attachToObject
  • cellById
  • cellByIndex
  • cellToClipboard
  • cells
  • cells2
  • changePage
  • changePageRelative
  • changeRowId
  • checkAll
  • clearAll
  • clearAndLoad
  • clearChangedState
  • clearConfigCookie
  • clearSelection
  • closeItem
  • collapseAll
  • collapseAllGroups
  • collapseColumns
  • collapseGroup
  • collectTreeValues
  • collectValues
  • copyBlockToClipboard
  • copyRowContent
  • deleteChildItems
  • deleteColumn
  • deleteRow
  • deleteSelectedRows
  • destructor
  • detachEvent
  • detachFooter
  • detachHeader
  • disableUndoRedo
  • doRedo
  • doUndo
  • doesRowExist
  • editCell
  • editStop
  • enableAccessKeyMap
  • enableAlterCss
  • enableAutoHeight
  • enableAutoHiddenColumnsSaving
  • enableAutoSaving
  • enableAutoSizeSaving
  • enableAutoWidth
  • enableBlockSelection
  • enableCSVAutoID
  • enableCSVHeader
  • enableCellIds
  • enableColSpan
  • enableColumnAutoSize
  • enableColumnMove
  • enableContextMenu
  • enableDistributedParsing
  • enableDragAndDrop
  • enableDragOrder
  • enableEditEvents
  • enableEditTabOnly
  • enableExcelKeyMap
  • enableHeaderImages
  • enableHeaderMenu
  • enableKeyboardSupport
  • enableLightMouseNavigation
  • enableMarkedCells
  • enableMathEditing
  • enableMathSerialization
  • enableMercyDrag
  • enableMultiline
  • enableMultiselect
  • enableOrderSaving
  • enablePaging
  • enablePreRendering
  • enableResizing
  • enableRowsHover
  • enableRowspan
  • enableSmartRendering
  • enableSmartXMLParsing
  • enableSortingSaving
  • enableStableSorting
  • enableTooltips
  • enableTreeCellEdit
  • enableTreeGridLines
  • enableUndoRedo
  • enableValidation
  • expandAll
  • expandAllGroups
  • expandColumns
  • expandGroup
  • filterBy
  • filterByAll
  • filterTreeBy
  • findCell
  • forEachCell
  • forEachRow
  • forEachRowInGroup
  • forceFullLoading
  • forceLabelSelection
  • getAllRowIds
  • getAllSubItems
  • getCellExcellType
  • getChangedRows
  • getCheckedRows
  • getChildItemIdByIndex
  • getColIndexById
  • getColLabel
  • getColType
  • getColTypeById
  • getColWidth
  • getColumnCombo
  • getColumnId
  • getColumnLabel
  • getColumnsNum
  • getCombo
  • getCustomCombo
  • getFilterElement
  • getFooterLabel
  • getHeaderMenu
  • getItemIcon
  • getItemImage
  • getItemText
  • getLevel
  • getMarked
  • getOpenState
  • getParentId
  • getRedo
  • getRowAttribute
  • getRowData
  • getRowId
  • getRowIndex
  • getRowsNum
  • getSelectedBlock
  • getSelectedCellIndex
  • getSelectedRowId
  • getSortingState
  • getStateOfView
  • getSubItems
  • getUndo
  • getUserData
  • gridFromClipboard
  • gridToClipboard
  • gridToGrid
  • gridToTreeElement
  • groupBy
  • groupStat
  • hasChildren
  • init
  • insertColumn
  • isColumnHidden
  • load
  • loadHiddenColumnsFromCookie
  • loadOpenStates
  • loadOrderFromCookie
  • loadSizeFromCookie
  • loadSortingFromCookie
  • lockRow
  • makeFilter
  • makeSearch
  • mark
  • moveColumn
  • moveRow
  • moveRowDown
  • moveRowTo
  • moveRowUp
  • openItem
  • parse
  • pasteBlockFromClipboard
  • post
  • preventIECaching
  • printView
  • refreshComboColumn
  • refreshFilters
  • refreshMath
  • registerCList
  • rowToClipboard
  • rowToDragElement
  • saveHiddenColumnsToCookie
  • saveOpenStates
  • saveOrderToCookie
  • saveSizeToCookie
  • saveSortingToCookie
  • selectAll
  • selectBlock
  • selectCell
  • selectRow
  • selectRowById
  • serialize
  • serializeToCSV
  • setActive
  • setAwaitedRowHeight
  • setCSVDelimiter
  • setCellExcellType
  • setCellTextStyle
  • setCheckedRows
  • setColAlign
  • setColLabel
  • setColSorting
  • setColTypes
  • setColVAlign
  • setColValidators
  • setColWidth
  • setColspan
  • setColumnColor
  • setColumnExcellType
  • setColumnHidden
  • setColumnId
  • setColumnIds
  • setColumnLabel
  • setColumnMinWidth
  • setColumnsVisibility
  • setCustomSorting
  • setDateFormat
  • setDelimiter
  • setDragBehavior
  • setEditable
  • setExternalTabOrder
  • setFieldName
  • setFiltrationLevel
  • setFooterLabel
  • setHeader
  • setIconsPath
  • setIconset
  • setImageSize
  • setImagesPath
  • setInitWidths
  • setInitWidthsP
  • setItemCloseable
  • setItemIcon
  • setItemImage
  • setItemText
  • setMathRound
  • setNoHeader
  • setNumberFormat
  • setOnOpenEndHandler
  • setOnOpenStartHandler
  • setPagingSkin
  • setPagingTemplates
  • setPagingWTMode
  • setRowAttribute
  • setRowColor
  • setRowData
  • setRowExcellType
  • setRowHidden
  • setRowId
  • setRowTextBold
  • setRowTextNormal
  • setRowTextStyle
  • setRowspan
  • setSerializableColumns
  • setSerializationLevel
  • setSizes
  • setSkin
  • setSortImgState
  • setStyle
  • setSubGrid
  • setSubTree
  • setTabOrder
  • setUserData
  • showRow
  • sortRows
  • sortTreeRows
  • splitAt
  • startFastOperations
  • stopFastOperations
  • submitAddedRows
  • submitColumns
  • submitOnlyChanged
  • submitOnlyRowID
  • submitOnlySelected
  • submitSerialization
  • toExcel
  • toPDF
  • treeToGridElement
  • uid
  • unGroup
  • uncheckAll
  • unmarkAll
  • updateCellFromClipboard
  • updateFromXML
  • updateGroups
  • updateRowFromClipboard
  • validateCell
Start TreeGrid dhtmlXTreeGrid API Methods

validateCell

forces validation of a specific cell

void validateCell(string|number id,number index,function rule);

Parameters

id | string|number | the id of the cell's row
index | number | the index of the cell's column
rule | function | the validation function

Example

mygrid.validateCell(1,1);//when a cell has some validator(s) assigned already
//or

//when a cell doesn't have any validators assigned
mygrid.validateCell(1,1,dhtmlxValidation.isValidTime);

//or
dhtmlxValidation.isMin4=function(data){
    return data.length>=4;    // the length of data should be more than 4 symbols
};
mygrid.validateCell(1,1,dhtmlxValidation.isMin4);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onAfterCMove
    • onAfterRowDeleted
    • onAfterSorting
    • onBeforeBlockSelected
    • onBeforeCMove
    • onBeforeContextMenu
    • onBeforeDrag
    • onBeforeFormSubmit
    • onBeforePageChanged
    • onBeforeRowDeleted
    • onBeforeSelect
    • onBeforeSorting
    • onBlockRightClick
    • onBlockSelected
    • onCalendarShow
    • onCellChanged
    • onCellMarked
    • onCellUnMarked
    • onCheck
    • onCheckbox
    • onClearAll
    • onCollectValues
    • onColumnCollapse
    • onColumnHidden
    • onDataReady
    • onDhxCalendarCreated
    • onDistributedEnd
    • onDrag
    • onDragIn
    • onDragOut
    • onDrop
    • onDynXLS
    • onEditCancel
    • onEditCell
    • onEmptyClick
    • onEnter
    • onFilterEnd
    • onFilterStart
    • onGridReconstructed
    • onGroup
    • onGroupClick
    • onGroupStateChanged
    • onHeaderClick
    • onKeyPress
    • onLastRow
    • onLiveValidationCorrect
    • onLiveValidationError
    • onMouseOver
    • onOpenEnd
    • onOpenStart
    • onPageChanged
    • onPaging
    • onResize
    • onResizeEnd
    • onRightClick
    • onRowAdded
    • onRowCreated
    • onRowDblClicked
    • onRowHide
    • onRowIdChange
    • onRowInserted
    • onRowPaste
    • onRowSelect
    • onScroll
    • onSelectStateChanged
    • onStatReady
    • onSubAjaxLoad
    • onSubGridCreated
    • onSubRowOpen
    • onSyncApply
    • onTab
    • onUndo
    • onUnGroup
    • onValidationCorrect
    • onValidationError
    • onXLE
    • onXLS
  • Others
Start TreeGrid dhtmlXTreeGrid API

Events

onAfterCMove | fires after the column has been moved to a new position
onAfterRowDeleted | fires after a row has been deleted from the grid
onAfterSorting | fires exactly after sorting has occured in the grid
onBeforeBlockSelected | fires when the user starts selecting a block
onBeforeCMove | fires when a column moving operation starts
onBeforeContextMenu | fires immediately before showing a context menu
onBeforeDrag | fires when the drag operation starts
onBeforeFormSubmit | fires before submitting data to the form
onBeforePageChanged | fires before the active page in the grid is changed (paging extension)
onBeforeRowDeleted | fires right before a row is deleted
onBeforeSelect | fires a moment before a row in the grid is selected
onBeforeSorting | fires before data sorting is started
onBlockRightClick | fires after clicking by the right mouse button on the selection block
onBlockSelected | fires when some area is selected in the grid (block selection extension)
onCalendarShow | fires when a calendar pops up in the grid
onCellChanged | fires when a cell value has been changed by user actions or by API calls ( )
onCellMarked | fires immediately after a cell has been selected
onCellUnMarked | fires immediately after a cell is unselected
onCheck | fires after the state of a checkbox has been changed
onCheckbox | the event is deprecated, use the onCheck event instead; fires after the state was changed
onClearAll | fires when the grid is cleared (reloaded)
onCollectValues | fires after the values have been collected to fill the select filter
onColumnCollapse | the event occurs after a group of columns has been collapsed
onColumnHidden | fires after a column has been hidden (the setColumnHidden method has been called)
onDataReady | fires when the data is loaded to the grid but hasn't been rendered yet
onDhxCalendarCreated | fires on calendar's initialization on the page
onDistributedEnd | fires on the end of distributed parsing
onDrag | fires when an item is dragged to another target and the mouse is released, the event can be blocked
onDragIn | fires when an item is dragged to a potential target (the event can be blocked)
onDragOut | fires when an item is dragged out of the potential target (the event can be blocked)
onDrop | fires when an item is already placed in its final position
onDynXLS | fires before requesting additional data from the server in case of dynamic Smart Rendering or dynamic Paging
onEditCancel | fires when the edit operation was canceled
onEditCell | fires 1-3 times depending on cell's editability (see the stage parameter)
onEmptyClick | fires on clicking the dhtmlxgrid area which is not filled with data
onEnter | fires immediately after the Enter key was pressed
onFilterEnd | fires when filtering is completed (filtering extension)
onFilterStart | fires when filtering has been activated but before the real filtering started
onGridReconstructed | fires immediately after a row has been added/deleted or the grid has been reordered
onGroup | fires when a grid was grouped by some column
onGroupClick | fires on clicking a group row (can be blocked)
onGroupStateChanged | fires when a group was opened/closed
onHeaderClick | fires right after the header has been clicked, before sorting or any other actions
onKeyPress | fires after a key has been pressed but before the default key processing starts
onLastRow | fires on pressing the Down-Arrow button while the last row of the page is selected
onLiveValidationCorrect | fires when validation runs successfully
onLiveValidationError | fires when validation runs and rules execution are failed
onMouseOver | fires when the mouse pointer is moved over a cell
onOpenEnd | fires after opening or closing a branch in treegrid
onOpenStart | fires at the moment when the "plus" icon is clicked in treegrid
onPageChanged | fires after the active page of the grid has been changed (paging extension)
onPaging | fires each time when paging settings are changed (paging extension)
onResize | fires on each resize iteration
onResizeEnd | fires when resizing of a column is finished
onRightClick | fires immediately after the right mouse button has been clicked on a grid's row
onRowAdded | fires right after a row has been added to the grid
onRowCreated | fires after a row has been created in the grid and filled with data
onRowDblClicked | fires right after a row has been double clicked, before a cell editor is opened by a dbl click
onRowHide | fires when the row is hiding
onRowIdChange | fires after the ID of a row has been changed (changeRowId, setRowId, dataprocessor)
onRowInserted | fires when the row is added to the grid and filled with data
onRowPaste | fires for each row pasted from the clipboard (block selection extension)
onRowSelect | fires immediately after a row in the grid has been clicked
onScroll | fires immediately after scrolling has occured
onSelectStateChanged | fires immediately when the selection state has been changed
onStatReady | fires after the stat values have been calculated
onSubAjaxLoad | fires when sub-row-ajax cell loads its data
onSubGridCreated | fires when the creation of a sub-grid was initialized (can be blocked)
onSubRowOpen | fires when a sub-row(sub-grid) was opened/closed
onSyncApply | fires when data synchronization is finished
onTab | fires during the tabulation in the grid, blockable
onUndo | fires after the undo operation is implemented
onUnGroup | fires when the grid was ungrouped
onValidationCorrect | fires when validation runs successfully
onValidationError | fires when validation runs and rules execution are failed
onXLE | fires simultaneously with ending XML parsing, new items are already available in the grid
onXLS | fires before sending the request for a new XML to the server
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterCMove DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onAfterCMove

fires after the column has been moved to a new position

void onAfterCMove(number cInd,number posInd){ ... };

Parameters

cInd | number | the index of the moved column
posInd | number | the index of the new position

Available only in PRO Edition

Example

mygrid.attachEvent("onAfterCMove", function(cInd,posInd){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterRowDeleted DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onAfterRowDeleted

fires after a row has been deleted from the grid

void onAfterRowDeleted(string|number id, [string|number pid] ){ ... };

Parameters

id | string|number | the id of the deleted item
pid | string|number | the parent ID, makes sense for TreeGrid only

Example

grid.attachEvent("onAfterRowDeleted", function(id,pid){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterSorting DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onAfterSorting

fires exactly after sorting has occured in the grid

void onAfterSorting(number index,string type,string direction){ ... };

Parameters

index | number | the index of a column
type | string | the sorting type("str","int","date")
direction | string | the direction of sorting ("asc","des")

Available only in PRO Edition

Example

grid.attachEvent("onAfterSorting", function(index,type,direction){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeBlockSelected DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onBeforeBlockSelected

fires when the user starts selecting a block

void onBeforeBlockSelected(string rId,number cInd){ ... };

Parameters

rId | string | start selection point row ID
cInd | number | start selection point column index

Example

mygrid.attachEvent("onBeforeBlockselected",function(id,ind){
    //your code here
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeCMove DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onBeforeCMove

fires when a column moving operation starts

void onBeforeCMove(number cInd,number posInd){ ... };

Parameters

cInd | number | the index of the moved column
posInd | number | the index of a new position

Available only in PRO Edition

Example

mygrid.attachEvent("onBeforeCMove", function(cInd,posInd){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeContextMenu DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onBeforeContextMenu

fires immediately before showing a context menu

void onBeforeContextMenu(string|number id,number ind,object obj){ ... };

Parameters

id | string|number | the id of the clicked row
ind | number | the index of the cell column
obj | object | a grid object

Available only in PRO Edition

Example

grid.attachEvent("onBeforeContextMenu", function(id,ind,obj){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDrag DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onBeforeDrag

fires when the drag operation starts

void onBeforeDrag(string|number id){ ... };

Parameters

id string|number the id of the dragged row

Example

grid.attachEvent("onBeforeDrag", function(id){
    //your code here
});

Details

The event can be blocked - return false to block the row's dragging

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeFormSubmit DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onBeforeFormSubmit

fires before submitting data to the form

void onBeforeFormSubmit(){ ... };

Available only in PRO Edition

Example

mygrid.attachEvent("onBeforeFormsubmit", function(){
    //your code here
    return true;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforePageChanged DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onBeforePageChanged

fires before the active page in the grid is changed (paging extension)

void onBeforePageChanged(number ind,number count){ ... };

Parameters

ind | number | the index of the current page
count | number | the count of pages

Available only in PRO Edition

Example

grid.attachEvent("onBeforePageChanged", function(ind,count){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeRowDeleted DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onBeforeRowDeleted

fires right before a row is deleted

void onBeforeRowDeleted(string|number rId){ ... };

Parameters

rId string|number the id of a row

Available only in PRO Edition

Example

grid.attachEvent("onBeforeRowDeleted", function(rId){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeSelect DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onBeforeSelect

fires a moment before a row in the grid is selected

void onBeforeSelect(string|number new_row,string|number old_row,number new_col_index){ ... };

Parameters

new_row | string|number | the id of a newly selected row
old_row | string|number | the id of a previously selected row
new_col_index | number | the index of a newly selected cell/column

Available only in PRO Edition

Example

grid.attachEvent("onBeforeSelect", function(new_row,old_row,new_col_index){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeSorting DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onBeforeSorting

fires before data sorting is started

void onBeforeSorting(number ind,string type,string direction){ ... };

Parameters

ind | number | the index of a column
type | string | the sorting type ("str","int","date")
direction | string | the direction of sorting ("asc","des")

Available only in PRO Edition

Example

grid.attachEvent("onBeforeSorting", function(ind,type,direction){
    //your code here
    return false;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBlockRightClick DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onBlockRightClick

fires after clicking by the right mouse button on the selection block

void onBlockRightClick(string block,object ev){ ... };

Parameters

block | string | a constant
ev | object | a mouseEvent

Example

mygrid.attachEvent("onBlockRightClick",function(block,e){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBlockSelected DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onBlockSelected

fires when some area is selected in the grid (block selection extension)

void onBlockSelected(){ ... };

Available only in PRO Edition

Example

grid.attachEvent("onBlockSelected", function(){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCalendarShow DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onCalendarShow

fires when a calendar pops up in the grid

void onCalendarShow(object myCal,string|number row_id,number col_ind){ ... };

Parameters

myCal | object | the calendar object
row_id | string|number | the id of the related row
col_ind | number | the index of the related column

Example

grid.attachEvent("onCalendarShow",function(myCal,row_id,col_ind){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCellChanged DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onCellChanged

fires when a cell value has been changed by user actions or by API calls ( )

void onCellChanged(string|number rId,number cInd,mixed nValue){ ... };

Parameters

rId | string|number | the id of a row
cInd | number | the index of a cell
nValue | mixed | a new value

Available only in PRO Edition

Example

grid.attachEvent("onCellChanged", function(rId,cInd,nValue){
    //your code here
});

Details

the event will be called for data set during the loading from XML data, or during the adding of a new row as well

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCellMarked DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onCellMarked

fires immediately after a cell has been selected

void onCellMarked(string|number rid,string|number ind){ ... };

Parameters

rid | string|number | the id of the selected row
ind | string|number | the index of the selected cell

Available only in PRO Edition

Example

grid.attachEvent("onCellMarked", function(rid,ind){
    //your code here
});

Details

the event works only with "Markers" extension

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCellUnMarked DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onCellUnMarked

fires immediately after a cell is unselected

void onCellUnMarked(string|number rid,number ind){ ... };

Parameters

rid | string|number | the id of the selected row
ind | number | the index of the selected cell

Available only in PRO Edition

Example

grid.attachEvent("onCellUnMarked", function(rid,ind){
    //your code here
});

Details

the event works only with "Markers" extension

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCheck DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onCheck

fires after the state of a checkbox has been changed

void onCheck(string|number rId,number cInd,boolean state){ ... };

Parameters

rId | string|number | the id of a row
cInd | number | the index of a cell
state | boolean | the state of the checkbox/radiobutton

Available only in PRO Edition

Example

grid.attachEvent("onCheck", function(rId,cInd,state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCheckbox DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onCheckbox

the event is deprecated, use the onCheck event instead; fires after the state was changed

void onCheckbox(string|number rId,number cInd,boolean state){ ... };

Parameters

rId | string|number | the id of the row
cInd | number | the index of a cell
state | boolean | the state of the checkbox/radiobutton

Available only in PRO Edition

Example

grid.attachEvent("onCheckbox", function(rId,cInd,state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClearAll DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onClearAll

fires when the grid is cleared (reloaded)

void onClearAll(){ ... };

Available only in PRO Edition

Example

grid.attachEvent("onClearAll", function(){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCollectValues DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onCollectValues

fires after the values have been collected to fill the select filter

void onCollectValues(number index){ ... };

Parameters

index number the index of a column

Available only in PRO Edition

Example

grid.attachEvent("onCollectValues", function(index){
    //your code here
    return true; //mandatory for the default processing
});

Details

The event can be used to provide a custom list of options for select filter.

grid.attachEvent("onCollectValues", function(index){
    if (index == 2)
        return ["one","two","three"]; //options for select filter
    else
        return true; //default processing
});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onColumnCollapse DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onColumnCollapse

the event occurs after a group of columns has been collapsed

void onColumnCollapse(number ind,boolean state){ ... };

Parameters

ind | number | the index of the first column of the group
state | boolean | the state of the collapse: true - the column was collapsed, false - the column was expanded

Available only in PRO Edition

Example

mygrid.attachEvent("onColumnCollapse",function(ind,state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onColumnHidden DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onColumnHidden

fires after a column has been hidden (the setColumnHidden method has been called)

void onColumnHidden(number index,boolean state){ ... };

Parameters

index | number | the index of a column
state | boolean | true - the column is hidden, otherwise the column is shown

Available only in PRO Edition

Example

grid.attachEvent("onColumnHidden", function(index,state){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDataReady DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onDataReady

fires when the data is loaded to the grid but hasn't been rendered yet

void onDataReady(){ ... };

Example

mygrid.attachEvent("onDataReady",function(){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDhxCalendarCreated DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onDhxCalendarCreated

fires on calendar's initialization on the page

void onDhxCalendarCreated(object myCal){ ... };

Parameters

myCal object the calendar object

Example

grid.attachEvent("onDhxCalendarCreated",function(myCal){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDistributedEnd DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onDistributedEnd

fires on the end of distributed parsing

void onDistributedEnd(){ ... };

Available only in PRO Edition

Example

grid.attachEvent("onDistributedEnd", function(){
    // your code here
});

Details

in the case of distributed parsing the onXLE event will mark just the moment when data was loaded and the first bunch of data was processed.
The moment when all data was processed and rendered can be detected by the onDistributedEnd event.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDrag DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onDrag

fires when an item is dragged to another target and the mouse is released, the event can be blocked

boolean onDrag(string|number sId,string|number tId,object sObj,object tObj,number sInd,number tInd){ ... };

Parameters

sId | string|number | the id of the source item
tId | string|number | the id of the target item
sObj | object | the source grid object
tObj | object | the target grid object
sInd | number | the index of the column from which drag has started
tInd | number | the index of the column in which drop occurs

Returns

boolean true - confirms drag-and-drop, false - denies drag-and-drop

Available only in PRO Edition

Example

grid.attachEvent("onDrag", function(sId,tId,sObj,tObj,sInd,tInd){
    // your code here
});

Details

to get more info, read the article Drag-and-Drop Support

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDragIn DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onDragIn

fires when an item is dragged to a potential target (the event can be blocked)

void onDragIn(string|number dId,string|number tId,object sObj,object tObj){ ... };

Parameters

dId | string|number | the id of the dragged item
tId | string|number | the id of the potential drop landing
sObj | object | a grid object
tObj | object | the target grid object

Available only in PRO Edition

Example

mygrid.attachEvent("onDragIn", function(dId,tId,sObj,tObj){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDragOut DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onDragOut

fires when an item is dragged out of the potential target (the event can be blocked)

void onDragOut(string|number dId,string|number tId,object sObj,object tObj){ ... };

Parameters

dId | string|number | the id of the dragged item
tId | string|number | the id of the potential drop landing
sObj | object | a grid object
tObj | object | the target grid object

Available only in PRO Edition

Example

mygrid.attachEvent("onDragOut", function(dId,tId,sObj,tObj){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDrop DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onDrop

fires when an item is already placed in its final position

void onDrop(string|number sId,string|number tId,string|number dId,object sObj,object tObj,number sCol,number tCol){ ... };

Parameters

sId | string|number | the id of the source item
tId | string|number | the id of the target item
dId | string|number | the id of the dropped item (makes sense for mercy drag-n-drop)
sObj | object | the source grid object
tObj | object | the target grid object
sCol | number | the index of the column from which drag started
tCol | number | the index of the column in which drop occurs

Available only in PRO Edition

Example

grid.attachEvent("onDrop", function(sId,tId,dId,sObj,tObj,sCol,tCol){
    // your code here
});

Details

the event can be used to catch the moment when the operation is finished

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDynXLS DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onDynXLS

fires before loading data of the child rows in case of dynamic loading mode

void onDynXLS(string rowId){ ... };

Parameters

rowId string id of the expanding row

Available only in PRO Edition

Example

treegrid.attachEvent("onDynXLS", function(rowId){
    //your code here
});

Details

the event is blockable

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEditCancel DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onEditCancel

fires when the edit operation was canceled

void onEditCancel(string|number rowId,number colInd,mixed value){ ... };

Parameters

rowId | string|number | the id of a row
colInd | number | the index of a column
value | mixed | the value of a cell

Example

mygrid.attachEvent("onEditCancel",function(rId,cInd,val){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEditCell DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onEditCell

fires 1-3 times depending on cell's editability (see the stage parameter)

mixed onEditCell(number stage,string|number rId,number cInd,number nValue,number oValue){ ... };

Parameters

stage | number | the stage of editing (0-before start; can be canceled if return false,1 - the editor is opened,2- the editor is closed)
rId | string|number | the id of a row
cInd | number | the index of a cell
nValue | number | a new value (only for the stage 2)
oValue | number | an old value (only for the stage 2)

Returns

mixed true - editing is confirmed, false - editing is canceled; or a new value of the cell

Available only in PRO Edition

Example

grid.attachEvent("onEditCell", function(stage,rId,cInd,nValue,oValue){
    // your code here
});

Details

the event is commonly used for validation

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEmptyClick DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onEmptyClick

fires on clicking the dhtmlxgrid area which is not filled with data

void onEmptyClick(object ev){ ... };

Parameters

ev object MouseEvent

Example

grid.attachEvent("onEmptyClick", function(ev){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onEnter DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onEnter

fires immediately after the Enter key was pressed

void onEnter(string|number id,number ind){ ... };

Parameters

id | string|number | the id of a row
ind | number | the index of a cell

Available only in PRO Edition

Example

grid.attachEvent("onEnter", function(id,ind){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onFilterEnd DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onFilterEnd

fires when filtering is completed (filtering extension)

void onFilterEnd(array elements){ ... };

Parameters

elements array a collection of filtering elements

Available only in PRO Edition

Example

grid.attachEvent("onFilterEnd", function(elements){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onFilterStart DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onFilterStart

fires when filtering has been activated but before the real filtering started

boolean onFilterStart(array indexes,array values){ ... };

Parameters

indexes | array | an array of indexes
values | array | an array of filtering values

Returns

boolean returning true will confirm filtering

Available only in PRO Edition

Example

grid.attachEvent("onFilterStart", function(indexes,values){
    // your code here
    return true;
});

Details

The event is blockable. Returning false will block the default action.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onGridReconstructed DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onGridReconstructed

fires immediately after a row has been added/deleted or the grid has been reordered

void onGridReconstructed(object grid_obj){ ... };

Parameters

grid_obj object a grid object

Available only in PRO Edition

Example

grid.attachEvent("onGridReconstructed", function(grid_obj){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onGroup DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onGroup

fires when a grid was grouped by some column

void onGroup(){ ... };

Available only in PRO Edition

Example

grid.attachEvent("onGroup", function(){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onGroupClick DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onGroupClick

fires on clicking a group row (can be blocked)

void onGroupClick(string name){ ... };

Parameters

name string the name of a group

Available only in PRO Edition

Example

mygrid.attachEvent("onGroupClick",function(name){
    //your code here
    return false;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onGroupStateChanged DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onGroupStateChanged

fires when a group was opened/closed

void onGroupStateChanged(string|number value,boolean state){ ... };

Parameters

value | string|number | the key value of a group
state | boolean | the open state, true - opened

Available only in PRO Edition

Example

grid.attachEvent("onGroupStateChanged", function(value,state){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onHeaderClick DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onHeaderClick

fires right after the header has been clicked, before sorting or any other actions

void onHeaderClick(number ind,object obj){ ... };

Parameters

ind | number | the index of a column
obj | object | the related javascript event object

Available only in PRO Edition

Example

grid.attachEvent("onHeaderClick", function(ind,obj){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onKeyPress DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onKeyPress

fires after a key has been pressed but before the default key processing starts

void onKeyPress(number code,boolean cFlag,boolean sFlag){ ... };

Parameters

code | number | key code
cFlag | boolean | control key flag
sFlag | boolean | shift key flag

Available only in PRO Edition

Example

grid.attachEvent("onKeyPress", function(code,cFlag,sFlag){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onLastRow DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onLastRow

fires on pressing the Down-Arrow button while the last row of the page is selected

void onLastRow(){ ... };

Example

myGrid.attachEvent("onLastRow",function(){
    // your code here
});

Details

The event is blockable. Returning false in case of dynamic loading and paging will block switching to the next page.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onLiveValidationCorrect DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onLiveValidationCorrect

fires when validation runs successfully

void onLiveValidationCorrect(string|number id,number index,mixed value,object input,string rule){ ... };

Parameters

id | string|number | the id of a row
index | number | the index of a column
value | mixed | the value of a cell
input | object | an input object
rule | string | the name of a rule

Available only in PRO Edition

Example

grid.attachEvent("onLiveValidationCorrect", function(id,index,value,input,rule){
    // your code here
});

Details

read more details in the article Validating Data Items

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onLiveValidationError DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onLiveValidationError

fires when validation runs and rules execution are failed

void onLiveValidationError(string|number id,number index,mixed value,object input,string rule){ ... };

Parameters

id | string|number | the id of a row
index | number | the index of a column
value | mixed | the value of a cell
input | object | an input object
rule | string | the name of a rule

Available only in PRO Edition

Example

grid.attachEvent("onLiveValidationError", function(id,index,value,input,rule){
    // your code here
});

Details

read more details in the article Validating Data Items

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMouseOver DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onMouseOver

fires when the mouse pointer is moved over a cell

void onMouseOver(string|number id,number ind){ ... };

Parameters

id | string|number | the id of a row
ind | number | the index of a cell

Available only in PRO Edition

Example

grid.attachEvent("onMouseOver", function(id,ind){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onOpenEnd DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onOpenEnd

fires after opening or closing a branch in treegrid

void onOpenEnd(string|number id,number state){ ... };

Parameters

id | string|number | the id of the related tree-item
state | number | the current item state, 1 if item is currently opened

Example

treegrid.attachEvent("onOpenEnd", function(){
  //custom code here
  return true;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onOpenStart DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onOpenStart

fires at the moment when the "plus" icon is clicked in treegrid

boolean onOpenStart(string|number id,number state){ ... };

Parameters

id | string|number | the id of the related tree-item
state | number | the current item state, 1 if item is currently opened

Returns

boolean true - confirms opening/closing, false - denies opening/closing

Example

treegrid.attachEvent("onOpenStart", function(){
  //custom code here
  return true;
});

Details

Fires before real item opening, also fires for item closing.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onPageChanged DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onPageChanged

fires after the active page of the grid has been changed (paging extension)

void onPageChanged(number ind,number fInd,number lInd){ ... };

Parameters

ind | number | the index of the current page
fInd | number | the index of the first row of the page
lInd | number | the index of the last row of the page

Available only in PRO Edition

Example

grid.attachEvent("onPageChanged", function(ind,fInd,lInd){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onPaging DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onPaging

fires each time when paging settings are changed (paging extension)

void onPaging(number count){ ... };

Parameters

count number the count of pages

Available only in PRO Edition

Example

grid.attachEvent("onPaging", function(count){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onResize DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onResize

fires on each resize iteration

void onResize(number cInd,number cWidth,object obj){ ... };

Parameters

cInd | number | the index of a cell
cWidth | number | the width of a cell
obj | object | the grid object

Available only in PRO Edition

Example

grid.attachEvent("onResize", function(cInd,cWidth,obj){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onResizeEnd DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onResizeEnd

fires when resizing of a column is finished

void onResizeEnd(object obj){ ... };

Parameters

obj object the grid object

Available only in PRO Edition

Example

grid.attachEvent("onResizeEnd", function(obj){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRightClick DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onRightClick

fires immediately after the right mouse button has been clicked on a grid's row

void onRightClick(string|number id,number ind,object obj){ ... };

Parameters

id | string|number | the id of the clicked row
ind | number | the index of the cell column
obj | object | an event object

Available only in PRO Edition

Example

grid.attachEvent("onRightClick", function(id,ind,obj){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowAdded DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onRowAdded

fires right after a row has been added to the grid

void onRowAdded(string|number rId){ ... };

Parameters

rId string|number the id of a row

Available only in PRO Edition

Example

grid.attachEvent("onRowAdded", function(rId){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowCreated DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onRowCreated

fires after a row has been created in the grid and filled with data

void onRowCreated(string|number rId,object rObj,object rXML){ ... };

Parameters

rId | string|number | the id of a row
rObj | object | the row object
rXML | object | the related XML (if available)

Available only in PRO Edition

Example

grid.attachEvent("onRowCreated", function(rId,rObj,rXml){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowDblClicked DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onRowDblClicked

fires right after a row has been double clicked, before a cell editor is opened by a dbl click

void onRowDblClicked(string|number rId,index cInd){ ... };

Parameters

rId | string|number | the id of a row
cInd | index | the index of a column

Available only in PRO Edition

Example

grid.attachEvent("onRowDblClicked", function(rId,cInd){
    // your code here
});

Details

if returns false, the event is canceled

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowHide DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onRowHide

fires when the row is hiding

void onRowHide(string|number id,boolean state){ ... };

Parameters

id | string|number | the id of a row
state | boolean | true, if the row is hiding, false for showing the row

Example

mygrid.attachEvent("onColumnCollapse",function(id,state){
    //your code here
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowIdChange DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onRowIdChange

fires after the ID of a row has been changed (changeRowId, setRowId, dataprocessor)

void onRowIdChange(string|number old_id,string|number new_id){ ... };

Parameters

old_id | string|number | the old ID of a row
new_id | string|number | the new ID of a row

Available only in PRO Edition

Example

grid.attachEvent("onRowIdChange", function(old_id,new_id){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowInserted DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onRowInserted

fires when the row is added to the grid and filled with data

void onRowInserted(object row,number rInd){ ... };

Parameters

row | object | the row object
rInd | number | the row's index

Example

mygrid.attachEvent("onRowInserted",function(row,rInd){
    //your code here
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowPaste DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onRowPaste

fires for each row pasted from the clipboard (block selection extension)

void onRowPaste(string|number rId){ ... };

Parameters

rId string|number the id of the row

Available only in PRO Edition

Example

grid.attachEvent("onRowPaste", function(rId){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowSelect DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onRowSelect

fires immediately after a row in the grid has been clicked

void onRowSelect(string|number id,number ind){ ... };

Parameters

id | string|number | the id of the clicked row
ind | number | the index of the clicked cell

Available only in PRO Edition

Example

grid.attachEvent("onRowSelect", function(id,ind){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onScroll DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onScroll

fires immediately after scrolling has occured

void onScroll(number sLeft,number sTop){ ... };

Parameters

sLeft | number | left scroll value
sTop | number | top scroll value

Available only in PRO Edition

Example

grid.attachEvent("onScroll", function(sLeft,sTop){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelectStateChanged DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onSelectStateChanged

fires immediately when the selection state has been changed

void onSelectStateChanged(string|number id){ ... };

Parameters

id string|number the id or the list of ids of selected row(s)

Available only in PRO Edition

Example

grid.attachEvent("onSelectStateChanged", function(id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onStatReady DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onStatReady

fires after the stat values have been calculated

void onStatReady(){ ... };

Available only in PRO Edition

Example

grid.attachEvent("onStatReady", function(){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSubAjaxLoad DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onSubAjaxLoad

fires when sub-row-ajax cell loads its data

void onSubAjaxLoad(string|number id,string content){ ... };

Parameters

id | string|number | the ID of the row for which data is loaded
content | string | the response received from the server

Available only in PRO Edition

Example

grid.attachEvent("onSubAjaxLoad", function(id,content){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSubGridCreated DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onSubGridCreated

fires when the creation of a sub-grid was initialized (can be blocked)

void onSubGridCreated(object sub_grid_obj,string|number rId,number rInd){ ... };

Parameters

sub_grid_obj | object | sub-grid object
rId | string|number | the id of the related row
rInd | number | the index of the related row

Example

//The event can be used to change the grid behavior:
mygrid.attachEvent("onSubGridCreated",function(subgrid){
    subgrid.enableMultiselect(true);
    subgrid.enableEditEvents(false,false,false);
    return true; // mandatory!
});
//The event can be used to completely change the way the sub-grid is loaded
grid.attachEvent("onSubGridCreated",function(subgrid){
    subgrid.setHeader("A,B,C");
    subgrid.setColTypes("ro,ro,ro");
    subgrid.setInitWidths("100,100,100");
    subgrid.init();
    subgrid.load("data.xml");
    return false;  // block default behavior
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSubRowOpen DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onSubRowOpen

fires when a sub-row(sub-grid) was opened/closed

void onSubRowOpen(string|number id,boolean state){ ... };

Parameters

id | string|number | the id of a row
state | boolean | the open state, true - opened

Available only in PRO Edition

Example

grid.attachEvent("onSubRowOpen", function(id,state){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSyncApply DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onSyncApply

fires when data synchronization is finished

void onSyncApply(){ ... };

Example

myTreeGrid.attachEvent("onSyncApply", function(){
    //your code here
});

Details

If the grid.sync(store) method was called, the grid will be updated each time when data is changed in the store. The onSyncApply event handler will be called after grid update.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onTab DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onTab

fires during the tabulation in the grid, blockable

void onTab(boolean mode){ ... };

Parameters

mode boolean the direction of tabulation (true for straight tab, false for backward tab)

Available only in PRO Edition

Example

grid.attachEvent("onTab", function(mode){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onUndo DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onUndo

fires after the undo operation is implemented

void onUndo(string|number rowId){ ... };

Parameters

rowId string|number the id of a row

Available only in PRO Edition

Example

mygrid.attachEvent("onUndo",function(rId){
    //your code here
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onUnGroup DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onUnGroup

fires when the grid was ungrouped

void onUnGroup(){ ... };

Available only in PRO Edition

Example

grid.attachEvent("onUnGroup", function(){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onValidationCorrect DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onValidationCorrect

fires when validation runs successfully

void onValidationCorrect(string|number id,number index,mixed value,string rule){ ... };

Parameters

id | string|number | the id of a row
index | number | the index of a column
value | mixed | the value of a cell
rule | string | the name of a rule

Available only in PRO Edition

Example

grid.attachEvent("onValidationCorrect", function(id,index,value,rule){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onValidationError DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onValidationError

fires when validation runs and rules execution are failed

void onValidationError(string|number id,number index,mixed value,string rule){ ... };

Parameters

id | string|number | the id of a row
index | number | the index of a column
value | mixed | the value of a cell
rule | string | the name of a rule

Example

myGrid.attachEvent("onValidationError", function(id,index,value,rule){
    // your code here
    return true;
});

Details

the event is blockable, returning false will ignore the validation error

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onXLE

fires simultaneously with ending XML parsing, new items are already available in the grid

void onXLE(object grid_obj,number count){ ... };

Parameters

grid_obj | object | the grid object
count | number | the count of added rows

Available only in PRO Edition

Example

grid.attachEvent("onXLE", function(grid_obj,count){
    //your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onAfterCMove
  • onAfterRowDeleted
  • onAfterSorting
  • onBeforeBlockSelected
  • onBeforeCMove
  • onBeforeContextMenu
  • onBeforeDrag
  • onBeforeFormSubmit
  • onBeforePageChanged
  • onBeforeRowDeleted
  • onBeforeSelect
  • onBeforeSorting
  • onBlockRightClick
  • onBlockSelected
  • onCalendarShow
  • onCellChanged
  • onCellMarked
  • onCellUnMarked
  • onCheck
  • onCheckbox
  • onClearAll
  • onCollectValues
  • onColumnCollapse
  • onColumnHidden
  • onDataReady
  • onDhxCalendarCreated
  • onDistributedEnd
  • onDrag
  • onDragIn
  • onDragOut
  • onDrop
  • onDynXLS
  • onEditCancel
  • onEditCell
  • onEmptyClick
  • onEnter
  • onFilterEnd
  • onFilterStart
  • onGridReconstructed
  • onGroup
  • onGroupClick
  • onGroupStateChanged
  • onHeaderClick
  • onKeyPress
  • onLastRow
  • onLiveValidationCorrect
  • onLiveValidationError
  • onMouseOver
  • onOpenEnd
  • onOpenStart
  • onPageChanged
  • onPaging
  • onResize
  • onResizeEnd
  • onRightClick
  • onRowAdded
  • onRowCreated
  • onRowDblClicked
  • onRowHide
  • onRowIdChange
  • onRowInserted
  • onRowPaste
  • onRowSelect
  • onScroll
  • onSelectStateChanged
  • onStatReady
  • onSubAjaxLoad
  • onSubGridCreated
  • onSubRowOpen
  • onSyncApply
  • onTab
  • onUndo
  • onUnGroup
  • onValidationCorrect
  • onValidationError
  • onXLE
  • onXLS
Start TreeGrid dhtmlXTreeGrid API Events

onXLS

fires before sending the request for a new XML to the server

void onXLS(object grid_obj){ ... };

Parameters

grid_obj object the grid object

Available only in PRO Edition

Example

grid.attachEvent("onXLS", function(grid_obj){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • csvParser
    • editor
    • kidsXmlFile
Start TreeGrid dhtmlXTreeGrid API

Others

csvParser | object that controls CSV parsing
editor | reference to the cell that is in the edit state
kidsXmlFile | path to script for dyn. loading
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


csvParser DHTMLX Docs

Documentation
  • csvParser
  • editor
  • kidsXmlFile
Start TreeGrid dhtmlXTreeGrid API Others

csvParser

object that controls CSV parsing

object csvParser;

Example

var array_data = grid.csvParser.unblock( string_data, cell_separator, row_separator );

Details

To enable advanced CSV parsing you can use:

grid.csvParser = grid.csvExtParser;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


editor DHTMLX Docs

Documentation
  • csvParser
  • editor
  • kidsXmlFile
Start TreeGrid dhtmlXTreeGrid API Others

editor

reference to the cell that is in the edit state

object editor;

Example

grid.editor.getValue();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


kidsXmlFile DHTMLX Docs

Documentation
  • csvParser
  • editor
  • kidsXmlFile
Start TreeGrid dhtmlXTreeGrid API Others

kidsXmlFile

path to script for dyn. loading

string kidsXmlFile;

Example

grid.kidsXmlFile = "data.php";

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing TreeGrid DHTMLX Docs

Documentation
  • dhtmlXTreeGrid API
  • Initializing TreeGrid
    • XML
    • JSON
  • Loading and Manipulating Data
  • TreeGrid Specific API
  • TreeGrid Specific Extensions
  • Filtering in TreeGrid
  • Using Get-Methods
  • Font Awesome Icons in TreeGrid
Start TreeGrid

Initializing TreeGrid

dhtmlxTreeGrid can be loaded only from XML or JSON formats

Script initialization of TreeGrid is the same as the one used for Grid. All the user should do is to decide what column should have a tree structure and use a "tree" eXcell for this purpose.

XML

XML structure should be as follows:

<?xml version="1.0" encoding="UTF-8"?>
<rows parent="h0">
    <userdata name="gud1">
        userdata value 1
    </userdata>
    <row id="h523" selected="1" call="1" xmlkids="1">
        <userdata name="hondaUD">
            userdata value for honda
        </userdata>
        <cell image="folder.gif">Honda</cell>
        <cell>...</cell>
        <cell>...</cell>
    </row>
</rows>

All XML tags and attributes are the same as for dhtmlxGrid. The difference is in the following:

  • <rows> element can have the following attribute in TreeGrid:
    • parent - (for dynamic loading) id of the row that is the parent of the items under current rows;
  • <rows> has the following TreeGrid specific attributes:
    • xmlkids - (for dynamic loading) this row has/doesn't have child rows;
    • open - defines if a row is expanded (for TreeGrid);
    • style - specifies CSS style for the current row;
  • <cell> element also possesses TreeGrid specific parameter:
    • image - optional (default is "leaf.gif") for a tree column; image name to use as a tree node icon.

Related sample: TreeGrid initialization

JSON

JSON format for TreeGrid:

{
    rows:[
        { id:'1001',
        data:[
            {"value":"row A","image":"folder.gif"},
            "A Time to Kill",
            "John Grisham",
            "12.99",
            "1",
            "05/01/1998"
        ],
        rows:[
            { id:'sub_1001',
            data:[
                "subrowA",
                "Blood and Smoke",
                "Stephen King",
                "0",
                "1",
                "01/01/2000"
            ]},
            { id:'sub_1002',
            data:[
                "subrowB",
                "Blood and Smoke",
                "Stephen King",
                "0",
                "1",
                "01/01/2000"
            ]}
        ]},
        { id:'1002',
        xmlkids:'1',
        data:[
            "row B",
            "The Green Mile",
            "Stephen King",
            "11.10",
            "1",
            "01/01/1992"]
         }
    ]
};

Related sample: TreeGrid initialization from JSON (dhtmlx format)
Related sample: TreeGrid initialization from JSON (plain format)

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading and Manipulating Data DHTMLX Docs

Documentation
  • dhtmlXTreeGrid API
  • Initializing TreeGrid
  • Loading and Manipulating Data
    • Dynamic Loading in TreeGrid
    • Smart Parsing in TreeGrid
    • Setting Item's Label
    • Adding/Removing Rows
    • Expanding/Collapsing Rows
  • TreeGrid Specific API
  • TreeGrid Specific Extensions
  • Filtering in TreeGrid
  • Using Get-Methods
  • Font Awesome Icons in TreeGrid
Start TreeGrid

Loading and Manipulating Data

Dynamic Loading in TreeGrid

Dynamic loading means loading the levels on request (on opening a node that has children). To make it work in dhtmlxTreeGrid the following requirements should be fulfilled:

  • When initializing TreeGrid, the URL of the server routine that returns the nested level should be specified:
    treegrid.kidsXmlFile="pro_treeGrid_dynamic.php";
    This routine will get the URL parameter's id that is the id of the row that was opened (in other words, id of the row that is the parent of the level that should be returned by the above-mentioned routine).
  • Initial TreeGrid XML (as well as the XML returned by the routine mentioned in the previous point) should have <row> tags with the attribute xmlkids="1" (only the rows that have child items):
    <row id="parent1" xmlkids="1">
    <cell>...</cell>
    ...
    JSON format:
    {
    rows:[
        {id:"parent1",xmlkids:"1", data:["row A"]}
    ]
};
  • The XML returned by the routine specified in the first point should have the attribute parent="xxx" in the top level tag <rows>:
    <rows parent="parent1">
    <row id="child1" xmlkids="1">
        <cell>...
        ...

Related sample: Dynamic loading (using PHP)

Smart Parsing in TreeGrid

Smart parsing can increase the performance of the TreeGrid control when the user has lots of nodes and levels in it. Smart parsing can be enabled in the following way:

treegrid.enableSmartXMLParsing(true);

Related sample: Smart Parsing

Setting Item's Label

The following method is used for setting item's label in TreeGrid:

treegrid.setLabel(val); // new label value

Adding/Removing Rows

It's simple to add a new row into dhtmlxTreeGrid with the help of the method addRow:

treegrid.addRow(new_id, text, ind);

The parameters of the method are responsible for the following:

  • new_id - id of a new row;
  • text - array/string of row labels, can be a comma-separated list or an array;
  • ind - should be set to null;
  • parent_id - id of the parent row;
  • img - url to images for this new row;
  • child(true/false) - child flag, optional.

Related sample: TreeGrid basic operations

Expanding/Collapsing Rows

The following methods should be used to expand/collapse a row in the TreeGrid:

treegrid.openItem(rowId);
treegrid.closeItem(rowId);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


TreeGrid Specific API DHTMLX Docs

Documentation
  • dhtmlXTreeGrid API
  • Initializing TreeGrid
  • Loading and Manipulating Data
  • TreeGrid Specific API
    • Built-in Iterator
    • Cookies Manipulation
    • Events Handling
  • TreeGrid Specific Extensions
  • Filtering in TreeGrid
  • Using Get-Methods
  • Font Awesome Icons in TreeGrid
Start TreeGrid

TreeGrid Specific API

Built-in Iterator

This way of TreeGrid iteration has the following characteristics:

  • the used parameter - row ID;
  • the order of iteration is not equal to the current rows order in the grid (basically, it is equal to the order of rows' adding into the grid, but it can be inconsistent);
  • in case of paging or smart rendering mode, all rows being parsed at the current moment will be affected;
  • in case of applied filtering, all rows in the grid (including the filtered out ones) will be included into iteration;
  • in case of TreeGird, all rows will be processed, including those in the closed branches.
treegrid.forEachRow(function(id){ //function that gets row's id as an incoming argument
//here id - row ID
do_something_with_row(id);
})

You can implement a loop for the children of the specified row in TreeGrid as:

treegrid._h2.forEachChild(parent_id,function(element){
//element.id - id of child row
//element.parent.id - parent id
do_something_with_row(element.id);
});

where parent_id - id of the rows for which the functionality will be executed.

Cookies Manipulation

To interact with cookies in case of TreeGrid a user can apply the following methods :

treegrid.saveOpenStates(name,cookie_param); // store open state of TreeGrid in cookies
treegrid.loadOpenStates(name,cookie_param); // load open state of TreeGrid from cookies

The parameters the user should indicate are:

  • name - optional, cookie name;
  • cookie_param - additional parameters added to cookie.

Events Handling

The TreeGrid extension uses all Grid's events, but there are two additional ones. The following purely TreeGrid events are available:

Opening Events

  • onOpenStart Event - fires after an item in the tree has got the command to open/close, but before this item has opened/closed; it also fires for unclosable nodes and nodes without open/close functionality - in that case the result of the function will be ignored;
  • onOpenEnd Event - fires after an item in the tree has got the command to open/close and the related change in the structure has been processed (that includes data loading in case of TreeGrid in dynamic loading mode).
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


TreeGrid Specific Extensions DHTMLX Docs

Documentation
  • dhtmlXTreeGrid API
  • Initializing TreeGrid
  • Loading and Manipulating Data
  • TreeGrid Specific API
  • TreeGrid Specific Extensions
    • Lines Between Nodes
    • Math Formulas in TreeGrid
    • Statistic Counters in TreeGrid
    • Setting Drag Behavior
  • Filtering in TreeGrid
  • Using Get-Methods
  • Font Awesome Icons in TreeGrid
Start TreeGrid

TreeGrid Specific Extensions

Lines Between Nodes

The user can enable/disable lines between TreeGrid nodes (disabled by default) by means of calling the following command:

treegrid.enableTreeGridLines(true);

Related sample: TreeGrid lines

Math Formulas in TreeGrid

In addition to standard dhtmlxGrid math formulas, TreeGrid has the ability to calculate totals for children values:

treegrid.setColTypes("ed,ed,ed,ed,ed[=sum]");

It means that each parent element in the last column will contain the sum of cells in the child rows of the same column.

Related sample: Math calculations

Statistic Counters in TreeGrid

TreeGrid provides additional set of built-in statistics counters (the default statistics counters work only for visible rows, and won't work correctly in case of the treegrid in which some rows can be hidden in closed branches). There are the following statistics counters available:

  • stat_tree_total - counts total of all values in a column;
  • stat_tree_total_leaf - counts total of all values in a column, but includes only the values on the last level of the tree;
  • stat_tree_multi_total - counts the total of column's multiplication;
  • stat_tree_multi_total_leaf - counts total of column's multiplication, but includes only the values on the last level of the tree;
  • stat_tree_max - counts the maximal value in a column;
  • stat_tree_max_leaf - counts the maximal value in a column, but includes only the values on the last level of the tree;
  • stat_tree_min - counts the minimal value in a column;
  • stat_tree_min_leaf - counts the minimal value in a column, but includes only the values on the last level of the tree;
  • stat_tree_average - counts the average value in a column;
  • stat_tree_average_leaf - counts the average value in a column, but includes only the values on the last level of the tree;
  • stat_tree_count - counts a real count of items in the TreeGrid;
  • stat_tree_count_leaf - counts a real count of items in the TreeGrid, but includes only the values on the last level of the tree.

Setting Drag Behavior

Drag-And-Drop behavior for TreeGrid can be set in the following way:

treegrid.setDragBehavior(mode);

It is possible to select one of the following modes:

  • child - the item is dropped as a child of the target item;
  • sibling - the item is dropped as a sibling of the target item; if drop occurs between the parent and the child elements, the item is moved to the parent level;
  • complex - the item is dropped as a sibling or a child depending on the position of the target item towards the landing; if drop occurs between the parent and the child elements, the item is moved to the parent level;
  • sibling-next - the item is dropped as a sibling of the target; if drop occurs between the parent and the child elements, the item is moved to the child level;
  • complex-next - the item is dropped as a sibling or a child depending on the position of the target item towards the landing; if drop occurs between the parent and the child elements, the item is moved to the child level.

Related sample: Drag and Drop between Grids

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Filtering in TreeGrid DHTMLX Docs

Documentation
  • dhtmlXTreeGrid API
  • Initializing TreeGrid
  • Loading and Manipulating Data
  • TreeGrid Specific API
  • TreeGrid Specific Extensions
  • Filtering in TreeGrid
    • Filtering by Level
    • "Top Level Show" Mode
  • Using Get-Methods
  • Font Awesome Icons in TreeGrid
Start TreeGrid

Filtering in TreeGrid

While filtering in a plain grid is pretty obvious and doesn't have space for variations, filtering in TreeGrid can be applied in many different ways.

Filtering by Level

Filtering in TreeGrid affects only the last level of hierarchy (leaf items) by default. This mode can be enabled with the help of the method setFiltrationLevel:

treegrid.setFilrationLevel(-1);

For example:

The dataset presented on the picture above will be filtered like this:

The branches in which the item is not found will be fully hidden:

The values that are not on the last level were ignored.

The level of filtration can be changed again in the following way:

treegrid.setFiltrationLevel(1); // upmost level has the index 0

After this command, the filtering uses the data from different levels of hierarchy and the filtering will show the following results:

In the second case, the user can see the items situated below the found one.

It is possible to force TreeGrid to filter data on all the levels of hierarchy at the same time in the following way:

treegrid.setFiltrationLevel(-2);

In such a mode filtering shows only the items that match the filtering criteria, while the lower level items are not shown.

"Top Level Show" Mode

This mode can be enabled like this:

treegrid.setFiltrationLevel(-1,true);

In such a mode, the upper level items without children and matching the filtering criteria are still shown, the items situated on the filtration level and below are hidden.

In the second picture both Music and DVD haven't matched the filtering criteria because filtering runs only for the last level items but they are still shown.

Related sample: Search and Filtering in TreeGrid

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Using Get-Methods DHTMLX Docs

Documentation
  • dhtmlXTreeGrid API
  • Initializing TreeGrid
  • Loading and Manipulating Data
  • TreeGrid Specific API
  • TreeGrid Specific Extensions
  • Filtering in TreeGrid
  • Using Get-Methods
    • Id/Index Manipulations
    • Getting Item's Image
    • Getting Item's Text
    • Getting Item's Label
    • Getting Row's Level
    • Getting Row's State
    • Getting Sub-Items
  • Font Awesome Icons in TreeGrid
Start TreeGrid

Using Get-Methods

Id/Index Manipulations

There is a method that allows the user to get the id of the child item at the specified position by its index:

var childId = treegrid.getChildItemIdByIndex(rowId,ind);

The parameters are as follows:

  • rowId - id of the row;
  • ind - child node's index.

Another method allows the user to get the id of the parent row:

treegrid.getParentId(rowId); // id of the row

Getting Item's Image

The following method should be used to get the image of a tree column:

treegrid.getItemImage(rowId); // id of the row

Getting Item's Text

The caption of a tree column can be received like this:

treegrid.getItemText(rowId); //  id of the row

Getting Item's Label

The method getLabel() gets text representation of a cell:

treegrid.cells().getLabel();

Getting Row's Level

The level of a TreeGrid row should be received in the following way:

treegrid.getLevel(rowId); //  id of the row

Getting Row's State

The following method returns the open/close state of a row:

treegrid.getOpenState(rowId); //  id of the row

Getting Sub-Items

The user can get the list of child rows' ids separated by a comma:

treegrid.getSubItems(rowId); //  id of the row
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Font Awesome Icons in TreeGrid DHTMLX Docs

Documentation
  • dhtmlXTreeGrid API
  • Initializing TreeGrid
  • Loading and Manipulating Data
  • TreeGrid Specific API
  • TreeGrid Specific Extensions
  • Filtering in TreeGrid
  • Using Get-Methods
  • Font Awesome Icons in TreeGrid
Start TreeGrid

Font Awesome Icons in TreeGrid

You can use Font Awesome icons in dhtmlxTreeGrid.

This possibility can be enabled with the help of the setIconset method:

myTreeGrid.setIconset("fontawesome");

Related sample: TreeGrid - font awesome icons

Follow the Font Awesome homepage to learn more about icons.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


TreeView DHTMLX Docs

Documentation
  • TreeView
    • dhtmlXTreeView API
    • Initializing TreeView
    • Loading Data into TreeView
    • Using Dataprocessor
    • Manipulating Checkboxes
    • Handling Drag-and-Drop
    • Enabling Context Menu
    • TreeView Skins
    • Customizing Icons
    • Selection in TreeView
    • Handling Events
Start

TreeView

dhtmlxTreeView is a lightweight but powerful component that allows you to present hierarchical information, such as tree data, file system etc. in a nice-looking compact way. Each item of TreeView can include several subitems.

TreeView quickly loads big amounts of data and posseses a number of useful features, such as drag-n-drop, dynamical loading of items, checkboxes' manipulation and customizable appearance. The possibility of integration with other DHTMLX components is also provided.

TreeView is a faster and more compact alternative to the Tree component. Tree is still supported and its documentation is available, but we recommend you to use TreeView instead.

API reference
  • dhtmlXTreeView API
Related resources
  • You may download dhtmlxTreeView from dhtmlx.com
  • Check online samples for dhtmlxTreeView
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Creating TreeView on a Page

  • Initializing TreeView
  • Loading Data into TreeView
  • Using Dataprocessor
 Discusses initialization of TreeView, as well as the ways of loading and saving data.

Working with TreeView

  • Manipulating Checkboxes
  • Handling Drag-and-Drop
  • Selection in TreeView
 Describes operations which can be performed with TreeView.

Setting TreeView Appearance

  • TreeView Skins
  • Customizing Icons
 Shows the possibilities of customizing TreeView appearance.

Context Menu and Events Handling

  • Enabling Context Menu
  • Handling Events
 Tells about integration with context menu and the process of events handling.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXTreeView API DHTMLX Docs

Documentation
  • dhtmlXTreeView API
    • Methods
    • Events
  • Initializing TreeView
  • Loading Data into TreeView
  • Using Dataprocessor
  • Manipulating Checkboxes
  • Handling Drag-and-Drop
  • Enabling Context Menu
  • TreeView Skins
  • Customizing Icons
  • Selection in TreeView
  • Handling Events
Start TreeView

dhtmlXTreeView API

Methods
addItem | adds a new item into TreeView
attachEvent | adds any user-defined handler to available events
checkItem | checks the item's checkbox
clearAll | removes all the loaded items from TreeView and repaints the component
closeItem | collapses an item
deleteChildItems | deletes child items of the node
deleteItem | deletes an item
detachEvent | detaches a handler from an event
disableCheckbox | disables a particular checkbox in TreeView
enableCheckbox | enables a particular checkbox in TreeView
enableCheckboxes | shows/hides checkboxes (all checkboxes in the treeview)
enableContextMenu | enables context menu
enableDragAndDrop | enables drag-n-drop in TreeView
enableMultiselect | allows selecting multiple items in TreeView
getAllChecked | returns an array of checked items' ids
getAllUnchecked | returns an array of unchecked items' ids
getItemText | returns the item's text
getLevel | returns the level index of the specified item
getParentId | returns the item's parent id
getSelectedId | returns the selected item's id
getSubItems | returns a comma-delimited list of ids of all children nested on the sublevel in relation to the specified item
getUserData | returns any user data set into the given input by the setUserData method
hideCheckbox | hides the item's checkbox
isCheckboxEnabled | checks if the item's checkbox is enabled
isCheckboxVisible | checks if the item's checkbox is visible
isItemChecked | returns the state of the item's checkbox
loadStruct | loads data to the component via XML or JSON, usually component config
openItem | opens the specified item
refreshItem | reloads subitems of the specified node
selectItem | selects an item
setIconColor | sets a color for the item's icon, if Font Awesome is used
setIconset | enables the font-awesome iconset
setItemIcons | sets custom icons for an item
setItemText | sets a new item's text
setSizes | adjusts the TreeView sizes, if dimension of its parent was changed
setSkin | sets a skin for TreeView
setUserData | allows attaching user data to a treeview without modifying the DOM
showCheckbox | shows the item's checkbox
showItem | scrolls a TreeView to make the specified item visible
silent | calls treeview function w/o triggering events
uncheckItem | unchecks the item's checkbox
unload | destructor, unloads TreeView
unselectItem | unselects the item, if it's selected
Events
onAddItem | fires when a new item is added into TreeView
onBeforeCheck | fires before an item's checkbox is checked/unchecked, cancelable
onBeforeDeleteItem | fires before item's deleting
onBeforeDrag | fires before drag operation starts, cancelable
onBeforeDrop | fires before an item is dragged to another target and the mouse button is released, cancelable
onCheck | fires before an item's checkbox is checked/unchecked
onClick | fires when a TreeView item has been clicked
onContextMenu | fires when the user clicks on treeview items with the right mouse button
onDblClick | fires when a TreeView item has been double clicked
onDeleteItem | fires when an item is deleted
onDragOver | fires when when a dragged item is moved over the droppable area, cancelable
onDrop | fires when the dragged item is dropped
onSelect | fires when an item is selected
onTextChange | fires when the item's text is changed
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • addItem
    • attachEvent
    • checkItem
    • clearAll
    • closeItem
    • deleteChildItems
    • deleteItem
    • detachEvent
    • disableCheckbox
    • enableCheckbox
    • enableCheckboxes
    • enableContextMenu
    • enableDragAndDrop
    • enableMultiselect
    • getAllChecked
    • getAllUnchecked
    • getItemText
    • getLevel
    • getParentId
    • getSelectedId
    • getSubItems
    • getUserData
    • hideCheckbox
    • isCheckboxEnabled
    • isCheckboxVisible
    • isItemChecked
    • loadStruct
    • openItem
    • refreshItem
    • selectItem
    • setIconColor
    • setIconset
    • setItemIcons
    • setItemText
    • setSizes
    • setSkin
    • setUserData
    • showCheckbox
    • showItem
    • silent
    • uncheckItem
    • unload
    • unselectItem
  • Events
Start TreeView dhtmlXTreeView API

Methods

addItem | adds a new item into TreeView
attachEvent | adds any user-defined handler to available events
checkItem | checks the item's checkbox
clearAll | removes all the loaded items from TreeView and repaints the component
closeItem | collapses an item
deleteChildItems | deletes child items of the node
deleteItem | deletes an item
detachEvent | detaches a handler from an event
disableCheckbox | disables a particular checkbox in TreeView
enableCheckbox | enables a particular checkbox in TreeView
enableCheckboxes | shows/hides checkboxes (all checkboxes in the treeview)
enableContextMenu | enables context menu
enableDragAndDrop | enables drag-n-drop in TreeView
enableMultiselect | allows selecting multiple items in TreeView
getAllChecked | returns an array of checked items' ids
getAllUnchecked | returns an array of unchecked items' ids
getItemText | returns the item's text
getLevel | returns the level index of the specified item
getParentId | returns the item's parent id
getSelectedId | returns the selected item's id
getSubItems | returns a comma-delimited list of ids of all children nested on the sublevel in relation to the specified item
getUserData | returns any user data set into the given input by the setUserData method
hideCheckbox | hides the item's checkbox
isCheckboxEnabled | checks if the item's checkbox is enabled
isCheckboxVisible | checks if the item's checkbox is visible
isItemChecked | returns the state of the item's checkbox
loadStruct | loads data to the component via XML or JSON, usually component config
openItem | opens the specified item
refreshItem | reloads subitems of the specified node
selectItem | selects an item
setIconColor | sets a color for the item's icon, if Font Awesome is used
setIconset | enables the font-awesome iconset
setItemIcons | sets custom icons for an item
setItemText | sets a new item's text
setSizes | adjusts the TreeView sizes, if dimension of its parent was changed
setSkin | sets a skin for TreeView
setUserData | allows attaching user data to a treeview without modifying the DOM
showCheckbox | shows the item's checkbox
showItem | scrolls a TreeView to make the specified item visible
silent | calls treeview function w/o triggering events
uncheckItem | unchecks the item's checkbox
unload | destructor, unloads TreeView
unselectItem | unselects the item, if it's selected
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

addItem

adds a new item into TreeView

void addItem(string|number id,string text,string|number parentId,number index);

Parameters

id | string|number | the item's id
text | string | the item's text
parentId | string|number | the parent's id
index | number | the item's index

Example

var myTreeview = new dhtmlXTreeView({
    // treeview conf here
});

// adding the root item
myTreeView.addItem("1", "Books"); // id, text

// adding a first-level child
myTreeView.addItem("2", "Turned at Dark", "1"); // id, text, pId

See also
  • API
    • deleteItem
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


checkItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

checkItem

checks the item's checkbox

void checkItem(string|number id);

Parameters

id string|number the item's id

Example

myTreeView.checkItem("1");

See also
  • API
    • uncheckItem
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


clearAll DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

clearAll

removes all the loaded items from TreeView and repaints the component

void clearAll();

Example

myTreeView.clearAll();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


closeItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

closeItem

collapses an item

void closeItem(string|number id);

Parameters

id string|number the items' id

Example

myTreeView.closeItem("3");

See also
  • API
    • openItem
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


deleteChildItems DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

deleteChildItems

deletes child items of the node

void deleteChildItems(string|number id);

Parameters

id string|number the node id

Example

myTreeView.deleteChildItems("2");

Change log

added in version 5.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


deleteItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

deleteItem

deletes an item

void deleteItem(string|number id);

Parameters

id string|number the item's id

Example

myTreeView.deleteItem("3");

See also
  • API
    • addItem
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disableCheckbox DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

disableCheckbox

disables a particular checkbox in TreeView

void disableCheckbox(string|number id);

Parameters

id string|number the checkbox's id

Example

myTreeView.disableCheckbox(id);

See also
  • API
    • enableCheckbox
    • enableCheckboxes
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


enableCheckbox DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

enableCheckbox

enables a particular checkbox in TreeView

void enableCheckbox(string|number id);

Parameters

id string|number the checkbox's id

Example

myTreeView.enableCheckbox(id);

See also
  • API
    • disableCheckbox
    • enableCheckboxes
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


enableCheckboxes DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

enableCheckboxes

shows/hides checkboxes (all checkboxes in the treeview)

void enableCheckboxes(boolean mode);

Parameters

mode boolean true to show checkboxes, false to hide them

Example

myTreeView.enableCheckboxes(true);

See also
  • API
    • enableCheckbox
    • disableCheckbox
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


enableContextMenu DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

enableContextMenu

enables context menu

void enableContextMenu(boolean mode);

Parameters

mode boolean true to enable context menu, false to disable it

Example

// initialize treeview
var myTreeView = new dhtmlXTreeView("parentId");

// enable context menu
myTreeView.enableContextMenu(true);

// initialize dhtmlx menu
var myContextMenu = new dhtmlXMenuObject({
    context: true // render it as context menu
});

myTreeView.attachEvent("onContextMenu", function(id, x, y, ev){
    // show context menu here
    myContextMenu.showContextMenu(x, y);

    // optionally, you can select treeview item
    myTreeView.selectItem(id);

    // prevent default context menu
    return false;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDragAndDrop DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

enableDragAndDrop

enables drag-n-drop in TreeView

void enableDragAndDrop(boolean mode);

Parameters

mode boolean true/false to enable/disable drag-n-drop

Example

myTreeView.enableDragAndDrop(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableMultiselect DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

enableMultiselect

allows selecting multiple items in TreeView

void enableMultiselect(boolean mode);

Parameters

mode boolean true/false to enable/disable multiple selection of items

Example

myTreeView.enableMultiselect(true);

Related samples

  • Multiple selection
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllChecked DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

getAllChecked

returns an array of checked items' ids

array getAllChecked();

Returns

array an array of all checked items' ids

Example

myTreeView.getAllChecked();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAllUnchecked DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

getAllUnchecked

returns an array of unchecked items' ids

array getAllUnchecked();

Returns

array an array of all unchecked items' ids

Example

myTreeView.getAllUnchecked();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getItemText DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

getItemText

returns the item's text

string getItemText(string|number id);

Parameters

id string|number the item's id

Returns

string the item's text

Example

var text = myTreeView.getItemText(id);

See also
  • API
    • setItemText
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


getLevel DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

getLevel

returns the level index of the specified item

number getLevel(string|number id);

Parameters

id string|number the id of the node

Returns

number the level index of the node

Example

var level = myTreeView.getLevel("node1");

Change log

added in version 5.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getParentId DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

getParentId

returns the item's parent id

string|number getParentId(string|number id);

Parameters

id string|number the item's id

Returns

string|number the item's parent id

Example

var parentId = myTreeView.getParentId(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSelectedId DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

getSelectedId

returns the selected item's id

string|number getSelectedId();

Returns

string|number the selected item's id (an array of ids, if multiselect is enabled)

Example

var id = myTreeView.getSelectedId();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSubItems DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

getSubItems

returns a comma-delimited list of ids of all children nested on the sublevel in relation to the specified item

array getSubItems(string|number id);

Parameters

id string|number the item's id

Returns

array the list of subitems' ids

Example

myTreeView.getSubItems(id);

Details

the list of subitems is comma-delimited

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getUserData DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

getUserData

returns any user data set into the given input by the setUserData method

string|number|boolean getUserData(string|number id,string name);

Parameters

id | string|number | the target item's id
name | string | the key for user data

Returns

string|number|boolean user data from the target item

Example

var type = myTreeView.getUserData(id, "type");

See also
  • API
    • setUserData
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


hideCheckbox DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

hideCheckbox

hides the item's checkbox

void hideCheckbox(string|number id);

Parameters

id string|number the item's id

Example

myTreeView.hideCheckbox(id);

See also
  • API
    • showCheckbox
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


isCheckboxEnabled DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

isCheckboxEnabled

checks if the item's checkbox is enabled

boolean isCheckboxEnabled(string|number id);

Parameters

id string|number the item's id

Returns

boolean true, if the checkbox is enabled

Example

var isEnabled = myTreeView.isCheckboxEnabled(id);

See also
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


isCheckboxVisible DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

isCheckboxVisible

checks if the item's checkbox is visible

boolean isCheckboxVisible(string|number id);

Parameters

id string|number the item's id

Returns

boolean true, if the checkbox is visible

Example

var isVisible = myTreeView.isCheckboxVisible(id);

See also
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


isItemChecked DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

isItemChecked

returns the state of the item's checkbox

boolean isItemChecked(string|number id);

Parameters

id string|number the item's id

Returns

boolean true, if the checkbox is checked

Example

var isChecked = myTreeView.isItemChecked(id);

See also
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


loadStruct DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

loadStruct

loads data to the component via XML or JSON, usually component config

promise loadStruct(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.loadStruct('<data><node id="a1".../></data>');

// json/xml from server
myComponent.loadStruct("server/data.xml");

// local json/xml with callback
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.loadStruct('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.loadStruct("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.loadStruct(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure response has the header "Content-Type: text/xml" for XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


openItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

openItem

opens the specified item

void openItem(string id);

Parameters

id string the items' id

Example

myTreeView.openItem("1");

See also
  • API
    • closeItem
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


refreshItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

refreshItem

reloads subitems of the specified node

void refreshItem(string|number id);

Parameters

id string|number the id of the node

Example

myTreeView.refreshItem("node1");

Change log

added in version 5.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

selectItem

selects an item

void selectItem(string|number id);

Parameters

id string|number the item's id (an array of ids, if multiselect is enabled)

Example

myTreeView.selectItem("2");

// if multiselect is enabled
myTreeView.selectItem(["2", "3", "5"]);

See also
  • API
    • unselectItem
  • Articles
    • Selection in TreeView
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setIconColor DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

setIconColor

sets a color for the item's icon, if Font Awesome is used

void setIconColor(string|number id,string color);

Parameters

id | string|number | the item's id
color | string | color (according to CSS rules)

Example

myTreeView.setIconColor("2", "#abcdef");

See also
  • Articles
    • Customizing Icons
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setIconset DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

setIconset

enables the font-awesome iconset

void setIconset(string name);

Parameters

name string "font_awesome"

Example

myTreeView.setIconset("font_awesome");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setItemIcons DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

setItemIcons

sets custom icons for an item

void setItemIcons(string|number id,object icons);

Parameters

id | string|number | the item's id
icons | object | an object with custom icon/icons for the item

Example

myTreeView.setItemIcons(id, {
    file:           "icon_file",    // css for a file
    folder_opened:  "icon_opened",  // css for an opened folder
    folder_closed:  "icon_closed"   // css for a closed folder
});

Details

You also need to declare CSS rules for your custom icons, for example:

.icon_file {
    background-image: url(path/to/icon_file.png);
}
.icon_opened {
    background-image: url(path/to/icon_opened.png);
}
.icon_closed {
    background-image: url(path/to/icon_closed.png);
}
See also
  • Articles
    • Customizing Icons
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setItemText DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

setItemText

sets a new item's text

void setItemText(string|number id,string text);

Parameters

id | string|number | the item's id
text | string | the new item's text

Example

myTreeView.setItemText("2", "New Text");

See also
  • API
    • getItemText
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setSizes DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

setSizes

adjusts the TreeView sizes, if dimension of its parent was changed

void setSizes();

Example

myTreeView.setSizes();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

setSkin

sets a skin for TreeView

void setSkin(string skin);

Parameters

skin string "dhx_skyblue", "dhx_web", "dhx_terrace", "dhx_material"

Example

myTreeView.setSkin("dhx_web");

See also
  • Articles
    • TreeView Skins
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setUserData DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

setUserData

allows attaching user data to a treeview without modifying the DOM

void setUserData(string|number id,string name,string value);

Parameters

id | string|number | the item's id
name | string | the name of the userdata
value | string | the value of the userdata

Example

myTreeView.setUserData(id, "type", "folder");

See also
  • API
    • getUserData
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


showCheckbox DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

showCheckbox

shows the item's checkbox

void showCheckbox(string|number id);

Parameters

id string|number the item's id

Example

myTreeView.showCheckbox(id);

See also
  • API
    • hideCheckbox
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


showItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

showItem

scrolls a TreeView to make the specified item visible

void showItem(number|string itemId);

Parameters

itemId number|string id of an item to show

Example

myTreeView.showItem(itemId);

Change log

added in version 5.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


silent DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

silent

calls treeview function w/o triggering events

void silent(function callback);

Parameters

callback function user-defined function

Example

myTreeView.attachEvent("onSelect", function(id, state){
    console.log(id, state);
});

myTreeView.selectItem("1"); // trigger event
myTreeView.selectItem("2"); // trigger event

myTreeView.silent(function(){
    myTreeView.selectItem("3"); // do not trigger event
    myTreeView.selectItem("4"); // do not trigger event
});

myTreeView.selectItem("5"); // trigger event

// console output
1 true
1 false
2 true
4 false
5 true

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


uncheckItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

uncheckItem

unchecks the item's checkbox

void uncheckItem(string|number id);

Parameters

id string|number the item's id

Example

myTreeView.uncheckItem(id);

See also
  • API
    • checkItem
  • Articles
    • Manipulating Checkboxes
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


unload DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

unload

destructor, unloads TreeView

void unload();

Example

myTreeView.unload();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unselectItem DHTMLX Docs

Documentation
  • addItem
  • attachEvent
  • checkItem
  • clearAll
  • closeItem
  • deleteChildItems
  • deleteItem
  • detachEvent
  • disableCheckbox
  • enableCheckbox
  • enableCheckboxes
  • enableContextMenu
  • enableDragAndDrop
  • enableMultiselect
  • getAllChecked
  • getAllUnchecked
  • getItemText
  • getLevel
  • getParentId
  • getSelectedId
  • getSubItems
  • getUserData
  • hideCheckbox
  • isCheckboxEnabled
  • isCheckboxVisible
  • isItemChecked
  • loadStruct
  • openItem
  • refreshItem
  • selectItem
  • setIconColor
  • setIconset
  • setItemIcons
  • setItemText
  • setSizes
  • setSkin
  • setUserData
  • showCheckbox
  • showItem
  • silent
  • uncheckItem
  • unload
  • unselectItem
Start TreeView dhtmlXTreeView API Methods

unselectItem

unselects the item, if it's selected

void unselectItem(string|number id);

Parameters

id string|number the item's id (an array of ids, if multiselect enabled)

Example

myTreeView.unselectItem("2");

// if multiselect is enabled
myTreeView.unselectItem(["2", "3", "5"]);

See also
  • API
    • selectItem
  • Articles
    • Selection in TreeView
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onAddItem
    • onBeforeCheck
    • onBeforeDeleteItem
    • onBeforeDrag
    • onBeforeDrop
    • onCheck
    • onClick
    • onContextMenu
    • onDblClick
    • onDeleteItem
    • onDragOver
    • onDrop
    • onSelect
    • onTextChange
    • onXLE
    • onXLS
Start TreeView dhtmlXTreeView API

Events

onAddItem | fires when a new item is added into TreeView
onBeforeCheck | fires before an item's checkbox is checked/unchecked, cancelable
onBeforeDeleteItem | fires before item's deleting
onBeforeDrag | fires before drag operation starts, cancelable
onBeforeDrop | fires before an item is dragged to another target and the mouse button is released, cancelable
onCheck | fires before an item's checkbox is checked/unchecked
onClick | fires when a TreeView item has been clicked
onContextMenu | fires when the user clicks on treeview items with the right mouse button
onDblClick | fires when a TreeView item has been double clicked
onDeleteItem | fires when an item is deleted
onDragOver | fires when when a dragged item is moved over the droppable area, cancelable
onDrop | fires when the dragged item is dropped
onSelect | fires when an item is selected
onTextChange | fires when the item's text is changed
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAddItem DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onAddItem

fires when a new item is added into TreeView

void onAddItem(string|number id,string text,string|number pId,number index){ ... };

Parameters

id | string|number | the item's id
text | string | the item's text
pId | string|number | the parent's id
index | number | the item's index

Example

myTreeView.attachEvent("onAddItem", function(id, text, pId, index){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeCheck DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onBeforeCheck

fires before an item's checkbox is checked/unchecked, cancelable

boolean onBeforeCheck(string|number id,boolean state){ ... };

Parameters

id | string|number | the item's id
state | boolean | current state of the checkbox

Returns

boolean true to allow operation

Example

myTreeView.attachEvent("onBeforeCheck", function(id, state){
    // your code here
    return true;
});

Details

the event is blockable: returning false will block the checkbox's checking

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDeleteItem DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onBeforeDeleteItem

fires before item's deleting

boolean onBeforeDeleteItem(string|number id){ ... };

Parameters

id string|number the item's id

Returns

boolean true to allow item's deleting

Example

myTreeView.attachEvent("onBeforeDeleteItem",function(id){
    // your code here
    return true;
});

Details

the event is blockable: return false to block the item's deleting

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDrag DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onBeforeDrag

fires before drag operation starts, cancelable

boolean onBeforeDrag(string|number id){ ... };

Parameters

id string|number the id of the dragged item

Returns

boolean true to allow operation

Example

myTreeView.attachEvent("onBeforeDrag", function(id){
    //your code here
    return true;
});

Details

the event can be blocked:return false to block the row's dragging

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDrop DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onBeforeDrop

fires before an item is dragged to another target and the mouse button is released, cancelable

boolean onBeforeDrop(string|number id,string|number pId,number index){ ... };

Parameters

id | string|number | the item's id
pId | string|number | the parent's id
index | number | the new item's index

Returns

boolean true to allow operation

Example

myTreeView.attachEvent("onBeforeDrop", function(id, pId, index){
    // your code here
    return true;
});

Details

the event is blockable: return false to block the item's dropping

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onCheck DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onCheck

fires before an item's checkbox is checked/unchecked

void onCheck(string|number id,boolean state){ ... };

Parameters

id | string|number | the item's id
state | boolean | current state of the checkbox

Example

myTreeView.attachEvent("onCheck", function(id, false){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClick DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onClick

fires when a TreeView item has been clicked

void onClick(string|number id){ ... };

Parameters

id string|number id of the clicked item

Example

myTreeView.attachEvent("onClick", function(id){
    // your code here
});

See also
  • API
    • onDblClick
    • Change log

    added in version 5.1

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


onContextMenu DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onContextMenu

fires when the user clicks on treeview items with the right mouse button

void onContextMenu(string|number id,number x,number y,object ev){ ... };

Parameters

id | string|number | the item's id
x | number | x coordinate
y | number | y coordinate
ev | object | window event object

Example

// init treeview
var myTreeView = new dhtmlXTreeView("parentId");

// enable context menu
myTreeView.enableContextMenu(true);

// init dhtmlx menu
var myContextMenu = new dhtmlXMenuObject({
    context: true // render it as context menu
});

myTreeView.attachEvent("onContextMenu", function(id, x, y, ev){
    // show context menu here
    myContextMenu.showContextMenu(x, y);

    // optionally, you can select treeview item
    myTreeView.selectItem(id);

    // prevent default context menu
    return false;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDblClick DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onDblClick

fires when a TreeView item has been double clicked

boolean onDblClick(string|number id){ ... };

Parameters

id string|number id of the node that was double clicked

Returns

boolean true - confirms opening/closing

Example

myTreeView.attachEvent("onDblClick", function(id){
    // your code here
    return true;
});

Details

The event is blockable. Returning "false" will prevent the default action.

See also
  • API
    • onClick
    • Change log

    added in version 5.1

    Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


onDeleteItem DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onDeleteItem

fires when an item is deleted

void onDeleteItem(string|number id){ ... };

Parameters

id string|number the item's id

Example

myTreeView.attachEvent("onDeleteItem", function(id){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDragOver DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onDragOver

fires when when a dragged item is moved over the droppable area, cancelable

boolean onDragOver(string|number id,string|number pId,number index){ ... };

Parameters

id | string|number | the item's id
pId | string|number | the parent's id
index | number | the new item's index

Returns

boolean true to allow highlighting the drop area and an item can be dropped at a certain place

Example

myTreeView.attachEvent("onDragOver", function(id, pId, index){
    // your code here
    return true;
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDrop DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onDrop

fires when the dragged item is dropped

void onDrop(string|number id,string|number pId,number index){ ... };

Parameters

id | string|number | the dragged item's id
pId | string|number | the dragged item's new parent id
index | number | the dragged item's new index

Example

myTreeView.attachEvent("onDrop", function(id, pId, index){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onSelect DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onSelect

fires when an item is selected

void onSelect(string|number id,boolean mode){ ... };

Parameters

id | string|number | the item's id
mode | boolean | true if item was selected, false otherwise

Example

myTreeView.attachEvent("onSelect", function(id, mode){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onTextChange DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onTextChange

fires when the item's text is changed

void onTextChange(string|number id,string text){ ... };

Parameters

id | string|number | the item's id
text | string | the new item's text

Example

myTreeView.attachEvent("onTextChange", function(id, text){
    // your code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onAddItem
  • onBeforeCheck
  • onBeforeDeleteItem
  • onBeforeDrag
  • onBeforeDrop
  • onCheck
  • onClick
  • onContextMenu
  • onDblClick
  • onDeleteItem
  • onDragOver
  • onDrop
  • onSelect
  • onTextChange
  • onXLE
  • onXLS
Start TreeView dhtmlXTreeView API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing TreeView DHTMLX Docs

Documentation
  • dhtmlXTreeView API
  • Initializing TreeView
    • TreeView's source files
    • Constructor
    • Minimal initialization
    • Attaching to a cell
  • Loading Data into TreeView
  • Using Dataprocessor
  • Manipulating Checkboxes
  • Handling Drag-and-Drop
  • Enabling Context Menu
  • TreeView Skins
  • Customizing Icons
  • Selection in TreeView
  • Handling Events
Start TreeView

Initializing TreeView

TreeView's source files

To begin working with a TreeView component you need to include treeview js/css files on the page. There are two of them:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxtreeview.css">
    <script src="codebase/dhtmlxtreeview.js"></script>
</head>

In case you're working with the whole DHTMLX Suite, there's no need to include extra files - dhtmlx js/css files will be enough:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
    <script src="codebase/dhtmlx.js"></script>
</head>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Constructor

var myTreeView = new dhtmlXTreeView({
    parent:         "treeviewObj",  // id/object, container for treeview
    skin:           "dhx_terrace",  // string, optional, treeview's skin
    iconset:        "font_awesome", // string, optional, sets the font-awesome icons
    multiselect:    true,           // boolean, optional, enables multiselect
    checkboxes:     true,           // boolean, optional, enables checkboxes
    dnd:            true,           // boolean, optional, enables drag-and-drop
    context_menu:   true,           // boolean, optional, enables context menu
    json:           "filename.json",// string, optional, json file with struct
    xml:            "filename.xml", // string, optional, xml file with struct
    items:          [],             // array, optional, array with tree struct
    onload:         function(){}    // callable, optional, callback for load
});

The order of loading (if several initial params specified at a time) is: json, xml, items.

Minimal initialization

To initialize TreeView in an HTML element, you need to complete two steps:

1) define a parent container, where treeview will be placed:

<body>
    <div id="treeviewObj">
        <!-- treeview body will be here later -->
    </div>
</body>

2) create a TreeView object and place it into the HTML object that you've just created:

var myTreeView = new dhtmlXTreeView({
    parent:"treeviewObj",
    items: [
        {id: 1, text: "Books", open: 1, items: [
            {id: 2, text: "Turned at Dark / C. C. Hunter"},
            {id: 3, text: "Daire Meets Ever / Alyson Noël"},
            {id: 4, text: "Socs and Greasers / Rob Lowe"},
            {id: 5, text: "Privacy and Terms.pdf"},
            {id: 6, text: "Licence Agreement.pdf"}
        ]}
    ]
});

Related sample: Object API init

Attaching to a cell

Pay attention that if you attach treeview to a cell, the "parent" attribute should be omitted.

1) Attaching to the layout's cell

myLayout.cells(id).attachTreeView({
    // treeview config here
});

Related sample: Integration with layout

2) Attaching to the tabbar's tab

myTabbar.tabs(id).attachTreeView({
    // treeview config here
})

Related sample: Integration with tabbar

3) Attaching to the accordion's cell

myAccordion.cells(id).attachTreeView({
    // treeview config here
});

Related sample: Integration with accordion

4) Attaching to the window

myWins.window(id).attachTreeView({
    // treeview config here
});

Related sample: Integration with window

5) Attaching to the carousel's cell

myCarousel.cells(id).attachTreeView({
    // treeview config here
});

Related sample: Integration with carousel

6) Attaching to the popup

myPopup.attachTreeView({
    // treeview config here
});

Related sample: Integration with popup

7) Attaching to the sidebar's cell

mySidebar.cells(id).attachTreeView({
    // treeview config here
});

Related sample: Integration with sidebar

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Loading Data into TreeView DHTMLX Docs

Documentation
  • dhtmlXTreeView API
  • Initializing TreeView
  • Loading Data into TreeView
    • The ways of loading
    • XML Format
    • JSON Format
    • Dynamic subloading
  • Using Dataprocessor
  • Manipulating Checkboxes
  • Handling Drag-and-Drop
  • Enabling Context Menu
  • TreeView Skins
  • Customizing Icons
  • Selection in TreeView
  • Handling Events
Start TreeView

Loading Data into TreeView

The ways of loading

1) Loading TreeView items during initialization:

var myTreeView = new dhtmlXTreeView({
    xml: "some/path/filename.xml",
    onload: function(){
        // callback, optional
        // as loading is performed in async mode, this function will be called
        // after all treeview items are loaded and rendered
    }
});

// or
var myTreeView = new dhtmlXTreeView({
    json: "some/path/filename.json",
    onload: function(){
        // callback, optional
    }
});

// or
var myTreeView = new dhtmlXTreeView({
    items: [...]
});

2) Loading TreeView items after initialization:

myTreeView.loadStruct("some/path/filename.xml", function(){
    // callback, optional
});

// or
myTreeView.loadStruct("some/path/filename.json", function(){
    // callback, optional
});

XML Format

The list of used attributes:

  • id - id of the node, required;
  • text - label of the node, required;
  • open - opens node and show kids, if there are any;
  • checked - checks a checkbox;
  • checkbox - controls checkbox, makes it hidden or disabled;
  • userdata - a set of name=value pairs of custom user data;
  • icons - overrides default icons.
<!-- minimal init -->
<?xml version="1.0" encoding="utf-8"?>
<tree>

    <item id="1" text="Text 1" open="1">
        <!-- nested items if any -->
    </item>

    <!-- checkboxes mode -->
    <item id="2" text="Text 2" checked="1"/>
    <item id="3" text="Text 3" checked="1" checkbox="disabled"/>
    <item id="4" text="Text 4" checkbox="disabled"/>
    <item id="5" text="Text 5" checkbox="hidden"/>

    <!-- custom icons -->
    <item id="6" text="Text 6">
        <icons file="icon_file" folder_opened="icon_opened"
            folder_closed="icon_closed"/>
    </item>

    <!-- userdata -->
    <item id="7" text="Text 7">
        <userdata name1="value1" name2="value2"/>
    </item>

</tree>

Adding CSS for custom icons on the client side:

.icon_file {
    background-image: url(path/to/icon_file.png);
}
.icon_opened {
    background-image: url(path/to/icon_opened.png);
}
.icon_closed {
    background-image: url(path/to/icon_closed.png);
}

Getting userdata on the client side

console.log(myTreeView.getUserData("7", "name1")); // value1
console.log(myTreeView.getUserData("7", "name2")); // value2

JSON Format

[
    {id: 1, text: "Books", open: 1, items: [
        // nested items if any
    ]},

    // checkboxes mode
    {id: "2", text: "Text 2", checked: true},
    {id: "3", text: "Text 3", checked: true, checkbox: "disabled"},
    {id: "4", text: "Text 4", checkbox: "disabled"},
    {id: "5", text: "Text 5", checkbox: "hidden"},

    // custom icons
    {id: "6", text: "Text 6", icons: {
        file: "icon_file",
        folder_opened: "icon_opened",
        folder_closed: "icon_closed"
    }},

    // userdata
    {id: "7", text: "Text 7", userdata: {
        name1: "value1", name2: "value2"
    }}
]

Related sample: Init from json

Dynamic subloading

To enable dynamic subloading, you have to specify url with {id} which will be replaced with node id for which nested data should be loaded:

// during initialization
var myTreeView = new dhtmlXTreeView({
    json: "path/to/script.php?id={id}"
});

// or after initialization
myTreeView.loadStruct("path/to/script.php?id={id}");

Server response for the top-level

If a node has sub-items, you need to add the kids:true attribute. For the top level {id} in url will be changed to 0:
path/to/script.php?id=0

[
    {id: "1", text: "Text 1", kids: true}, // rendered as folder
    {id: "2", text: "Text 2", kids: true}, // rendered as folder
    {id: "3", text: "Text 3"}, // rendered as file
    {id: "4", text: "Text 4"}  // rendered as file
]

Server response for the sub-level

Let's assume that the user opens the item with id 1, in this case {id} in url will be changed to 1:
path/to/script.php?id=1

For a sublevel you have to specify part of parent item with id:

[
    // parent level, mandatory
    {id: "1", items: [
        // nested items
        {id: "1_1", text: "Text 1_1"},
        {id: "1_2", text: "Text 1_2"},
        {id: "1_3", text: "Text 1_3", kids: true},
        {id: "1_4", text: "Text 1_4", kids: true}
    ]}
]

If the user opens item with id 2, {id} in url will be changed to 2:
path/to/script.php?id=2

Response example:

[
    {id: "2", items: [
        {id: "2_1", text: "Text 1_1"},
        {id: "2_2", text: "Text 1_2"}
    ]}
]

Finally, you should have the following tree:

XML format

The same tree in the XML format looks like this:

<!-- root level -->
<tree>
    <item id="1" text="Text 1" kids="true"/>
    <item id="2" text="Text 2" kids="true"/>
    <item id="3" text="Text 3"/>
    <item id="4" text="Text 4"/>
</tree>

<!-- for item 1 -->
<tree>
    <item id="1">
        <item id="1_1" text="Text 1_1"/>
        <item id="1_2" text="Text 1_2"/>
        <item id="1_3" text="Text 1_3" kids="true"/>
        <item id="1_4" text="Text 1_4" kids="true"/>
    </item>
</tree>

<!-- for item 2 -->
<tree>
    <item id="2">
        <item id="2_1" text="Text 2_1"/>
        <item id="2_2" text="Text 2_2"/>
    </item>
</tree>

Related sample: Dynamic sub-loading

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Using Dataprocessor DHTMLX Docs

Documentation
  • dhtmlXTreeView API
  • Initializing TreeView
  • Loading Data into TreeView
  • Using Dataprocessor
    • Enabling DataProcessor
    • Server-Side DataProcessor Handling
  • Manipulating Checkboxes
  • Handling Drag-and-Drop
  • Enabling Context Menu
  • TreeView Skins
  • Customizing Icons
  • Selection in TreeView
  • Handling Events
Start TreeView

Using Dataprocessor

Common TreeView manipulations like drag-n-drop, removing an item, adding a new item or updating an item's label can be simultaneously reflected in the server database using DataProcessor.

The data of the updated/deleted items is sent to the server to the specified URL (we call it serverProcessor).

The serverProcessor should return a simple XML or JSON of the specified format to let the TreeView know about successful or unsuccessful processing. All the necessary after-save procedures will be done automatically.

Enabling DataProcessor

To enable this feature, the user should do the following:

  • Create DataProcessor object for TreeView;
  • Specify the path to your REST server in the dataProcessor's constructor
  • Initialize DataProcessor and attach it to the Treeview object
myTreeView = new dhtmlXTreeView("treeviewObj");
...
var dp = new dataProcessor("data.php");
dp.init(myTreeView); // treeview object to assign DataProcessor to, mandatory
  • call the setTransactionMode method with the "REST" value
dp.setTransactionMode("REST");

Server-Side DataProcessor Handling

Using the server-side DataProcessor the user should bear in mind the following:

The response can be any valid JSON object.

The full server response should contain the following properties:

  • action - the type of the operation;
  • sid - the original event ID;
  • tid - the ID of the event after the operation.

There are 5 predefined types of response:

  • updated;
  • inserted;
  • deleted;
  • invalid;
  • error.

So, an example of response can be as follows:

{"action":"updated","sid":"2","tid":"2"}

To change the id of the event while updating, use the tid property.

{"tid":"some"}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Manipulating Checkboxes DHTMLX Docs

Documentation
  • dhtmlXTreeView API
  • Initializing TreeView
  • Loading Data into TreeView
  • Using Dataprocessor
  • Manipulating Checkboxes
    • Enable checkboxes
    • Working with checkboxes
  • Handling Drag-and-Drop
  • Enabling Context Menu
  • TreeView Skins
  • Customizing Icons
  • Selection in TreeView
  • Handling Events
Start TreeView

Manipulating Checkboxes

You can specify checkboxes for TreeView items and easily manipulate them by using the TreeView API.

Enable checkboxes

// enable on init stage
var myTreeView = new dhtmlXTreeView({
    checkboxes: true
});

// enable checkboxes from script
myTreeView.enableCheckboxes(true);

// disable from script
myTreeView.enableCheckboxes(false);

Working with checkboxes

1) Enable/disable checkbox for a specific item

The disabled state means that the checkbox is visible and can be manipulated from script. However, you can't change its state through mouse clicks.

// to enable
myTreeView.enableCheckbox(id);

// to disable
myTreeView.disableCheckbox(id);

// check state
var isEnabled = myTreeView.isCheckboxEnabled(id); // return true/false

Related sample: Checkboxes enable / disable

2) Check/uncheck checkbox

// to check
myTreeView.checkItem(id);

// to uncheck
myTreeView.uncheckItem(id);

// is checked?
var isChecked = myTreeView.isItemChecked(); // return true/false

Related sample: Checkboxes check / uncheck

3) Show/hide checkbox

// to show
myTreeView.showCheckbox(id);

// to hide
myTreeView.hideCheckbox(id);

// check state
var isVisible = myTreeView.isCheckboxVisible(id); // return true/false

Related sample: Checkboxes show / hide

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Drag-and-Drop DHTMLX Docs

Documentation
  • dhtmlXTreeView API
  • Initializing TreeView
  • Loading Data into TreeView
  • Using Dataprocessor
  • Manipulating Checkboxes
  • Handling Drag-and-Drop
    • Events
  • Enabling Context Menu
  • TreeView Skins
  • Customizing Icons
  • Selection in TreeView
  • Handling Events
Start TreeView

Handling Drag-and-Drop

dhtmlxTreeView has drag-and-drop functionality. With the help of drag-and-drop it's easy to reorder nodes in the treeview.

// enable dnd during initialization
var myTreeView = new dhtmlXTreeView({
    dnd: true
});

// or after initialization
myTreeView.enableDragAndDrop(true);

Related sample: Drag-and-drop - minimal init

Events
  • onBeforeDrag - fires when an item's dragging starts (the item is selected and the mouse is moving)
  • onDragOver - fires when when a dragged item is moved over the droppable area
  • onBeforeDrop - fires before an item is dragged to another target and the mouse button is released
  • onDrop - fires when the dragged element has been dropped

Related sample: Drag-and-drop - events

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Enabling Context Menu DHTMLX Docs

Documentation
  • dhtmlXTreeView API
  • Initializing TreeView
  • Loading Data into TreeView
  • Using Dataprocessor
  • Manipulating Checkboxes
  • Handling Drag-and-Drop
  • Enabling Context Menu
  • TreeView Skins
  • Customizing Icons
  • Selection in TreeView
  • Handling Events
Start TreeView

Enabling Context Menu

You can easily add a context menu into TreeView to choose some actions that can be made with items.

1) First, you need to enable context menu in a TreeView:

// during initialization
var myTreeView = new dhtmlXTreeView({
    context_menu: true
});

// or after initialization
myTreeView.enableContextMenu(true);

2) Now you have to attach context menu event handler to TreeView:

myTreeView.attachEvent("onContextMenu", function(id, x, y, ev){
    return false; // to prevent default context menu
});

3) The last step is to show dhtmlxMenu from handler:

// menu initialization
var myContextMenu = new dhtmlXMenuObject({
    context: true // and other menu config
});

myTreeView.attachEvent("onContextMenu", function(id, x, y, ev){
    // show dhtmlxMenu
    myContextMenu.showContextMenu(x, y);

    // optionally, you can select the corresponding tree item
    myTreeView.selectItem(id);

    // do not show default browser menu
    return false;
});

Related sample: Context menu

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


TreeView Skins DHTMLX Docs

Documentation
  • dhtmlXTreeView API
  • Initializing TreeView
  • Loading Data into TreeView
  • Using Dataprocessor
  • Manipulating Checkboxes
  • Handling Drag-and-Drop
  • Enabling Context Menu
  • TreeView Skins
  • Customizing Icons
  • Selection in TreeView
  • Handling Events
Start TreeView

TreeView Skins

There are four skins available for TreeView:

dhx_skyblue | dhx_web
dhx_terrace | dhx_material

Related sample: Skyblue skin
Related sample: Web skin
Related sample: Terrace skin
Related sample: Material skin

The skin will be detected automatically, depending on the attached CSS. You can also set it manually:

// api initialization
var myTreeView = new dhtmlXTreeView({
     skin: "dhx_web"
});

// or via the setSkin() method
myTreeView.setSkin("dhx_web");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Customizing Icons DHTMLX Docs

Documentation
  • dhtmlXTreeView API
  • Initializing TreeView
  • Loading Data into TreeView
  • Using Dataprocessor
  • Manipulating Checkboxes
  • Handling Drag-and-Drop
  • Enabling Context Menu
  • TreeView Skins
  • Customizing Icons
    • Using custom icons
    • Using Font Awesome
  • Selection in TreeView
  • Handling Events
Start TreeView

Customizing Icons

You have the possibility to customize the appearance of the TreeView icons in many ways. Besides the default icons, you can apply any custom icons, as well as use Font Awesome icons and set the desired color for them.

Using custom icons

Any TreeView item can have one of three icons, depending on its state:

  • folder opened,
  • folder closed,
  • file.

You can change these icons for any item in the following way:

1) From script

myTreeView.setItemIcons(id, {
    file:           "icon_file",    // css for the file
    folder_opened:  "icon_opened",  // css for the opened folder
    folder_closed:  "icon_closed"   // css for theclosed folder
});

2) From XML (while loading TreeView structure):

<?xml version="1.0" encoding="utf-8"?>
<tree>
    <item id="id" text="Text">
        <icons
            file="icon_file"
            folder_opened="icon_opened"
            folder_closed="icon_closed"/>
    </item>
</tree>

3) From JSON (while loading TreeView structure):

[
    {id: "id", text: "Text", icons: {
        file: "icon_file",
        folder_opened: "icon_opened",
        folder_closed: "icon_closed"
    }}
]

You should also define the necessary icons in the CSS like this:

.icon_file {
    background-image: url(path/to/icon_file.png);
}
.icon_opened {
    background-image: url(path/to/icon_opened.png);
}
.icon_closed {
    background-image: url(path/to/icon_closed.png);
}

Related sample: Custom icons from script

Using Font Awesome

// during initialization
var myTreeView = new dhtmlXTreeView({
    iconset: "font_awesome"
});

// or after initialization
myTreeView.setIconset("font_awesome");

For the "font_awesome" iconset you can also change the color of icons:

myTreeView.setIconColor(id, "#abcdef");

Related sample: Font awesome custom icons

To learn more about icons, follow Font Awesome homepage.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Selection in TreeView DHTMLX Docs

Documentation
  • dhtmlXTreeView API
  • Initializing TreeView
  • Loading Data into TreeView
  • Using Dataprocessor
  • Manipulating Checkboxes
  • Handling Drag-and-Drop
  • Enabling Context Menu
  • TreeView Skins
  • Customizing Icons
  • Selection in TreeView
  • Handling Events
Start TreeView

Selection in TreeView

By default, single selection mode is used. You can select/unselect tree items by using the following methods:

// select item
myTreeView.selectItem(id);

// unselect item
myTreeView.unselectItem(id);

// get selected id
myTreeView.getSelectedId(); // returns the selected item's id

You can enable multiple selection mode as follows:

// during initialization
var myTreeView = new dhtmlXTreeView({
    multiselect: true
});

// or after initialization
myTreeView.enableMultiselect(true);

To select several items, hold down the CTRL key and select as usual.

In case multiple selection mode is used to select several items, you need to pass an array with ids as a parameter for selection methods:

// select several items
myTreeView.selectItem([id1, id2, ..., idN]);

// unselect several items
myTreeView.unselectItem([id2, id3, ..., idM]);

// get selected ids
var ids = myTreeView.getSelectedId(); // returns an array with ids

Related sample: Multiple selection

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXTreeView API
  • Initializing TreeView
  • Loading Data into TreeView
  • Using Dataprocessor
  • Manipulating Checkboxes
  • Handling Drag-and-Drop
  • Enabling Context Menu
  • TreeView Skins
  • Customizing Icons
  • Selection in TreeView
  • Handling Events
    • Attaching events
    • Detaching events
    • Naming tips
    • The list of events
Start TreeView

Handling Events

Attaching events

The attachEvent method can be used to add an event handler to any of the available events. The method should to be called with the following parameters:

function doSome() {
    // your code here
}
myTreeView.attachEvent("onSomeEvent", doSome);

Several handlers can be attached to one and the same event and all of them will be executed.

The names of the events are case-insensitive.

Detaching events

There is a simple way of removing an event handler:

// attach event
var eventId = myTreeView.attachEvent("onSomeEvent", doSome);

// detach event
myTreeView.detachEvent(eventId);

Naming tips
  • events which start with "before" - can be blocked, returning true from such an event handler will confirm the operation, returning false or not returning anything will block the default event processing;
  • events which start with "after" - can't be blocked, but have a sibling event the name of which starts with "before".

The list of events

You can find the full list of events in the TreeView API.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Windows DHTMLX Docs

Documentation
  • Windows
    • dhtmlXWindows API
    • dhtmlXWindowsCell API
    • dhtmlXWindowsButton API
    • How to Start with Windows
    • Object Constructor
    • Configuring Windows
    • Operating Windows
    • Operating Buttons
    • Creating Custom Buttons
    • Adding External Resource to Window
    • Adding DHTMLX Components to Window
    • Handling Events
    • Using Iterator
    • Attaching Components
    • Attaching Menu/Status Bar
    • Attaching HTML
    • Attaching URL
    • Attaching Google Maps
    • Progress Bar
    • Different Content in the Same Cell
    • Coloring Text Selection
    • Migration from 3.6 to 4.0
Start

Windows

dhtmlxWindows is a windowing system that enables the user to work with several windows and their content at the same time. This system allows windows to overlap, and provides means for the user to perform standard operations such as moving/resizing a window, sending a window to the foreground/background, minimizing/maximizing a window, changing window’s position, making a window modal and sticking a window.

API reference
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
Related resources
  • You may download dhtmlxWindows from dhtmlx.com
  • Check online samples for dhtmlxWindows
  • Don't hesitate to download dhtmlxSuite to get the whole JavaScript library of UI components
Guides

Working with Windows

  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
 Covers the features of configuring and operating Windows and creating custom buttons.

Attaching Content to Windows

  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
 Describes the possibilities of integrating Windows with third-party components.

Auxiliary Resources

  • Handling Events
  • Using Iterator
 Gives common information you may need while working with Windows.

Operating the Content

  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
 Discusses how you can integrate Windows with other dhtmlx components and third-party components.

Other

  • Migration from 3.6 to 4.0
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXWindows API DHTMLX Docs

Documentation
  • dhtmlXWindows API
    • Methods
    • Events
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

dhtmlXWindows API

Methods
attachContextMenu | attaches a context menu to a window icon
attachEvent | adds any user-defined handler to available events
attachViewportTo | attaches a viewport to an existing object on the page (renders an object as a viewport)
createWindow | creates a new window and returns its handler
detachContextMenu | detaches a context menu from windows globally or detaches a custom window's menu
detachEvent | detaches a handler from an event
enableAutoViewport | if set to true, allows an object to adjust the viewport automatically to document.body
findByText | returns an array of window handlers found by header text
forEachWindow | iterator - goes through all windows and calls a user handler
getBottommostWindow | returns the bottommost window
getContextMenu | returns the context menu object attached to a window
getEffect | returns true, if the effect is enabled
getTopmostWindow | returns the topmost window
isWindow | checks if a window with the specified id exists
setEffect | sets a visual effect
setImagePath | sets path to the directory where used images are located
setSkin | changes window's skin
setViewport | sets a user-defined viewport
unload | unloads an object and clears memory
window | returns a window instance (dhtmlXWindowsCell object) found by id
Events
onBeforeMoveStart | fires before window moving is started
onBeforeResizeStart | fires before window resizing is started
onClose | fires before a window is closed
onContentLoaded | fires when content of the external page is loaded into the window
onFocus | fires when a window was focused on
onHelp | fires when the user clicks the “help” button
onHide | fires when a window was hidden
onMaximize | fires when a window was maximized
onMinimize | fires when a window was minimized
onMoveCancel | fires if moving was canceled (window hasn't changed its position)
onMoveFinish | fires when window moving was finished
onParkDown | fires when a window was parked down
onParkUp | fires when a window was parked up
onResizeCancel | fires if resizing was canceled (i.e. window size wasn't changed)
onResizeFinish | fires when window resizing was finished
onShow | fires when a window was shown
onStick | fires when the user enables the "always on top" mode
onUnStick | fires when the user disables the "always on top" mode
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • attachContextMenu
    • attachEvent
    • attachViewportTo
    • createWindow
    • detachContextMenu
    • detachEvent
    • enableAutoViewport
    • findByText
    • forEachWindow
    • getBottommostWindow
    • getContextMenu
    • getEffect
    • getTopmostWindow
    • isWindow
    • setEffect
    • setImagePath
    • setSkin
    • setViewport
    • unload
    • window
  • Events
Start Windows dhtmlXWindows API

Methods

attachContextMenu | attaches a context menu to a window icon
attachEvent | adds any user-defined handler to available events
attachViewportTo | attaches a viewport to an existing object on the page (renders an object as a viewport)
createWindow | creates a new window and returns its handler
detachContextMenu | detaches a context menu from windows globally or detaches a custom window's menu
detachEvent | detaches a handler from an event
enableAutoViewport | if set to true, allows an object to adjust the viewport automatically to document.body
findByText | returns an array of window handlers found by header text
forEachWindow | iterator - goes through all windows and calls a user handler
getBottommostWindow | returns the bottommost window
getContextMenu | returns the context menu object attached to a window
getEffect | returns true, if the effect is enabled
getTopmostWindow | returns the topmost window
isWindow | checks if a window with the specified id exists
setEffect | sets a visual effect
setImagePath | sets path to the directory where used images are located
setSkin | changes window's skin
setViewport | sets a user-defined viewport
unload | unloads an object and clears memory
window | returns a window instance (dhtmlXWindowsCell object) found by id
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachContextMenu DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

attachContextMenu

attaches a context menu to a window icon

dhtmlXMenuObject attachContextMenu(object config);

Parameters

config object the configuration object of the context menu

Returns

dhtmlXMenuObject the context menu instance

Example

// init some windows
var dhxWins = new dhtmlXWindows();
var w1 = dhxWins.createWindow("w1", 1, 1, 320, 200);
var w2 = dhxWins.createWindow("w2", 1, 1, 320, 200);

// attaches a global context menu to windows' icons
var myMenu = dhxWins.attachContextMenu({
    icons_path: "menu/icons/",
    xml: "menu/menu.xml"
});

// ==> at the moment both windows have myMenu attached to icon

// attaches an individual context menu to the icon of the window #2
var myMenu2 = w2.attachContextMenu({
    icons_path: "menu/icons/",
    xml: "menu/menu2.xml"
});

// ==> and now window "w1" has a global "myMenu" attached to icon
// and the icon of window "w2" has a personal "myMenu2" attached

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachViewportTo DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

attachViewportTo

attaches a viewport to an existing object on the page (renders an object as a viewport)

void attachViewportTo(string objId);

Parameters

objId string object id
Details

For example, we have a div with some nested objects on the page:

<div id="vpObj"> </div>

We can attach windows' viewport to the div, so its content will be accessible:

myWins.attachViewportTo("vpObj");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


createWindow DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

createWindow

creates a new window and returns its handler

object createWindow(string id,number x,number y,number width,number height);

Parameters

id | string | window id
x | number | X-coordinate of the top-left window corner
y | number | Y-coordinate of the top-left window corner
width | number | width of the window
height | number | height of the window

Returns

object dhtmlXWindowsCell object instance

Example

var w1 = myWins.createWindow(id, x, y, width, height);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachContextMenu DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

detachContextMenu

detaches a context menu from windows globally or detaches a custom window's menu

void detachContextMenu(object menuObj);

Parameters

menuObj object the context menu's object (returned by the attachContextMenu method)

Example

// attach a global context menu to windows
var myMenu = dhxWins.attachContextMenu();
// detach
dhxWins.detachContextMenu();
myMenu = null;

// attach a custom context menu to icon for the window #2
var myMenu2 = w2.attachContextMenu();
// detach the custom context menu from the icon of the window #2
w2.detachContextMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableAutoViewport DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

enableAutoViewport

if set to true, allows an object to adjust the viewport automatically to document.body

void enableAutoViewport();

Deprecated

from version 4.0

Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


findByText DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

findByText

returns an array of window handlers found by header text

array findByText(string text);

Parameters

text string window header text

Returns

array an array of window handlers

Example

var w1 = myWins.findByText("Some Text");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


forEachWindow DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

forEachWindow

iterator - goes through all windows and calls a user handler

void forEachWindow(function handler);

Parameters

handler function user-defined function

Example

myWins.forEachWindow(function(){
    // your code here
});

// or

function doWithWindow(){
   // your code here
});
myWins.forEachWindow(doWithWindow);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getBottommostWindow DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

getBottommostWindow

returns the bottommost window

object getBottommostWindow();

Returns

object the bottommost window

Example

var w1 = myWins.getBottommostWindow();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getContextMenu DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

getContextMenu

returns the context menu object attached to a window

dhtmlXMenuObject getContextMenu();

Returns

dhtmlXMenuObject the context menu instance

Example

// attach a global context menu to windows' icons
var myMenu = dhxWins.attachContextMenu();
// somewhere in a different place
var attachedMenu = dhxWins.getContextMenu();

// attach a custom context menu to icon for the window #2
var myMenu2 = w2.attachContextMenu();
// somewhere in a different place
var attachedMenu = w2.getContextMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getEffect DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

getEffect

returns true, if the effect is enabled

void getEffect();

Deprecated

from version 4.0

Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getTopmostWindow DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

getTopmostWindow

returns the topmost window

object getTopmostWindow(boolean visibleOnly);

Parameters

visibleOnly boolean enables search only in the set of visible windows

Returns

object the topmost window

Example

var w1 = myWins.getTopmostWindow(true/false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isWindow DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

isWindow

checks if a window with the specified id exists

boolean isWindow(string id);

Parameters

id string id of the window to check

Returns

boolean true, if a window exists; false, if there's no such a window

Example

var isWin = myWins.isWindow(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setEffect DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

setEffect

sets a visual effect

void setEffect();

Deprecated

from version 4.0

Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setImagePath DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

setImagePath

sets path to the directory where used images are located

void setImagePath();

Deprecated

since version 4.0 the function is deprecated, as it is no longer needed

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setSkin DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

setSkin

changes window's skin

void setSkin(string skin);

Parameters

skin string skin's name

Example

myWins.setSkin(skin);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setViewport DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

setViewport

sets a user-defined viewport

void setViewport(number x,number y,number width,number height,HTMLElement parentObj);

Parameters

x | number | top-left viewport corner's X-coordinate
y | number | top-left viewport corner's Y-coordinate
width | number | viewport's width
height | number | viewport's height
parentObj | HTMLElement | create inside of parentObj object

Example

myWins.setViewport(x, y, width, height, parentObj);

Details

Creates a new viewport with the specified position and dimensions. If parentObj is specified, attaches the viewport to it; otherwise, attaches the viewport to the document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unload DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

unload

unloads an object and clears memory

void unload();

Example

myWins.unload();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


window DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • attachViewportTo
  • createWindow
  • detachContextMenu
  • detachEvent
  • enableAutoViewport
  • findByText
  • forEachWindow
  • getBottommostWindow
  • getContextMenu
  • getEffect
  • getTopmostWindow
  • isWindow
  • setEffect
  • setImagePath
  • setSkin
  • setViewport
  • unload
  • window
Start Windows dhtmlXWindows API Methods

window

returns a window instance (dhtmlXWindowsCell object) found by id

object window(string id);

Parameters

id string id of the window

Returns

object dhtmlXWindowsCell object instance

Example

var w1 = myWins.window(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onBeforeMoveStart
    • onBeforeResizeStart
    • onClose
    • onContentLoaded
    • onFocus
    • onHelp
    • onHide
    • onMaximize
    • onMinimize
    • onMoveCancel
    • onMoveFinish
    • onParkDown
    • onParkUp
    • onResizeCancel
    • onResizeFinish
    • onShow
    • onStick
    • onUnStick
Start Windows dhtmlXWindows API

Events

onBeforeMoveStart | fires before window moving is started
onBeforeResizeStart | fires before window resizing is started
onClose | fires before a window is closed
onContentLoaded | fires when content of the external page is loaded into the window
onFocus | fires when a window was focused on
onHelp | fires when the user clicks the “help” button
onHide | fires when a window was hidden
onMaximize | fires when a window was maximized
onMinimize | fires when a window was minimized
onMoveCancel | fires if moving was canceled (window hasn't changed its position)
onMoveFinish | fires when window moving was finished
onParkDown | fires when a window was parked down
onParkUp | fires when a window was parked up
onResizeCancel | fires if resizing was canceled (i.e. window size wasn't changed)
onResizeFinish | fires when window resizing was finished
onShow | fires when a window was shown
onStick | fires when the user enables the "always on top" mode
onUnStick | fires when the user disables the "always on top" mode
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeMoveStart DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onBeforeMoveStart

fires before window moving is started

boolean onBeforeMoveStart(dhtmlXWindowsCell win){ ... };

Parameters

win dhtmlXWindowsCell window instance

Returns

boolean "return true" - allows window moving to be started, "return false" - otherwise

Example

// attach global event, it will called for all windows
myWins.attachEvent("onBeforeMoveStart", function(win){
    // your code here
    return true; // allow window moving to be started
});

Related samples

  • Move events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Change log

added in version 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeResizeStart DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onBeforeResizeStart

fires before window resizing is started

boolean onBeforeResizeStart(object win){ ... };

Parameters

win object window instance

Returns

boolean "return true" - allows window resizing to be started, "return false" - otherwise

Example

myWins.attachEvent("onBeforeResizeStart", function(win){
    // your code here
    return true; // allow window resizing to be started
});

Related samples

  • Resize events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Change log

added in version 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClose DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onClose

fires before a window is closed

void onClose(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onClose", function(win){
    // your code here
});

Related samples

  • onClose event
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onContentLoaded DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onContentLoaded

fires when content of the external page is loaded into the window

void onContentLoaded(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onContentLoaded", function(win){
    // your code here
});

Related samples

  • onContentLoaded event
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onFocus DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onFocus

fires when a window was focused on

void onFocus(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onFocus", function(win){
    // your code here
});

Related samples

  • onFocus event
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onHelp DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onHelp

fires when the user clicks the “help” button

void onHelp(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onHelp", function(win){
    // your code here
});

Related samples

  • onHelp event
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onHide DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onHide

fires when a window was hidden

void onHide(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onHide", function(win){
    // your code here
});

Related samples

  • onShow / onHide events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMaximize DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onMaximize

fires when a window was maximized

void onMaximize(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onMaximize", function(win){
    // your code here
});

Related samples

  • onMaximize / onMinimize events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMinimize DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onMinimize

fires when a window was minimized

void onMinimize(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onMinimize", function(win){
    // your code here
});

Related samples

  • onMaximize / onMinimize events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMoveCancel DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onMoveCancel

fires if moving was canceled (window hasn't changed its position)

void onMoveCancel(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onMoveCancel", function(win){
    // your code here
});

Related samples

  • Move events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Change log

added in version 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMoveFinish DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onMoveFinish

fires when window moving was finished

void onMoveFinish(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onMoveFinish", function(win){
    // code here
});

Related samples

  • Move events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onParkDown DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onParkDown

fires when a window was parked down

void onParkDown(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onParkDown", function(win){
    // code here
});

Related samples

  • onParkUp / onParkDown events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onParkUp DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onParkUp

fires when a window was parked up

void onParkUp(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onParkUp", function(win){
    // code here
});

Related samples

  • onParkUp / onParkDown events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onResizeCancel DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onResizeCancel

fires if resizing was canceled (i.e. window size wasn't changed)

void onResizeCancel(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onResizeCancel", function(win){
    // your code here
});

Related samples

  • Resize events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Change log

added in version 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onResizeFinish DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onResizeFinish

fires when window resizing was finished

void onResizeFinish(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onResizeFinish", function(win){
    // your code here
});

Related samples

  • Resize events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onShow DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onShow

fires when a window was shown

void onShow(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onShow", function(win){
    // code here
});

Related samples

  • onShow / onHide events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onStick DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onStick

fires when the user enables the "always on top" mode

void onStick(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onStick", function(win){
    // code here
});

Related samples

  • onStick / onUnStick events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onUnStick DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindows API Events

onUnStick

fires when the user disables the "always on top" mode

void onUnStick(object win){ ... };

Parameters

win object window instance

Example

myWins.attachEvent("onUnstick", function(win){
    // code here
});

Related samples

  • onStick / onUnStick events
Details

win is dhtmlXWindowsCell instance, please check dhtmlXWindowsCell API for details

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXWindowsCell API DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
    • Methods
    • Events
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

dhtmlXWindowsCell API

Methods
addUserButton | adds a user button
adjustPosition | adjusts window position inside viewport
allowMove | allows a window to be moved
allowPark | allows a window to be parked
allowResize | allows a window to be resized
appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachContextMenu | attaches a context menu to windows globally, if a custom menu hasn't been set for each window
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachEvent | adds any user-defined handler to available events
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
bringToBottom | brings/sends a window to the bottom (z-positioning)
bringToTop | brings/sends a window to the top (z-positioning)
button | returns the button instance (dhtmlXWindowBtn object) found by id
center | centers a window in the viewport
centerOnScreen | centers a window on the screen
clearIcon | clears window's header icon
close | closes a window
denyMove | doesn't allow a window to be moved
denyPark | doesn't allow a window to be parked
denyResize | doesn't allow a window to be resized
detachContextMenu | detaches a context menu from windows globally or detaches a custom window's menu
detachEvent | detaches a handler from an event
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getContextMenu | returns the context menu object attached to a window
getDimension | returns current window's dimension
getFrame | returns an iframe object when an URL is attached to a cell
getIcon | returns current window's header icon
getId | returns the id of a cell
getMaxDimension | returns current max dimension of the window
getMinDimension | returns current min dimension of the window
getPosition | returns current window's position
getText | returns window's header text
getViewName | returns the name of the current view
hide | hides a window
hideHeader | hides window's header
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
isHidden | checks the window's state: shown or hidden
isMaximized | checks if the window is maximized
isModal | checks if the window is modal
isMovable | checks if the window is movable
isOnBottom | checks if the window is at the bottom
isOnTop | checks if the window is on the top
isParkable | checks if the window is parkable
isParked | checks if the window is parked
isResizable | checks if the window is resizable
isSticked | checks if the window is sticked
keepInViewport | keeps a window within the viewport
maximize | maximizes a window
minimize | minimizes a window
park | parks a window (next action is based on window's current state)
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
removeUserButton | removes a user button
restoreIcon | restores default window's header icon (based on skin)
setDimension | sets window's dimension
setIcon | sets window's header icon
setIconCss | sets CSS style for an icon of the window
setMaxDimension | sets max window's dimension
setMinDimension | sets min window's dimension
setModal | makes a window modal/modeless
setPosition | sets window's position (moves a window to the point set by a user)
setText | sets window's header text
setToFullScreen | sets a window to the fullscreen mode
show | shows a window
showHeader | shows window's header
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
stick | sticks a window
unloadView | unloads the specified view
unstick | unsticks a window
Events
onBeforeMoveStart | fires before window moving is started
onBeforeResizeStart | fires before window resizing is started
onClose | fires before a window is closed
onContentLoaded | fires when content of the external page is loaded into the window
onFocus | fires when a window was focused on
onHelp | fires when the user clicks the “help” button
onHide | fires when a window was hidden
onMaximize | fires when a window was maximized
onMinimize | fires when a window was minimized
onMoveCancel | fires if moving was canceled (window hasn't changed its position)
onMoveFinish | fires when window moving was finished
onParkDown | fires when a window was parked down
onParkUp | fires when a window was parked up
onResizeCancel | fires if resizing was canceled (i.e. window size wasn't changed)
onResizeFinish | fires when window resizing was finished
onShow | fires when a window was shown
onStick | fires when the user enables the "always on top" mode
onUnStick | fires when the user disables the "always on top" mode
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • addUserButton
    • adjustPosition
    • allowMove
    • allowPark
    • allowResize
    • appendObject
    • attachAccordion
    • attachCarousel
    • attachChart
    • attachContextMenu
    • attachDataView
    • attachEditor
    • attachEvent
    • attachForm
    • attachGrid
    • attachHTMLString
    • attachLayout
    • attachList
    • attachMap
    • attachMenu
    • attachObject
    • attachRibbon
    • attachScheduler
    • attachSidebar
    • attachStatusBar
    • attachTabbar
    • attachToolbar
    • attachTree
    • attachTreeView
    • attachURL
    • attachVault
    • bringToBottom
    • bringToTop
    • button
    • center
    • centerOnScreen
    • clearIcon
    • close
    • denyMove
    • denyPark
    • denyResize
    • detachContextMenu
    • detachEvent
    • detachMenu
    • detachObject
    • detachRibbon
    • detachStatusBar
    • detachToolbar
    • getAttachedMenu
    • getAttachedObject
    • getAttachedRibbon
    • getAttachedStatusBar
    • getAttachedToolbar
    • getContextMenu
    • getDimension
    • getFrame
    • getIcon
    • getId
    • getMaxDimension
    • getMinDimension
    • getPosition
    • getText
    • getViewName
    • hide
    • hideHeader
    • hideMenu
    • hideRibbon
    • hideStatusBar
    • hideToolbar
    • isHidden
    • isMaximized
    • isModal
    • isMovable
    • isOnBottom
    • isOnTop
    • isParkable
    • isParked
    • isResizable
    • isSticked
    • keepInViewport
    • maximize
    • minimize
    • park
    • progressOff
    • progressOn
    • reloadURL
    • removeUserButton
    • restoreIcon
    • setDimension
    • setIcon
    • setIconCss
    • setMaxDimension
    • setMinDimension
    • setModal
    • setPosition
    • setText
    • setToFullScreen
    • show
    • showHeader
    • showInnerScroll
    • showMenu
    • showRibbon
    • showStatusBar
    • showToolbar
    • showView
    • stick
    • unloadView
    • unstick
  • Events
Start Windows dhtmlXWindowsCell API

Methods

addUserButton | adds a user button
adjustPosition | adjusts window position inside viewport
allowMove | allows a window to be moved
allowPark | allows a window to be parked
allowResize | allows a window to be resized
appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachContextMenu | attaches a context menu to windows globally, if a custom menu hasn't been set for each window
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachEvent | adds any user-defined handler to available events
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
bringToBottom | brings/sends a window to the bottom (z-positioning)
bringToTop | brings/sends a window to the top (z-positioning)
button | returns the button instance (dhtmlXWindowBtn object) found by id
center | centers a window in the viewport
centerOnScreen | centers a window on the screen
clearIcon | clears window's header icon
close | closes a window
denyMove | doesn't allow a window to be moved
denyPark | doesn't allow a window to be parked
denyResize | doesn't allow a window to be resized
detachContextMenu | detaches a context menu from windows globally or detaches a custom window's menu
detachEvent | detaches a handler from an event
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getContextMenu | returns the context menu object attached to a window
getDimension | returns current window's dimension
getFrame | returns an iframe object when an URL is attached to a cell
getIcon | returns current window's header icon
getId | returns the id of a cell
getMaxDimension | returns current max dimension of the window
getMinDimension | returns current min dimension of the window
getPosition | returns current window's position
getText | returns window's header text
getViewName | returns the name of the current view
hide | hides a window
hideHeader | hides window's header
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
isHidden | checks the window's state: shown or hidden
isMaximized | checks if the window is maximized
isModal | checks if the window is modal
isMovable | checks if the window is movable
isOnBottom | checks if the window is at the bottom
isOnTop | checks if the window is on the top
isParkable | checks if the window is parkable
isParked | checks if the window is parked
isResizable | checks if the window is resizable
isSticked | checks if the window is sticked
keepInViewport | keeps a window within the viewport
maximize | maximizes a window
minimize | minimizes a window
park | parks a window (next action is based on window's current state)
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
removeUserButton | removes a user button
restoreIcon | restores default window's header icon (based on skin)
setDimension | sets window's dimension
setIcon | sets window's header icon
setIconCss | sets CSS style for an icon of the window
setMaxDimension | sets max window's dimension
setMinDimension | sets min window's dimension
setModal | makes a window modal/modeless
setPosition | sets window's position (moves a window to the point set by a user)
setText | sets window's header text
setToFullScreen | sets a window to the fullscreen mode
show | shows a window
showHeader | shows window's header
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
stick | sticks a window
unloadView | unloads the specified view
unstick | unsticks a window
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


addUserButton DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

addUserButton

adds a user button

void addUserButton(string id,number pos,string title,string label);

Parameters

id | string | button's id
pos | number | button's position
title | string | button's tooltip
label | string | button's name (according to css)

Example

myWins.window(id).addUserButton("tray", 9, "Tray", "tray");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


adjustPosition DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

adjustPosition

adjusts window position inside viewport

void adjustPosition();

Example

myWins.window(id).adjustPosition();

Details

if viewport's dimension was changes window can be outside of viewport and unreachable, adjustPosition() change window's position so user will able to see it

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


allowMove DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

allowMove

allows a window to be moved

void allowMove();

Example

myWins.window(id).allowMove();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


allowPark DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

allowPark

allows a window to be parked

void allowPark();

Example

myWins.window(id).allowPark();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


allowResize DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

allowResize

allows a window to be resized

void allowResize();

Example

myWins.window(id).allowResize();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


appendObject DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

appendObject

attaches an object to a window without clearing window content

void appendObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

myWins.window(id).appendObject("div_a");
myWins.window(id).appendObject("div_b");
myWins.window(id).appendObject("div_c");

Details

  • style "display:none" will be removed automatically after attaching, it's useful to keep content hidden while not attached

  • for this mode a cell will add scrolls automatically, there's no need to specify width/height to the attached object (divs without specified dimension are usually stretched to 100% of width and height adjusted to content)

<div id="div_a" style="display:none;"> ... </div>
<div id="div_b"> ... </div>
<div id="div_c"> ... </div>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachAccordion DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachAccordion

attaches dhtmlxAccordion to a window

dhtmlXAccordion attachAccordion( [object conf] );

Parameters

conf object optional, accordion config for object-api init

Returns

dhtmlXAccordion dhtmlXAccordion instance

Example

var myAcc = myWins.window(id).attachAccordion();
myAcc.addItem("a1", "First item", true);
myAcc.addItem("a2", "Second item");

// or
var myAcc = myWins.window(id).attachAccordion({
    icons_path: "icons/",
    items: [
        { id: "a1", text: "Main Page", icon: "flag_red.png" },
        { id: "a2", text: "Navigation", icon: "flag_green.png" },
        { id: "a3", text: "Feedback", icon: "flag_blue.png" }
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachCarousel DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachCarousel

attaches a Carousel object to a window

object attachCarousel(number width,number height, [object conf] );

Parameters

width | number | the width of a carousel
height | number | the height of a carousel
conf | object | optional, the config of a carousel for object-api init

Returns

object dhtmlXCarousel instance

Example

var myCarousel = myWins.window(id).attachCarousel(400, 300, conf){
    ...
});

Change log

added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachChart DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachChart

attaches dhtmlxChart to a window

dhtmlXChart attachChart(object conf);

Parameters

conf object chart conf (please, check chart docs for details)

Returns

dhtmlXChart dhtmlXChart instance

Example

var myChart = myWins.window(id).attachChart({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachContextMenu DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachContextMenu

attaches a context menu to windows globally, if a custom menu hasn't been set for each window

dhtmlXMenuObject attachContextMenu(object config);

Parameters

config object the configuration object of the context menu

Returns

dhtmlXMenuObject the context menu instance

Example

// init some windows
var dhxWins = new dhtmlXWindows();
var w1 = dhxWins.createWindow("w1", 1, 1, 320, 200);
var w2 = dhxWins.createWindow("w2", 1, 1, 320, 200);

// attach a global context menu to windows
var myMenu = dhxWins.attachContextMenu({
    icons_path: "menu/icons/",
    xml: "menu/menu.xml"
});

// ==> at the moment both windows have myMenu attached to icon

// attach a custom context menu to icon for the window #2
var myMenu2 = w2.attachContextMenu({
    icons_path: "menu/icons/",
    xml: "menu/menu2.xml"
});

// ==> and now window w1 has a global myMenu attached to icon
// and window w2 has a custom myMenu2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachDataView DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachDataView

attaches dhtmlxDataView to a window

dhtmlXDataView attachDataView(object conf);

Parameters

conf object dataview conf (please, check DataView docs for details)

Returns

dhtmlXDataView dhtmlXDataView instance

Example

var myDataView = myWins.window(id).attachDataView({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEditor DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachEditor

attaches dhtmlxEditor to a window

dhtmlXEditor attachEditor();

Returns

dhtmlXEditor dhtmlXEditor instance

Example

var myEditor = myWins.window(id).attachEditor();

Details

For details about Editor initialization, read the Object Constructor article.

More info about attaching Editor to other components is given in the article Adding Editor to DHTMLX Components.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myWins.attachEvent("eventName", function(){
    // your code here
});

// detach event
myWins.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachForm DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachForm

attaches dhtmlxForm to a window

dhtmlXForm attachForm(object conf);

Parameters

conf object form conf (please, check form docs for details)

Returns

dhtmlXForm dhtmlXForm instance

Example

var myForm = myWins.window(id).attachForm({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachGrid DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachGrid

attaches dhtmlxGrid to a window

dhtmlXGridObject attachGrid( [object config] );

Parameters

config object optional, an object with the Grid configuration

Returns

dhtmlXGridObject dhtmlXGridObject instance

Example

var myGrid = myWins.window(id).attachGrid();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHTMLString DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachHTMLString

attaches HTML content to a window

void attachHTMLString(string htmlString);

Parameters

htmlString string an HTML string to attach

Example

myWins.window(id).attachHTMLString("<div>some content</div>");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachLayout DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachLayout

attaches dhtmlxLayout to a window

dhtmlXLayoutObject attachLayout(string|object conf);

Parameters

conf string|object layout pattern or api-init config

Returns

dhtmlXLayoutObject dhtmlXLayoutObject instance

Example

// pattern only
var myLayout = myWins.window(id).attachLayout("4H");

// api-init config
var myLayout = myWins.window(id).attachLayout({
    pattern: "4H",
    cells: [
        {id: "a", text: "Navigation", width: 100, header: false},
        {id: "b", text: "Advertisement", height: 100},
        {id: "c", text: "Main Page"},
        {id: "d", text: "Links", collapse: true}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachList DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachList

attaches dhtmlxList to a window

dhtmlXList attachList(object conf);

Parameters

conf object list conf (please, check List docs for details)

Returns

dhtmlXList dhtmlXList instance

Example

var myList = myWins.window(id).attachList({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMap DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachMap

attaches Google Maps to a window

object attachMap( [object opts] );

Parameters

opts object optional, map options (please, check Google docs for details)

Returns

object google.maps.Map object

Example

var GMaps = myWins.window(id).attachMap();
//or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = myWins.window(id).attachMap(mapParams);

Details

Please, check Google docs for details.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMenu DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachMenu

attaches dhtmlxMenu to a window

object attachMenu( [object conf] );

Parameters

conf object optional, menu config

Returns

object dhtmlXMenuObject instance

Example

var myMenu = myWins.window(id).attachMenu({
    icons_path: "imgs/menu/icons/",
    json: "data/json/menu.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachObject DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachObject

attaches an html object to a window

void attachObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

myWins.window(id).attachObject("objectId");

Details
  • style "display:none" (if set) will be removed automatically after attaching, useful to keep content hidden while not attached
<div id="objectId" style="display: none;">...</div>
  • for this mode window will not render native scrolls, so you need to use the following style: "width: 100%; height: 100%; overflow: auto;" to make attached object's scrolls appear when necessary
div#objectId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}
See also
  • API
    • detachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


attachRibbon DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachRibbon

attaches dhtmlxRibbon to a window

object attachRibbon( [object conf] );

Parameters

conf object optional, ribbon config

Returns

object dhtmlXRibbon instance

Example

var myRibbon = myWins.window(id).attachRibbon({
    icons_path: "imgs/ribbon/icons/",
    json: "data/json/ribbon.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachScheduler DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachScheduler

attaches dhtmlxScheduler to a window

object attachScheduler( [Date day,string mode,string contId,object scheduler] );

Parameters

day | Date | (optional) js date object, initial date in scheduler, current date by default
mode | string | (optional) name of the initial mode ("month", "day", "week"), "week" by default
contId | string | (optional) extended config, please see below
scheduler | object | (optional) dhtmlxScheduler object (another instance, only PRO version of scheduler)

Returns

object dhtmlXScheduler instance

Example

var mySched = myWins.window(id).attachScheduler();

// or
var mySched = myWins.window(id).attachScheduler(null, "month");

//or
var sTabs = '<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>'+
            '<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>'+
            '<div class="dhx_cal_tab" name="month_tab" style="right:280px;"></div>'+
            '<div class="dhx_cal_tab" name="timeline_tab" style="right:76px;"></div>';

var mySched = myWins.window(id).attachScheduler(null, "month", sTabs);

Details

There are two possible values of the contId parameter:

  • the id of the div that specifies the entire scheduler configuration
  • a string with the tabs' divs. In this case a scheduler will be rendered with the default configuration, except for the tabs: they can be presented by the default "day", "week", "month" members or by any other tabs' collection
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachSidebar DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachSidebar

attaches dhtmlxSidebar to a window

object attachSidebar( [object conf] );

Parameters

conf object optional, sidebar config for api-init

Returns

object dhtmlxSidebar instance

Example

var mySidebar = myWins.window(id).attachSidebar({
    items: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachStatusBar DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachStatusBar

attaches a status bar to a window

obj attachStatusBar( [object conf] );

Parameters

conf object optional, status bar init params

Returns

obj status bar object

Example

/* conf param properties */
{
    text:   "Text", // status bar init text
    height: 20      // status bar init height
}

/* init/attach status bar */

// default behaviour
var sbObj = myWins.window(id).attachStatusBar();

// with text
var sbObj = myWins.window(id).attachStatusBar({text: "Loading..."});

// with text and custom height
var sbObj = myWins.window(id).attachStatusBar({text: "Loading...", height: 30});

/* operations with status bar object */

// set text
sbObj.setText("Page was successfuly loaded");

// get text
var text = sbObj.getText();

Details

Since version 4.1 toolbar can be attached to statusbar in order to be used for paging in grid:

// first attach status bar
myWins.window(id).attachStatusBar({
    text:   "<div id='pagingArea'></div>",
    paging: true
});

// then init paging in grid
myGrid.enablePaging(true, 9, 3, "pagingArea");
myGrid.setPagingSkin("toolbar");
Change log
  • conf param was added in version 4.0
  • paging:true added in 4.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTabbar DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachTabbar

attaches dhtmlxTabbar to a window

object attachTabbar( [object conf] );

Parameters

conf object optional, tabbar config for API-initialization

Returns

object dhtmlXTabbar instance

Example

var myTabbar = myWins.window(id).attachTabbar({
    align: "right",
    mode: "bottom",
    tabs: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Details

old param for init tabbar instead of "conf" - "mode", it deprecated since 4.0, to set mode, please use conf.mode

// old deprecated
var myTabbar = myWins.window(id).attachTabbar("bottom");
// new usage
var myTabbar = myWins.window(id).attachTabbar({mode:"bottom"});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToolbar DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachToolbar

attaches dhtmlxToolbar to a window

object attachToolbar( [object conf] );

Parameters

conf object optional, toolbar config

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = myWins.window(id).attachToolbar({
    icons_path: "imgs/toolbar/icons/",
    json: "data/json/toolbar.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTree DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachTree

attaches dhtmlxTree to a window

object attachTree( [string|number rootId] );

Parameters

rootId string|number (optional) tree root id (check Tree docs for details)

Returns

object dhtmlXTreeObject instance

Example

var myTree = myWins.window(id).attachTree();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTreeView DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachTreeView

attaches dhtmlxTreeView to a window

object attachTreeView( [object conf] );

Parameters

conf object optional, treeview config

Returns

object dhtmlXTreeViewObject instance

Example

var myTreeView = myWins.window(id).attachTreeView({
    items: [
        {id: 1, text: "Books", open: 1, items: [
            {id: 2, text: "Turned at Dark / C. C. Hunter"},
            {id: 3, text: "Daire Meets Ever / Alyson Noël"}
        ]}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachURL DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachURL

attaches the specified URL to a window

void attachURL(string url, [boolean ajax,boolean|object postData] );

Parameters

url | string | URL to attach
ajax | boolean | (optional) if set to true, the URL will be loaded by AJAX (async GET), false by default
postData | boolean|object | (optional) performs POST request (true for a simple post or an object with params)

Example

/* iframe */
// GET
myWins.window(id).attachURL("page.html");
// POST
myWins.window(id).attachURL("page.html", null, true);
// POST with params
myWins.window(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

/* by ajax */
// GET
myWins.window(id).attachURL("page.html", true);
// POST
myWins.window(id).attachURL("page.html", true, true);
// POST with params
myWins.window(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Details

important notes:

  • to prevent caching in some browsers, an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • loading is async, so to proceed with content, you need onContentLoaded event
  • learn how to control attached content here
Change log

postData param and the ability to perform POST request are added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachVault DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

attachVault

attaches dhtmlxVault to a window

dhtmlXVaultObject attachVault(object conf);

Parameters

conf object Vault config for object-api initialization

Returns

dhtmlXVaultObject dhtmlxVault instance

Example

var myVault = myWins.window(id).attachVault({
    uploadUrl:      "http://my_mega_server/upload_handler.php",
    swfUrl:         "http://my_mega_server/upload_handler.php",
    slUrl:          "http://my_mega_server/upload_handler.php",
    swfPath:        "dhxvault.swf",
    slXap:          "dhxvault.xap"
});

Details

if separate component files are used - dhtmlxvault.js should be included after dhtmlxcontainer.js

Change log

added in 3.6.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


bringToBottom DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

bringToBottom

brings/sends a window to the bottom (z-positioning)

void bringToBottom();

Example

myWins.window(id).bringToBottom();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


bringToTop DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

bringToTop

brings/sends a window to the top (z-positioning)

void bringToTop();

Example

myWins.window(id).bringToTop();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


button DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

button

returns the button instance (dhtmlXWindowBtn object) found by id

object button(string id);

Parameters

id string id of the button

Returns

object button instance

Example

var btn = myWins.window(winId).button(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


center DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

center

centers a window in the viewport

void center();

Example

myWins.window(id).center();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


centerOnScreen DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

centerOnScreen

centers a window on the screen

void centerOnScreen();

Example

myWins.window(id).centerOnScreen();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearIcon DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

clearIcon

clears window's header icon

void clearIcon();

Deprecated

from version 4.0

Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


close DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

close

closes a window

void close();

Example

myWins.window(id).close();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


denyMove DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

denyMove

doesn't allow a window to be moved

void denyMove();

Example

myWins.window(id).denyMove();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


denyPark DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

denyPark

doesn't allow a window to be parked

void denyPark();

Example

myWins.window(id).denyPark();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


denyResize DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

denyResize

doesn't allow a window to be resized

void denyResize();

Example

myWins.window(id).denyResize();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachContextMenu DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

detachContextMenu

detaches a context menu from windows globally or detaches a custom window's menu

void detachContextMenu(object menuObj);

Parameters

menuObj object the context menu's object (returned by the attachContextMenu method)

Example

// attach a global context menu to windows
var myMenu = dhxWins.attachContextMenu();
// detach
dhxWins.detachContextMenu();
myMenu = null;

// attach a custom context menu to icon for the window #2
var myMenu2 = w2.attachContextMenu();
// detach the custom context menu from the icon of the window #2
w2.detachContextMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myWins.attachEvent("eventName", function(){
    // your code here
});

// detach event
myWins.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachMenu DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

detachMenu

detaches dhtmlxMenu from a window

void detachMenu();

Example

var myMenu = myWins.window(id).attachMenu();

// detach
myWins.window(id).detachMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachObject DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

detachObject

detaches any attached content from a window

void detachObject( [boolean remove,string|number|HTMLElement moveTo] );

Parameters

remove | boolean | (optional) set to true to remove the content permanently, false by default
moveTo | string|number|HTMLElement | (optional) the object's id or the object itself to move content to (if the "remove" parameter is set to false)
Details

Let's consider possible behavior, depending on the parameters that we pass to the method.

Assuming that we have attached Grid to a window:

var myGrid = myWins.window(id).attachGrid();

In case we need to detach Grid later, there are several possible options:

1) calling the detachObject() method without parameters:

myWins.window(id).detachObject();

The Grid object won't be completely removed. It will be attached to the document.body outside the component's container and hidden with the display:none property.

2) calling the detachObject() method with the "remove" parameter set to true:

myWins.window(id).detachObject(true);

The cell will be cleared. You need to clear the Grid object to remove it permanently.

myGrid = null;

3) calling the detachObject() method with the "remove" parameter set to false and passing an object (object's id) as the second parameter:

// assuming that a node with the id="tempNode" exists
myWins.window(id).detachObject(false, "tempNode");

The Grid object won't be completely removed. It will be moved to the "tempNode" container and hidden with the display:none property.

Note also that if you call myWins.unload(), the attached content will be removed permanently.

See also
  • API
    • attachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


detachRibbon DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

detachRibbon

detaches dhtmlxRibbon from a window

void detachRibbon();

Example

var myRibbon = myWins.window(id).attachRibbon();

// detach
myWins.window(id).detachRibbon();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachStatusBar DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

detachStatusBar

detaches status bar from a window

void detachStatusBar();

Example

var sbObj = myWins.window(id).attachStatusBar();

// detach
myWins.window(id).detachStatusBar();
sbObj = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachToolbar DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

detachToolbar

detaches dhtmlxToolbar from a window

void detachToolbar();

Example

var myToolbar = myWins.window(id).attachToolbar();

// detach
myWins.window(id).detachToolbar();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedMenu DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getAttachedMenu

returns dhtmlxMenu instance attached to a window

object getAttachedMenu();

Returns

object dhtmlXMenuObject instance

Example

var myMenu = myWins.window(id).attachMenu();

// somewhere in a different place
var attachedMenu = myWins.window(id).getAttachedMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedObject DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getAttachedObject

returns object attached to a window

string|object getAttachedObject();

Returns

string|object attached object

Example

var myGrid = myWins.window(id).attachGrid({...});

// somewhere in other place
var obj = myWins.window(id).getAttachedObject();
if (typeof(window.dhtmlXGridObject) == "function" && obj instanceof dhtmlXGridObject) {
    // code related to grid
} else {
    // some other code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedRibbon DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getAttachedRibbon

returns dhtmlxRibbon instance attached to a window

object getAttachedRibbon();

Returns

object dhtmlXRibbon instance

Example

var myRibbon = myWins.window(id).attachRibbon();

// somewhere in other place
var attachedRibbon = myWins.window(id).getAttachedRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedStatusBar DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getAttachedStatusBar

returns status bar object attached to a window

object getAttachedStatusBar();

Returns

object status bar instance

Example

var myStatusBar = myWins.window(id).attachStatusBar();

// somewhere in a different place
var attachedStatusBar = myWins.window(id).getAttachedStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedToolbar DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getAttachedToolbar

returns dhtmlxToolbar instance attached to a window

object getAttachedToolbar();

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = myWins.window(id).attachToolbar();

// somewhere in a different  place
var attachedToolbar = myWins.window(id).getAttachedToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getContextMenu DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getContextMenu

returns the context menu object attached to a window

dhtmlXMenuObject getContextMenu();

Returns

dhtmlXMenuObject the context menu instance

Example

// attach a global context menu to windows' icons
var myMenu = dhxWins.attachContextMenu();
// somewhere in a different place
var attachedMenu = dhxWins.getContextMenu();

// attach a custom context menu to icon for the window #2
var myMenu2 = w2.attachContextMenu();
// somewhere in a different place
var attachedMenu = w2.getContextMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getDimension DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getDimension

returns current window's dimension

array getDimension();

Returns

array width and height of the window

Example

var dim = dhxWins.window(id).getDimension(); // returns [w,h]

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFrame DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getFrame

returns an iframe object when an URL is attached to a window

HTMLElement getFrame();

Returns

HTMLElement an iframe object

Example

// as loading is async, you need to do it through an event
myWins.attachEvent("onContentLoaded", function(id){

    // get frame
    var ifr = myWins.window(id).getFrame();

    // access to iframe's element
    var elem = ifr.contentWindow.document.getElementById("someId");
    elem.innerHTML = "some text";

    // access to iframe's function
    // make sure that the function is in the iframe's window scope
    ifr.contentWindow.someFunc();

});

// and then attach an URL
myWins.window(id).attachURL("server/page.php?param=value");

Details

You can learn how to manage the attached content from the article Attaching URL.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getIcon DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getIcon

returns current window's header icon

void getIcon();

Deprecated

from version 4.0

Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getId DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getId

returns the id of a window

string|number getId();

Returns

string|number the window id

Example

myWins.forEachCell(function(window){
    var id = window.getId();
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getMaxDimension DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getMaxDimension

returns current max dimension of the window

array getMaxDimension();

Returns

array current max width and height of the window

Example

var dim = myWins.window(id).getMaxDimension(); // returns [w,h]

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getMinDimension DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getMinDimension

returns current min dimension of the window

index getMinDimension();

Returns

index current min width and height of the window

Example

var dim = myWins.window(id).getMinDimension(); // returns [w,h]

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getPosition DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getPosition

returns current window's position

array getPosition();

Returns

array current window position (x,y)

Example

var pos = myWins.window(id).getPosition(); // returns [x,y]

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getText DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getText

returns window's header text

string getText();

Returns

string window's header text

Example

var text = myWins.window(id).getText();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getViewName DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

getViewName

returns the name of the current view

string getViewName();

Returns

string view name

Example

var name = myWins.window(id).getViewName();

Details

The default view name is "def", it is created automatically when a window is created

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hide DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

hide

hides a window

void hide();

Example

myWins.window(id).hide();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideHeader DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

hideHeader

hides window's header

void hideHeader();

Example

myWins.window(id).hideHeader();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMenu DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

hideMenu

hides dhtmlxMenu attached to a window

void hideMenu();

Example

myWins.window(id).hideMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideRibbon DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

hideRibbon

hides dhtmlxRibbon attached to a window

void hideRibbon();

Example

myWins.window(id).hideRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideStatusBar DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

hideStatusBar

hides status bar object attached to a window

void hideStatusBar();

Example

myWins.window(id).hideStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideToolbar DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

hideToolbar

hides dhtmlxToolbar attached to a window

void hideToolbar();

Example

myWins.window(id).hideToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isHidden DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

isHidden

checks the window's state: shown or hidden

boolean isHidden();

Returns

boolean true, if hidden; false, if shown

Example

var isHidden = myWins.window(id).isHidden();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isMaximized DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

isMaximized

checks if the window is maximized

boolean isMaximized();

Returns

boolean true - maximized, false-not maximized

Example

var isMaximized = myWins.window(id).isMaximized();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isModal DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

isModal

checks if the window is modal

boolean isModal();

Returns

boolean true - modal, false - not modal

Example

var isModal = myWins.window(id).isModal();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isMovable DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

isMovable

checks if the window is movable

boolean isMovable();

Returns

boolean true - movable, false - not movable

Example

var isMovable = myWins.window(id).isMovable();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isOnBottom DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

isOnBottom

checks if the window is at the bottom

boolean isOnBottom();

Returns

boolean true, if the window is at the bottom, otherwise - false

Example

var isWinOnBottom = myWins.window(id).isOnBottom();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isOnTop DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

isOnTop

checks if the window is on the top

boolean isOnTop();

Returns

boolean true, if the window is on the top, otherwise - false

Example

var isWinOnTop = myWins.window(id).isOnTop();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isParkable DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

isParkable

checks if the window is parkable

boolean isParkable();

Returns

boolean true - parkable, false - not parkable

Example

var isParkable = myWins.window(id).isParkable();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isParked DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

isParked

checks if the window is parked

boolean isParked();

Returns

boolean true - parked, false - not parked

Example

var isPr = myWins.window(id).isParked();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isResizable DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

isResizable

checks if the window is resizable

boolean isResizable();

Returns

boolean true - resizable, false - not resizable

Example

myWins.window(id).isResizable();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isSticked DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

isSticked

checks if the window is sticked

boolean isSticked();

Returns

boolean true - sticked, false - not sticked

Example

myWins.window(id).isSticked();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


keepInViewport DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

keepInViewport

keeps a window within the viewport

void keepInViewport(boolean state);

Parameters

state boolean if true - it is not allowed to place the window outside the viewport

Example

myWins.window(id).keepInViewport(true/false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


maximize DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

maximize

maximizes a window

void maximize();

Example

myWins.window(id).maximize();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


minimize DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

minimize

minimizes a window

void minimize();

Example

myWins.window(id).minimize();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


park DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

park

parks a window (next action is based on window's current state)

void park();

Example

myWins.window(id).park();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOff DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

progressOff

hides the progress indicator in a window

void progressOff();

Example

myWins.window(id).progressOff();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOn DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

progressOn

shows the progress indicator in a window

void progressOn();

Example

myWins.window(id).progressOn();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


reloadURL DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

reloadURL

reloads the attached URL in a window

void reloadURL();

Example

myWins.window(id).reloadURL();

Details

reloads both iFrame/AJAX attached, keeps postData and params, if any

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


removeUserButton DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

removeUserButton

removes a user button

void removeUserButton(string id);

Parameters

id string button's id

Example

myWins.window(id).removeUserButton(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


restoreIcon DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

restoreIcon

restores default window's header icon (based on skin)

void restoreIcon();

Deprecated

from version 4.0

Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setDimension DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

setDimension

sets window's dimension

void setDimension(number width,number height);

Parameters

width | number | width of the window
height | number | height of the window

Example

myWins.window(id).setDimension(width, height);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIcon DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

setIcon

sets window's header icon

void setIcon();

Deprecated

from version 4.0

Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setIconCss DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

setIconCss

sets CSS style for an icon of the window

void setIconCss(string style);

Parameters

style string name of the CSS style

Example

myWins.window(id).setIconCss("flag_blue");

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setMaxDimension DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

setMaxDimension

sets max window's dimension

void setMaxDimension(number maxWidth,number maxHeight);

Parameters

maxWidth | number | max width of the window
maxHeight | number | max height of the window

Example

myWins.window(id).setMaxDimension(maxWidth, maxHeight);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setMinDimension DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

setMinDimension

sets min window's dimension

void setMinDimension(number minWidth,number minHeight);

Parameters

minWidth | number | min width of the window
minHeight | number | min height of the window

Example

myWins.window(id).setMinDimension(minWidth, minHeight);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setModal DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

setModal

makes a window modal/modeless

void setModal(boolean state);

Parameters

state boolean true/false

Example

myWins.window(id).setModal(true/false);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setPosition DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

setPosition

sets window's position (moves a window to the point set by a user)

void setPosition(number x,number y);

Parameters

x | number | x-coordinate
y | number | y-coordinate

Example

myWins.window(id).setPosition(x, y);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setText DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

setText

sets window's header text

void setText(string text);

Parameters

text string new header text

Example

myWins.window(id).setText("New Text");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setToFullScreen DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

setToFullScreen

sets a window to the fullscreen mode

void setToFullScreen();

Deprecated

from version 4.0

Change log

deprecated from version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

show

shows a window

void show();

Example

myWins.window(id).show();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showHeader DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

showHeader

shows window's header

void showHeader();

Example

myWins.window(id).showHeader();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showInnerScroll DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

showInnerScroll

shows inner window scrolls

void showInnerScroll();

Example

myWins.window(id).showInnerScroll();

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMenu DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

showMenu

shows dhtmlxMenu attached to a window

void showMenu();

Example

myWins.window(id).showMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRibbon DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

showRibbon

shows dhtmlxRibbon attached to a window

void showRibbon();

Example

myWins.window(id).showRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showStatusBar DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

showStatusBar

shows status bar object attached to a window

void showStatusBar();

Example

myWins.window(id).showStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showToolbar DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

showToolbar

shows dhtmlxToolbar attached to a window

void showToolbar();

Example

myWins.window(id).showToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showView DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

showView

shows the specified view, creates a new one if it doesn't exist

boolean showView(string name);

Parameters

name string view name

Returns

boolean true if view was accessed first time, false otherwise

Example

// here is an example how to initialize content
// in several views on demand inside of a window

// 1) for the default view "def" we will simply attach an URL
// 2) for the "grid" view  we will attach menu and grid
// 3) and for the "tree" view we will attach toolbar and tree

var myMenu;
var myGrid;
var myToolbar;
var myTree;

// the default view is ready right after component initialization
myWins.window(id).attachURL("http://somedomain.com/page.html");

function initView(name) {
    // assuming that this function will be called after some user action
    // like a button click or some other
    var state = myWins.window(id).showView(name);
    if (state == true) {
        // first call, initializes corresponding components
        if (name == "grid") {
            myMenu = myWins.window(id).attachMenu();
            myGrid = myWins.window(id).attachGrid();
        } else if (name == "tree") {
            myToolbar = myWins.window(id).attachToolbar();
            myTree = myWins.window(id).attachTree();
        }
    }
}

Details

The default view name is "def", it is created automatically when a window is created

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


stick DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

stick

sticks a window

void stick();

Example

myWins.window(id).stick();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unloadView DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

unloadView

unloads the specified view

void unloadView(string name);

Parameters

name string view name

Example

// create test view and switch to it
var state = myWins.window(id).showView("test_view");
console.log(state); // true

// attach some content
myWins.window(id).attachMenu();
myWins.window(id).attachGrid();

// go back to default view
var state = myWins.window(id).showView("def");
console.log(state); // false

// unload test_view
myWins.window(id).unloadView("test_view");

// open test_view again
var state = myWins.window(id).showView("test_view");
console.log(state); // true

// attach some content
myWins.window(id).attachMenu();
myWins.window(id).attachGrid();

// unload test_view
myWins.window(id).unloadView("test_view");

// check active view
var name = myWins.window(id).getViewName();
console.log(name); // "test_view"

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unstick DHTMLX Docs

Documentation
  • addUserButton
  • adjustPosition
  • allowMove
  • allowPark
  • allowResize
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachContextMenu
  • attachDataView
  • attachEditor
  • attachEvent
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • bringToBottom
  • bringToTop
  • button
  • center
  • centerOnScreen
  • clearIcon
  • close
  • denyMove
  • denyPark
  • denyResize
  • detachContextMenu
  • detachEvent
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getContextMenu
  • getDimension
  • getFrame
  • getIcon
  • getId
  • getMaxDimension
  • getMinDimension
  • getPosition
  • getText
  • getViewName
  • hide
  • hideHeader
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • isHidden
  • isMaximized
  • isModal
  • isMovable
  • isOnBottom
  • isOnTop
  • isParkable
  • isParked
  • isResizable
  • isSticked
  • keepInViewport
  • maximize
  • minimize
  • park
  • progressOff
  • progressOn
  • reloadURL
  • removeUserButton
  • restoreIcon
  • setDimension
  • setIcon
  • setIconCss
  • setMaxDimension
  • setMinDimension
  • setModal
  • setPosition
  • setText
  • setToFullScreen
  • show
  • showHeader
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • stick
  • unloadView
  • unstick
Start Windows dhtmlXWindowsCell API Methods

unstick

unsticks a window

void unstick();

Example

myWins.window(id).unstick();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onBeforeMoveStart
    • onBeforeResizeStart
    • onClose
    • onContentLoaded
    • onFocus
    • onHelp
    • onHide
    • onMaximize
    • onMinimize
    • onMoveCancel
    • onMoveFinish
    • onParkDown
    • onParkUp
    • onResizeCancel
    • onResizeFinish
    • onShow
    • onStick
    • onUnStick
Start Windows dhtmlXWindowsCell API

Events

onBeforeMoveStart | fires before window moving is started
onBeforeResizeStart | fires before window resizing is started
onClose | fires before a window is closed
onContentLoaded | fires when content of the external page is loaded into the window
onFocus | fires when a window was focused on
onHelp | fires when the user clicks the “help” button
onHide | fires when a window was hidden
onMaximize | fires when a window was maximized
onMinimize | fires when a window was minimized
onMoveCancel | fires if moving was canceled (window hasn't changed its position)
onMoveFinish | fires when window moving was finished
onParkDown | fires when a window was parked down
onParkUp | fires when a window was parked up
onResizeCancel | fires if resizing was canceled (i.e. window size wasn't changed)
onResizeFinish | fires when window resizing was finished
onShow | fires when a window was shown
onStick | fires when the user enables the "always on top" mode
onUnStick | fires when the user disables the "always on top" mode
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeMoveStart DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onBeforeMoveStart

fires before window moving is started

boolean onBeforeMoveStart(object win){ ... };

Parameters

win object the window instance

Returns

boolean "return true" - allows window moving to be started, "return false" - otherwise

Example

w1.attachEvent("onBeforeMoveStart", function(win){
    // your code here
    return true; // allow window moving to be started
});

Related samples

  • Move events
Change log

added in version 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeResizeStart DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onBeforeResizeStart

fires before window resizing is started

boolean onBeforeResizeStart(object win){ ... };

Parameters

win object the window instance

Returns

boolean "return true" - allows window resizing to be started, "return false" - otherwise

Example

w1.attachEvent("onBeforeResizeStart", function(win){
    // your code here
    return true; // allow window resizing to be started
});

Related samples

  • Resize events
Change log

added in version 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClose DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onClose

fires before a window is closed

void onClose(){ ... };

Example

w1.attachEvent("onClose", function(win){
    // code here
});

Related samples

  • onClose event
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onContentLoaded DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onContentLoaded

fires when content of the external page is loaded into the window

void onContentLoaded(){ ... };

Example

w1.attachEvent("onContentLoaded", function(win){
    // code here
});

Related samples

  • onContentLoaded event
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onFocus DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onFocus

fires when a window was focused on

void onFocus(){ ... };

Example

w1.attachEvent("onFocus", function(win){
    // code here
});

Related samples

  • onFocus event
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onHelp DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onHelp

fires when the user clicks the “help” button

void onHelp(){ ... };

Example

w1.attachEvent("onHelp", function(win){
    // code here
});

Related samples

  • onHelp event
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onHide DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onHide

fires when a window was hidden

void onHide(){ ... };

Example

w1.attachEvent("onHide", function(win){
    // code here
});

Related samples

  • onShow / onHide events
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMaximize DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onMaximize

fires when a window was maximized

void onMaximize(){ ... };

Example

w1.attachEvent("onMaximize", function(win){
    // code here
});

Related samples

  • onMaximize / onMinimize events
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMinimize DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onMinimize

fires when a window was minimized

void onMinimize(){ ... };

Example

w1.attachEvent("onMinimize", function(win){
    // code here
});

Related samples

  • onMaximize / onMinimize events
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMoveCancel DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onMoveCancel

fires if moving was canceled (window hasn't changed its position)

void onMoveCancel(object win){ ... };

Parameters

win object the window instance

Example

myWins.attachEvent("onMoveCancel", function(win){
    // your code here
});

Related samples

  • Move events
Change log

added in version 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onMoveFinish DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onMoveFinish

fires when window moving was finished

void onMoveFinish(){ ... };

Example

w1.attachEvent("onMoveFinish", function(win){
    // code here
});

Related samples

  • Move events
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onParkDown DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onParkDown

fires when a window was parked down

void onParkDown(){ ... };

Example

w1.attachEvent("onParkDown", function(win){
    // code here
});

Related samples

  • onParkUp / onParkDown events
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onParkUp DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onParkUp

fires when a window was parked up

void onParkUp(){ ... };

Example

w1.attachEvent("onParkUp", function(win){
    // code here
});

Related samples

  • onParkUp / onParkDown events
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onResizeCancel DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onResizeCancel

fires if resizing was canceled (i.e. window size wasn't changed)

void onResizeCancel(object win){ ... };

Parameters

win object the window instance

Example

w1.attachEvent("onResizeCancel", function(win){
    // your code here
});

Related samples

  • Resize events
Change log

added in version 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onResizeFinish DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onResizeFinish

fires when window resizing was finished

void onResizeFinish(){ ... };

Example

w1.attachEvent("onResizeFinish", function(win){
    // code here
});

Related samples

  • Resize events
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onShow DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onShow

fires when a window was shown

void onShow(){ ... };

Example

w1.attachEvent("onShow", function(win){
    // code here
});

Related samples

  • onShow / onHide events
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onStick DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onStick

fires when the user enables the "always on top" mode

void onStick(){ ... };

Example

w1.attachEvent("onStick", function(win){
    // code here
});

Related samples

  • onStick / onUnStick events
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onUnStick DHTMLX Docs

Documentation
  • onBeforeMoveStart
  • onBeforeResizeStart
  • onClose
  • onContentLoaded
  • onFocus
  • onHelp
  • onHide
  • onMaximize
  • onMinimize
  • onMoveCancel
  • onMoveFinish
  • onParkDown
  • onParkUp
  • onResizeCancel
  • onResizeFinish
  • onShow
  • onStick
  • onUnStick
Start Windows dhtmlXWindowsCell API Events

onUnStick

fires when the user disables the "always on top" mode

void onUnStick(){ ... };

Example

w1.attachEvent("onUnstick", function(win){
    // code here
});

Related samples

  • onStick / onUnStick events
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXWindowsButton API DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
    • Methods
    • Events
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

dhtmlXWindowsButton API

Methods
attachContextMenu | attaches a context menu to a window's button
attachEvent | adds any user-defined handler to available events
detachContextMenu | detaches a context menu from a window's button
detachEvent | detaches a handler from an event
disable | disables a button
enable | enables a button
getContextMenu | returns the context menu object attached to a window's button
hide | hides a button
isEnabled | checks if a button is enabled
isHidden | checks if a button is hidden
setCss | sets custom CSS style for a button
show | shows a button
Events
onClick redefines default onClick handler
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • attachContextMenu
    • attachEvent
    • detachContextMenu
    • detachEvent
    • disable
    • enable
    • getContextMenu
    • hide
    • isEnabled
    • isHidden
    • setCss
    • show
  • Events
Start Windows dhtmlXWindowsButton API

Methods

attachContextMenu | attaches a context menu to a window's button
attachEvent | adds any user-defined handler to available events
detachContextMenu | detaches a context menu from a window's button
detachEvent | detaches a handler from an event
disable | disables a button
enable | enables a button
getContextMenu | returns the context menu object attached to a window's button
hide | hides a button
isEnabled | checks if a button is enabled
isHidden | checks if a button is hidden
setCss | sets custom CSS style for a button
show | shows a button
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachContextMenu DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • detachContextMenu
  • detachEvent
  • disable
  • enable
  • getContextMenu
  • hide
  • isEnabled
  • isHidden
  • setCss
  • show
Start Windows dhtmlXWindowsButton API Methods

attachContextMenu

attaches a context menu to a window's button

dhtmlXMenuObject attachContextMenu(object config);

Parameters

config object the configuration object of the context menu

Returns

dhtmlXMenuObject the context menu instance

Example

// attach a context menu to a button of the window #1
var myMenuPark = w1.button("park").attachContextMenu({
    icons_path: "menu/icons/",
    xml: "menu/menu_park.xml"
});

// attach a context menu to a button of the window#2
var myMenuMinMax = w2.button("minmax").attachContextMenu({
    icons_path: "menu/icons/",
    xml: "menu/menu_minmax.xml"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • detachContextMenu
  • detachEvent
  • disable
  • enable
  • getContextMenu
  • hide
  • isEnabled
  • isHidden
  • setCss
  • show
Start Windows dhtmlXWindowsButton API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachContextMenu DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • detachContextMenu
  • detachEvent
  • disable
  • enable
  • getContextMenu
  • hide
  • isEnabled
  • isHidden
  • setCss
  • show
Start Windows dhtmlXWindowsButton API Methods

detachContextMenu

detaches a context menu from a window's button

void detachContextMenu(object menuObj);

Parameters

menuObj object the context menu's object (returned by the attachContextMenu method)

Example

// attach a context menu to a button of the window #1
var myMenuPark = w1.button("park").attachContextMenu();
// detach the context menu from a button of the window#1
w1.button("park").detachContextMenu();
myMenuPark = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • detachContextMenu
  • detachEvent
  • disable
  • enable
  • getContextMenu
  • hide
  • isEnabled
  • isHidden
  • setCss
  • show
Start Windows dhtmlXWindowsButton API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


disable DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • detachContextMenu
  • detachEvent
  • disable
  • enable
  • getContextMenu
  • hide
  • isEnabled
  • isHidden
  • setCss
  • show
Start Windows dhtmlXWindowsButton API Methods

disable

disables a button

void disable();

Example

myWins.window(id).button(id).disable();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enable DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • detachContextMenu
  • detachEvent
  • disable
  • enable
  • getContextMenu
  • hide
  • isEnabled
  • isHidden
  • setCss
  • show
Start Windows dhtmlXWindowsButton API Methods

enable

enables a button

void enable();

Example

myWins.window(id).button(id).enable();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getContextMenu DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • detachContextMenu
  • detachEvent
  • disable
  • enable
  • getContextMenu
  • hide
  • isEnabled
  • isHidden
  • setCss
  • show
Start Windows dhtmlXWindowsButton API Methods

getContextMenu

returns the context menu object attached to a window's button

dhtmlXMenuObject getContextMenu();

Returns

dhtmlXMenuObject the context menu instance

Example

// attach a context menu to a button of the window #1
var myMenuPark = w1.button("park").attachContextMenu();
// somewhere in a different place
var attachedMenu = w1.button("park").getContextMenu();

// attach a context menu to a button of the window#2
var myMenuMinMax = w2.button("minmax").attachContextMenu();
// somewhere in a different place
var attachedMenu = w2.button("minmax").getContextMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hide DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • detachContextMenu
  • detachEvent
  • disable
  • enable
  • getContextMenu
  • hide
  • isEnabled
  • isHidden
  • setCss
  • show
Start Windows dhtmlXWindowsButton API Methods

hide

hides a button

void hide();

Example

myWins.window(id).button(id).hide();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isEnabled DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • detachContextMenu
  • detachEvent
  • disable
  • enable
  • getContextMenu
  • hide
  • isEnabled
  • isHidden
  • setCss
  • show
Start Windows dhtmlXWindowsButton API Methods

isEnabled

checks if a button is enabled

boolean isEnabled();

Returns

boolean true - the button is enabled, otherwise - false

Example

var isBtnEnabled = myWins.window(id).button(id).isEnabled();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isHidden DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • detachContextMenu
  • detachEvent
  • disable
  • enable
  • getContextMenu
  • hide
  • isEnabled
  • isHidden
  • setCss
  • show
Start Windows dhtmlXWindowsButton API Methods

isHidden

checks if a button is hidden

boolean isHidden();

Returns

boolean true - the button is hidden, otherwise - false

Example

var isBtnHidden = myWins.window(id).button(id).isHidden();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setCss DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • detachContextMenu
  • detachEvent
  • disable
  • enable
  • getContextMenu
  • hide
  • isEnabled
  • isHidden
  • setCss
  • show
Start Windows dhtmlXWindowsButton API Methods

setCss

sets custom CSS style for a button

void setCss(string style);

Parameters

style string name of the CSS style

Example

myWins.window(id).button(id).setCss("style_name");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


show DHTMLX Docs

Documentation
  • attachContextMenu
  • attachEvent
  • detachContextMenu
  • detachEvent
  • disable
  • enable
  • getContextMenu
  • hide
  • isEnabled
  • isHidden
  • setCss
  • show
Start Windows dhtmlXWindowsButton API Methods

show

shows a button

void show();

Example

myWins.window(id).button(id).show();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onClick
Start Windows dhtmlXWindowsButton API

Events

onClick redefines default onClick handler
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onClick DHTMLX Docs

Documentation
  • onClick
Start Windows dhtmlXWindowsButton API Events

onClick

redefines default onClick handler

void onClick(dhtmlXWindowsCell win,dhtmlXWindowsButton button){ ... };

Parameters

win | dhtmlXWindowsCell | window instance
button | dhtmlXWindowsButton | button instance

Example

myWins.window(id).button(id).attachEvent("onClick", function(win, button){
    // code here
});
// or
function doOnButtonClick(win, button){
    // code here
}
myWins.window(id).button(id).attachEvent("onClick", doOnButtonClick);

Details

Executes the specified JS code or function, when the user clicks the left mouse button on the object.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


How to Start with Windows DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
    • Initializing with Basic Parameters
    • Initialization with Additional Parameters
    • Attach Object
    • Append Object
    • Attach URL
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

How to Start with Windows

Initializing with Basic Parameters

The first things that need to be done for any type of dhtmlxWindows' initialization are the following:

  • Download the dhtmlxWindows package from the server and place it in a folder;
  • Create an index.html file;
  • Place the full paths to dhtmlxWindows' CSS and JS files into the header of html file.
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxwindows.css">
<script src="codebase/dhtmlxwindows.js"></script>

If you're working with the whole DHTMLX Suite, there's no need to include extra files - dhtmlx js/css files will be enough:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
    <script src="codebase/dhtmlx.js"></script>
</head>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js"
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css"
    type="text/css">
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js"
    type="text/javascript"></script>

Creating Basic Object for a Set of New Windows

A base for a set of new windows can be created in the following way:

var myWins= new dhtmlXWindows();

Creating New Window

While creating a new window with minimal initialization, the user should use createWindow() method and pass the following parameters:

  • Window Id;
  • Window's position (x & y);
  • Window's width & height.
var win = myWins.createWindow(string id, int x, int y, int width, int height);

The user can set the header text to the newly created window using the command setText():

myWins.window(id).setText(string text);

Setting Default Values

Default values in dhtmlxWindows are:

  • Window control buttons (buttons "Park", "Maximize" and "Close" are enabled and visible by default);
  • Window icon (default icon is defined by the skin);
  • Window maxDimension (default value is "auto") and minDimension parameters (default value is "200x140px");
  • The possibility to resize a window (default value is "true");
  • The possibility to move a window (default value is "true");
  • Window's default skin (default value is "dhx_skyblue").

Initialization with Additional Parameters

When creating a new window with extended initialization, the user should call the same commands described in Initializing with Basic Parameters. Additional parameters, which can be defined, are:

  • Header Icon;
  • Allow/Deny Resizing;
  • Allow/Deny Moving;
  • Allow/Deny Parking;
  • Hide/Disable Buttons.

Allow/Deny Resizing

By default window resizing is allowed. Extended initialization allows the user to deny window resizing by calling the method denyResize():

myWins.window(id).denyResize();

Resizing of a window can be allowed again with the help of the following method:

myWins.window(id).allowResize();

Allow/Deny Moving

By default window moving is allowed. The user can deny window moving by calling the following method:

myWins.window(id).denyMove();

Window moving can be allowed again if the user calls method allowMove():

myWins.window(id).allowMove();

Allow/Deny Parking

By default window parking is allowed. The user can choose to deny window parking using the following method:

myWins.window(id).denyPark();

Window parking can be allowed again with the help of the following method:

myWins.window(id).allowPark();

Hide/Disable Buttons

All default buttons are enabled. The user can hide some of/all these buttons or disable them. In order to hide/disable these buttons the user should call the following methods:

myWins.window(id).button("close").hide();
myWins.window(id).button("park").disable();

Attach Object

dhtmlxWindows allows users to attach objects to any window by method attachObject():

myWins.window(id).attachObject(objId);

If the user wants to adjust window's dimension to that of the container attached to the window, one more parameter should be added to the attachObject() method:

myWins.window(id).attachObject(objId, true);

Note: The container (which dimensions the user wants the window to be adjusted to) should have certain constant sizes.

Object Size Handling

By default, windows have overflow:hidden style. In case the window is not able to display the whole object, the following style should be specified for the object:

<div id="objId" style="width:100%;height:100%;overflow:auto;...">

Now the window will display the scroll bar in case the object does not fit window 's size.

Append Object

The user can append an object from the page to any dhtmlx window. The essence of appending an object is the following: when the user appends more than one object to a window, every next added object doesn't replace the previous one, but is added right after it. To append an object to a window, the user needs to indicate id of the window and id of the appended object:

myWins.window(id).appendObject(firstId);
myWins.window(id).appendObject(secondId);

It should be noted that the first object can be added to a window through attachObject() method, while for appending the second object, the user should apply appendObject() method:

myWins.window(id).attachObject(objId);
myWins.window(id).appendObject(secondId);

Attach URL

There is the possibility to attach any external page to a window or any content stored locally (using AJAX) with the help of method attachURL():

myWins.window(id).attachURL(url, AJAX);

The second parameter here indicates whether the content stored locally will be loaded through AJAX (the second parameter should be set to true) or not (the second parameter should be omitted). When the content is loaded into the window, the event onContentLoaded can be called.

Accessing Inner Window Content

Any object on the external page attached with attachURL() method can be accessed like this:

Page inner.html

<div id="A">...</div>
<script>
    function myFunc() {
    ...
    };
</script>

Page index.html

var myWins = new dhtmlXWindows(...);
myWins.createWindow("w1",...);
w1.attachURL("inner.html");
// accessing <div id="A">
if (_isIE) {
    myWins.window("w1")._frame.contentWindow.document.getElementById("A")...
} else {
    myWins.window("w1")._frame.contentDocument.getElementById("A")...
}
// calling function from inner.html
myWins.window("w1")._frame.contentWindow.myFunc();

Window Accessing from Attached URL

If the user needs to do some action with a window from the attached URL (for example, close it by clicking some button on page), he should write the following code lines in the attached external page:

<input type="button" value="close window" onclick="closeWindow();"> // create a button
<script>
    function closeWindow() {
        parent.myWins.window("w1").close(); // close a window
        // or
        parent.win.close(); // close a window
    };
</script>

It should be noted that variables dhxWins and win should be created as global ones (in our main dhtmlxWindows script) in order to be seen by the script in the attached external page.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Object Constructor DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
    • List of initialization properties for createWindow() method
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Object Constructor

The process of creating the Windows component implies the creation of two objects:

  • viewport, which will define zone of window's activity ( needs to be created only once )
  • window object itself
var myWins = new dhtmlXWindows(skin);
myWins.createWindow(id, left, top, width, height);

where

  • skin - (string) changes window's skin (setSkin())

  • id - id of a window

  • left - horizontal position of a window
  • top - vertical position of a window
  • width - width of a window
  • height - height of a window

The full list of initialization properties for the createWindow method is given below.

var myWins = new dhtmlXWindows()
myWins.createWindow("about", 20, 30, 300, 200);

Windows can also be initialized by object notation

var myWins = new dhtmlXWindows({
    image_path:"codebase/imgs/",
    skin:"dhx_blue"
});
myWins.createWindow({
    id:"about",
    left:20,
    top:30,
    width:300,
    height:200,
    center:true,
    onClose:function(){
        alert("I'm closed");
    }
});

List of initialization properties for createWindow() method
  • move - {boolean} allows a window to be moved (allowMove())
  • park - {boolean} allows a window to be parked (allowPark())
  • resize - {boolean} allows a window to be resized (allowResize())
  • center - {boolean} centers a window in the viewport (center())
  • modal - {boolean} makes a window modal/modeless (setModal())
  • caption - {string} sets window's header text (setText())
  • header - {boolean} shows window's header (showHeader())
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring Windows DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
    • Setting Viewport
    • Skinning Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Configuring Windows

The global parameters described in the article affect the entire system of dhtmlxWindows.

Setting Viewport

This parameter sets the invisible area that limits windows' movements. Windows can't be completely moved outside the viewport. Users can specify the size of the viewport. By default, the size of the viewport occupies the document.body and automatically changes its size when document.body's size changes.

To enable user-defined viewport, the user should use the method setViewport():

myWins.setViewport(10, 10, 1260, 500, parentObj);

parentObj parameter is used to attach a viewport to a parent object. To attach a viewport to the existing object on the page, the user should use the method attachViewportTo():

myWins.attachViewportTo(obj);

The method keepInViewport, when is set to true, permanently locates a window within the viewport (the window can't be moved outside the viewport).

myWins.window(id).keepInViewport(true/false);

By default, this method is set to false. Thus, all windows can be moved outside the viewport in such a way that only a tiny part of window's header will be seen.

Skinning Windows

The skin parameter allows users to change dhtmlxWindows skins. There is a set of predefined skins, among which the user can choose one with the help of the method setSkin():

myWins.setSkin(String skin);

Skins are able to be changed on the fly, i.e. the user can change them very easily in the process of work by using setSkin() method. There is also the possibility for users to create their own skins. The following built-in skins are available in dhtmlxWindows:

"material"(the default one)
"dhx_skyblue"
"dhx_web"
"dhx_terrace"

It's impossible to use several windows with different skins, as the skin is applied to the viewport only.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Operating Windows DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
    • Window Accessing
    • Changing Dimension
    • Changing Position
    • Window Parking
    • Window Minimizing/Maximizing
    • Bringing Window to Top/Bottom
    • Window Sticking/Unsticking
    • Making Window Modal/Modeless
    • Get Topmost/Bottommost Window
    • Making Window Centered
    • Window Progress Indicator
    • Window Header Control
    • Making All Windows Inactive
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Operating Windows

Window Accessing

The user can access a window in two following ways:

  1. Using a direct link to the object that will be returned by createWindow() method:
    var myWins = new dhtmlxWindows();
var win = myWins.createWindow(id,...);
  2. Through the global scope by calling window() function:
    var myWins = new dhtmlxWindows();
myWins.window(id);

Thus, the user can access this window using win variable or by calling window() function.

Regardless of the way the window is accessed, the content of "win" variable and "windows.window(id)" will be equal.

Changing Dimension

If the user wants to change window's dimension, he should use the method setDimension() and pass width and height values:

myWins.window(id).setDimension(int width, int height);

To set only window's width, or only its height, the user should apply the following variants of syntax:

myWins.window(id).setDimension(int width); // only width is set
myWins.window(id).setDimension(null, int height); // only height is set

The same syntax variants are available for methods that are responsible for setting minimum and maximum dimensions. Default minimum and maximum Dimensions are set in dhtmlxWindows. The user has the possibility to set his own minimum and maximum Dimension parameters to a window by calling the methods setMaxDimension() and setMinDimension():

myWins.window(id).setMaxDimension(int maxWidth, int maxHeight);
myWins.window(id).setMinDimension(int minWidth, int minHeight);

There is also a method to get window's dimension (will return array (width, height)):

var dimension = dhxWins.window(id).getDimension();

The following methods can also be used to get minimum and maximum Dimensions:

var maxDimension = myWins.window(id).getMaxDimension();
var minDimension = myWins.window(id).getMinDimension();

Note: a window will be able to occupy the whole viewport after minimizing if the user sets maxDimension to auto:

myWins.window(id).setMaxDimension("auto", "auto");

In this case the window becomes unresizable (only in the maximized state). Note: if the user changes window's dimension in such a way that it can not display the whole title text, the text will be cut.

Changing Position

As with window's dimension, the user is allowed to change window's position. In order to do this, the method setPosition() should be called with values x and y:

myWins.window(id).setPosition(int x, int y);

There is also a command to get window's position (will return Array(x, y)):

var position = myWins.window(id).getPosition();

Window Parking

If the user wants to park a window, he should use the command park(). If the window was parked up, this command makes it park down, and vice versa:

myWins.window(id).park();

Window Minimizing/Maximizing

To minimize/maximize a window from script, the user should call the following methods:

  • maximize();
  • minimize();
myWins.window(id).maximize();
myWins.window(id).minimize();

Bringing Window to Top/Bottom

The user can bring any window to the top with the help of the method bringToTop():

myWins.window(id).bringToTop();

In this case the window will be automatically focused.

The method bringToBottom() brings any window to bottom:

myWins.window(id).bringToBottom();

In the situation when this method was applied to the top window, the window that lies right after the top one, occupies its position and becomes the top window. Some peculiarities of these two methods are revealed dealing with sticked/unsticked windows.

Window Sticking/Unsticking

The user has the opportunity to stick/unstick a window - to place it always on the top. To do this the user should use methods stick() or unstick().

myWins.window(id).stick();
myWins.window(id).unstick();

If there is any window that was made sticked in the system, global windows behavior will be the following:

  • All windows will be divided into 2 groups: sticked and unsticked;
  • Sticked windows (even unfocused ones) will always be positioned over the unsticked ones;
  • Method bringToTop() will place a sticked window on the top among the other sticked ones. As for an unsticked window (in case, there is at least one sticked window), it will be placed on the top of all unsticked windows, but below the sticked ones;
  • Method bringToBottom() will work in the following way with a sticked window: it will be brought to the bottom, but will be placed over any unsticked window;
  • Any sticked/unsticked window will always be placed under any modal window.

Making Window Modal/Modeless

There is the possibility to make a window modal calling the method setModal():

myWins.window(id).setModal(Boolean state);

Any modal window has the following features:

  • Only one modal window is allowed at a time;
  • If a user wants to set modal option to any other window, this option should be removed from the current modal window. Or current modal window itself should be removed;
  • Any modal window will always be placed over any other windows (even sticked ones);
  • A modal window requires the user to interact with it, before he can return to operating any other windows (i.e. this window is always focused);
  • By default, a newly created window is always modeless.

The value "true" in the method setModal() makes a window modal, while value "false" makes it modeless. Calling the methods hide() and show() doesn't change the window modality at all. That's why, if you want to hide/show a modal window you should use the related method in pair with setModal().

//to hide a modal window and enable other elements
myWins.window(id).hide();
myWins.window(id).setModal(false);
//to show the modal window again and disable other elements
myWins.window(id).show();
myWins.window(id).setModal(true);

A modal window blocks all other work-flow until it is closed. Thus, the user won't be able to do anything else while a modal window is open. Modal windows can be used in order to warn the user, or draw his attention to some important change, alert, or event that is going to happen.

Get Topmost/Bottommost Window

The user is able to get the handler of the topmost window with the help of the following method:

myWins.window(id).getTopmostWindow();

To get handler of the bottommost window, the user should call the following method:

myWins.window(id).getBottommostWindow();

Making Window Centered

There is also the possibility to make any window centered (place it in the center of the viewport) by calling the method center(). This method is similar to setPosition() method in some way, but the position of a window is set automatically and does not require the user to specify it.

Note: Position of a window will be defined relative to the viewport.

myWins.window(id).center();

There is also a method which allows you to center window on the screen:

myWins.window(id).centerOnScreen();

Window Progress Indicator

The user can show a progress indicator in any window. This indicator will visually inform the user about the fact that the information in a window is still loading. A progress indicator can be shown in the following way:

myWins.window(id).progressOn();

A progress indicator can be easily hidden in a window in such a way:

myWins.window(id).progressOff();

Window Header Control

A header of a certain window can be easily hidden by the following method:

myWins.window(id).hideHeader();

The window header will be made visible again in the following way:

myWins.window(id).showHeader();

Making All Windows Inactive

Use the configuration below to make all the windows inactive:

var myWins = new dhtmlXWindows();
myWins.createWindow("w1",...);
myWins.createWindow("w2",...);
...
myWins._makeActive(null);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Operating Buttons DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
    • Accessing Buttons
    • Showing/Hiding Buttons
    • Button Enabling/Disabling
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Operating Buttons

The window buttons are presented in the image below:

The "Help" button is used to fire the onHelp event.

The "Stick" button is used to show the window on top of other windows.

The "Park" button is used to collapse a window into the header.

The "Minmax" button is used to maximize/minimize the window.

The "Close" button is used to close the window.

The "Dock" button appears automatically instead of the "Close" button in case of cells' docking/undocking.

Accessing Buttons

A button can be accessed in the following way:

var btn = myWins.window(id).button(id);

Default buttons ids are:

  • "stick" for the "Stick" button;
  • "sticked" for the "Sticked" button (pressed "stick", used for "unstuck" action);
  • "help" for the "Help" button;
  • "park" for the "Park" button;
  • "minmax" for the "Maximize/Minimize" button;
  • "close" for the "Close" button;
  • "dock" for the "Dock" button.

Showing/Hiding Buttons

To hide a button use the method hide()

myWins.window(id).button(id).hide();

To show a button use the method show():

myWins.window(id).button(id).show();

User-buttons also inherit these methods.

Button Enabling/Disabling

The button can be enabled/disabled by user with the help of the methods enable() and disable()

myWins.window(id).button(id).enable();
myWins.window(id).button(id).disable();

User-buttons also inherit these methods.

Note: in some cases button enabling/disabling is determined by Object. For example, when the window is Parked Up, resize buttons are inactive/disabled. But they become active/enabled when the window is Parked Down. Thus, resize buttons are disabled by Object.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Creating Custom Buttons DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
    • Adding User-Button
    • Defining Button Position
    • Adding Event to Button
    • Operating User Button
    • Removing User-Button
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Creating Custom Buttons

Adding User-Button

To add a newly created button to a window the user should use the method addUserButton()

myWins.window(id).addUserButton(id, position, tooltip, name);

This method takes the following parameters:

  • id - id of the newly created button;
  • position - the type of this parameter is number. This parameter defines the place of the button on the caption bar (left to right: 0 - the first button, 1 - the second, etc);
  • tooltip - this parameter sets the title that appears when the user hovers the mouse over the button;
  • name - the name of the button.

Defining Button Position

The window buttons are shown in the following picture:

Each button has its inner constant position. So, when you insert some user-button, you should count its position.

For example, let's put a user-button between the "Minmax" and the "Close" ones. Counting buttons from left to right starting from 0, stop on the button "Minmax". Its position is "3". So, our new button should have "4" as its position's index.

Adding Event to Button

The user can attach an event to the newly created button in the following way:

myWins.window(id).button(id).attachEvent("onClick", handler);

The user can also remove an event from any user-created button:

myWins.window(id).button(id).detachEvent("onClick");

Operating User Button

All default button methods will be available for user-created buttons as well:

myWins.window(id).button(id).show();
myWins.window(id).button(id).hide();
myWins.window(id).button(id).isHidden();
myWins.window(id).button(id).enable();
myWins.window(id).button(id).disable();
myWins.window(id).button(id).isEnabled();

You will find the full list of Window Button methods in dhtmlXWindowsButton API.

Removing User-Button

Any user-created button can be removed with the help of the method removeUserButton():

myWins.window(id).removeUserButton(id);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Adding External Resource to Window DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
    • Accessing IFRAME Content
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Adding External Resource to Window

Accessing IFRAME Content

IFRAME content is a result of attaching URLs to layout/windows.

The follownig code is a code of the attached page inner.html:

<html>
    <head>
        <script>
            var msg = "";
            function myFunc() {
                alert(msg);
            }
        </script>
    </head>
    <body>
        <div id="myDiv"> </div>
    </body>
</html>

And a page, where page inner.html will attached to, has the next code:

// windows
var w1 = myWins.createWindow(id, x ,y, w, h);
w1.attachURL("inner.html");
// layout
dhxLayout.cells(id).attachURL("inner.html");
// accordion
dhxAcc.cells(id).attachURL("inner.html");
// tabbar
dhxTabbar.cells(id).attachURL("inner.html");

So to access IFRAME object - use the code:

var ifr;
// windows
ifr = dhxWins.window(id).getFrame();
// layout
ifr = dhxLayout.cells(id).getFrame();
// accordion
ifr = dhxAcc.cells(id).getFrame();
// tabbar
ifr = dhxTabbar.cells(id).getFrame();

And to access functions/variables/objects - use the code:

ifr.contentWindow.msg = "Popup message";
ifr.contentWindow.myFunc();
ifr.contentWindow.document.getElementById("myDiv").innerHTML = "Object on page";
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Adding DHTMLX Components to Window DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
    • Using dhtmlxLayout and dhtmlxWindows together
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Adding DHTMLX Components to Window

The following components can be attached to a window's cell:

  • Accordion
  • Editor
  • DataView
  • Form
  • Grid
  • Layout
  • Menu
  • Scheduler
  • Tabbar
  • Toolbar
  • Tree
  • TreeGrid
  • Status Bar ( a bottom panel with a label. The component has the only method - setText() that specifies the label of the panel)

Note, Menu, Toolbar and status bar can be attached to the whole window.

To attach a DHTMLX component to a window's cell - make the following steps:

  1. Download a package with the needed component from the server
  2. Set pathes to necessary files into the <head> tag of your HTML page. The files to which the paths need to be specified, should be checked in the corresponding documentation described work with this component.
  3. And use one of the methods shown below:

Note, you can insert windows into each other to create various complex structures.

var dhxAccord = myWins.window("a").attachAccordion();
var dhxBar = myWins.window("a").attachToolbar();
var dhxDataView = myWins.window("a").attachDataView();
var dhxEditor = myWins.window("a").attachEditor();
var dhxForm = myWins.window("a").attachForm();
var dhxGrid = myWins.window("a").attachGrid();
var dhxLayout=myWins.window("a").attachLayout();
var dhxMenu = myWins.window("a").attachMenu();
var dhxSBar = myWins.window("a").attachStatusBar();
var dhxTabbar = myWins.window("a").attachTabbar();
var dhxTreeGrid = myWins.window("a").attachTreeGrid();
var dhxTree = myWins.window("a").attachTree();

These methods, except attachStatusBar(), return dhtmlx[component] objects, which you can customize according to your needs.

If you want to attach dhtmlxGrid with paging - use the attachObject() method that attaches container with grid and paging area:

myWins.window("a").attachObject("paging_container");

dhtmlxScheduler specificity

Please note, attachScheduler differs from the other attach[component] methods. The reason is that attachScheduler not only attaches the component but also initializes it, creates an instance with the predefined structure.

Therefore:

  • The attachScheduler method doesn't return a component object;
  • The attachScheduler method can be called only once;
  • If you need to set some configuration options for the scheduler, do this before attaching to the layout.
var myWins = new dhtmlXWindows()
myWins.createWindow("about", 50, 50, 300, 200);

scheduler.config.xml_date="%Y-%m-%d %H:%i";
myWins.window("a").attachScheduler(null,"month", "scheduler_here");scheduler.load("../common/events.xml");

Using dhtmlxLayout and dhtmlxWindows together

Sometimes using layout, you may need to show a pop-up window. Make the following steps for it:

  1. Create an instance of dhtmlxWindows
  2. Create a window As far as layout is based on windows as well, you can use a dhtmlxWindows instance that has been already created by layout. This allows you to reduce used memory and increase script's performance:
// creating layout instance
var myLayout = new dhtmlXLayoutObject("3L");
...
// creating pop-up window from layout's dhtmlxWindows' instance
var popupWindow = myLayout.dhxWins.createWindow("popupWindow", ...);

There are cases when some windows' ids are already used by layout so you can't use them for creating another windows. How can you identify the ids you are not allowed to use? There is a function that allows you to check availability of any 'id':

// check if id in use
if (myLayout.dhxWins(id)) {
    // id is already in use, checked id can not be used for new window
} else {
    // id is free for use
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
    • Default Events
    • Redefining Default Button Event
    • Attaching Window Events Handlers
    • Attaching Global Event Handlers for Windows
    • Attaching Personal Window Event Handler
    • Detaching Personal Event Handler
    • Detaching Global Event Handler
    • Understanding Event Handlers Priority
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Handling Events

Default Events

Default events signal various actions, such as the user clicking a button to Park a window, or a window is being closed. Default events are usually button events.

Button events can be as follows:

  • onClick Event executes the specified JS code or function, when the user clicks the left mouse button on the object.

Default events can be redefined by user, who can choose to assign other user-defined events instead. In this case, default events will be ignored until they are restored by user.

Redefining Default Button Event

The user can choose to redefine a default button event by adding any user-defined event instead. To redefine a button default event the user can use attachEvent() method:

myWins.window(id).button(id).attachEvent(eventName, handler);

Attaching Window Events Handlers

The entire point of an event is to inform a handler that something has happened to a component in the GUI. A handler can figure out what exactly happened and respond in a meaningful way.

The full list of events to which user-defined handlers can be attached is given in the dhtmlXWindowsCell API.

Attaching Global Event Handlers for Windows

The user can add global event handlers for windows.

To do this he should use attachEvent() method with the following parameters:

  • evName - name of the event;
  • evHandler - user-defined event handler.
myWins.attachEvent(evName, evHandler);

Events can also be attached directly in the object constructor:

var win = myWins.createWindow({
    id:"about",
    onClose:function(){
        alert("Window is closing");
        return true;
    }
});

Several handlers can be attached to one and the same event, and all of them will be executed.

The names of the events are case-insensitive.

You can find the full list of global windows events in the Windows API.

Attaching Personal Window Event Handler

If there is a window to which the user wants to assign a special handler, this can be done by adding the handler to the window directly. While other windows will be calling global handlers, this window with personal handler will call this personal handler:

myWins.window(id).attachEvent(eventName, handler);

Detaching Personal Event Handler

The user can detach a personal event from a window. In this case a global event handler will be restored for this window, i.e. when personal handler is removed from the window, the window will call global handler.

myWins.window(id).detachEvent(eventId);

Detaching Global Event Handler

Global handlers can be easily removed with the help of the following method:

myWins.detachEvent(eventId);

Understanding Event Handlers Priority

In the situation described above windows w2 and w3 will call "globalHandler" when they are focused.

The window w1 will call personal "w1Handler" when focused.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Using Iterator DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Using Iterator

The method forEachWindow() calls a user-defined function for every existing window passing a window handler into it. For example, you can use the method setText() to sets windows' header text.

myWins.forEachWindow(function(win){     // calling iterator
    myWins.setText(text);               // your code here, for example, setText()
});

// or
function doWithWindow(win){
    myWins.setText(text);               // your code here, for example, setText()
});
myWins.forEachWindow(doWithWindow);     // calling iterator

Related sample: Iterator

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Components DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
    • Getting the attached component
    • Detaching components
    • Scheduler specificity
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Attaching Components

Almost all DHTMLX components can be attached directly to a cell by the corresponding method.

Accordion
dhxComponent.cells(id).attachAccordion();
Carousel
dhxComponent.cells(id).attachCarousel();
Chart
dhxComponent.cells(id).attachChart();
DataView
dhxComponent.cells(id).attachDataView();
Editor
dhxComponent.cells(id).attachEditor();
Form
dhxComponent.cells(id).attachForm();
Grid
dhxComponent.cells(id).attachGrid();
Layout
dhxComponent.cells(id).attachLayout();
List
dhxComponent.cells(id).attachList();
Menu
dhxComponent.cells(id).attachMenu();
Ribbon
dhxComponent.cells(id).attachRibbon();
Scheduler
dhxComponent.cells(id).attachScheduler();
Sidebar
dhxComponent.cells(id).attachSidebar();
StatusBar
dhxComponent.cells(id).attachStatusBar();
Tabbar
dhxComponent.cells(id).attachTabbar();
Toolbar
dhxComponent.cells(id).attachToolbar();
Tree
dhxComponent.cells(id).attachTree();
TreeView
dhxComponent.cells(id).attachTreeView();

We highly recommend you to follow this way of attaching components, as it guarantees proper rendering and correct resizing of embedded components in relation to their parent container.

Please note that attaching of Menu, Ribbon, Toolbar and StatusBar into a cell has some peculiarities. For details check the article Attaching Menu/Status Bar.

Make sure you've included the corresponding .js/.css files of the related component on a page, for example:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxgrid.css">
    <script src="dhtmlxgrid.js"></script>
</head>

Getting the attached component

There is a possibility to get link to the attached component:

var attached = dhxComponent.cells(id).getAttachedObject();
if (window.dhtmlXGridObject != null && attached instanceof window.dhtmlXGridObject) {
    console.log("An attached grid detected");
}

Detaching components

// attach
var myAcc = dhxComponent.cells(id).attachAccordion({...});

// detach later
dhxComponent.cells(id).detachObject(true);
myAcc = null;

Scheduler specificity

Please note, the attachScheduler method differs from other attaching methods. The difference is that attachScheduler not only attaches the component but also initializes it - creates an instance with the predefined structure.

Therefore:

  • The attachScheduler method doesn't return a component object;
  • The attachScheduler method can be called only once;
  • If you need to set some configuration options for the scheduler, set them before attaching scheduler to the layout.
var myLayout = new dhtmlXLayoutObject(document.body, "3L");
myLayout.cells("a").setWidth(800);

// configure scheduler if needed
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
// then attach it to layout
myLayout.cells("a").attachScheduler(new Date(), "month");
// load some data
scheduler.load("../common/events.xml");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Menu/Status Bar DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
    • Attaching Menu
    • Attaching Toolbar
    • Attaching Ribbon
    • Attaching StatusBar
    • What else?
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Attaching Menu/Status Bar

You can use Menu, Toolbar and Ribbon components as a menu bar and attach them to the top of a cell. A cell can also have a simple status bar at the bottom added with the help of the StatusBar component.

You can attach several of these components at a time together with other content of a Layout-based component.

Attaching Menu

1) Include dhtmlxMenu source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxmenu.css">
    <script src="dhtmlxmenu.js"></script>
</head>

2) Call the corresponding function:

var myMenu = dhxComponent.cells(id).attachMenu({
    // menu conf here
});

3) Learn more about dhtmlxMenu from the related documentation.

Attaching Toolbar

1) Include dhtmlxToolbar source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxtoolbar.css">
    <script src="dhtmlxtoolbar.js"></script>
</head>

2) Call the corresponding function:

var myToolbar = dhxComponent.cells(id).attachToolbar({
    // toolbar conf here
});

3) Learn more about dhtmlxToolbar from the related documentation.

Attaching Ribbon

1) Include dhtmlxRibbon source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxribbon.css">
    <script src="dhtmlxribbon.js"></script>
</head>

2) Call the corresponding function:

var myRibbon = dhxComponent.cells(id).attachRibbon({
    // ribbon conf here
});

3) Learn more about dhtmlxRibbon from the related documentation.

Attaching StatusBar

1) There's no need to include extra .js/.css files.

2) Call the corresponding function:

var sbObj = dhxComponent.cells(id).attachStatusBar({
    // status bar config here, optional
    text:   "some text here",   // status bar text
    height: 35                  // custom height
});

// set status bar text
sbObj.setText("New text");

// get status bar text
var text = sbObj.getText();

What else?

1) You can show/hide any attached control without unloading it from memory, for example:

dhxComponent.cells(id).showMenu();
dhxComponent.cells(id).hideMenu();

2) You can detach and unload the attached control completely, for example:

// init
var myMenu = dhxComponent.cells(id).attachMenu({...});

// detach later
dhxComponent.cells(id).detachMenu();
myMenu = null;

3) You can get link to the component's instance:

var myMenu = dhxComponent.cells(id).getAttachedMenu();
if (myMenu == null) {
    // not inited
    myMenu = dhxComponent.cells(id).attachMenu({...});
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching HTML DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
    • Attaching HTML object
    • Appending HTML object
    • Attaching HTML string
    • Detaching object
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Attaching HTML

There is a possibility to attach HTML objects and HTML strings to a cell. Several HTML objects can be attached at a time.

Attaching HTML object

<div id="objId">Some text</div>
// attach by id
dhxComponent.cells(id).attachObject("objId");
// or attach by link
var obj = document.getElementById("objId");
dhxComponent.cells(id).attachObject(obj);

in this mode a cell doesn't render scrolls by default, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Appending HTML object

This way is the same as attaching an object, but the current cell's content isn't removed:

dhxComponent.cells(id).appendObject("otherObjId");

in this mode a cell will add scrolls automatically, so there's no need to specify width/height to the attached object.

Attaching HTML string

dhxComponent.cells(id).attachHTMLString('<div id="objId">Some text</div>');

in this mode scrolls aren't rendered by default as well, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Detaching object

Any attached object or HTML string can be detached from a cell with the help of the detachObject() method:

// attach
dhxComponent.cells(id).attachObject("objId");

// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to "true", the object will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching URL DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
    • Attaching via iFrame
    • Attaching via AJAX
    • Using onContentLoaded event
    • Accessing the attached content
    • Accessing parent from attached page
    • Detaching URLs
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Attaching URL

A cell has a possibility to attach URLs. It can be done by using iFrames and AJAX calls.

In the case of iFrames call, an iFrame will be created inside of a cell, and your URL will be attached as a separate page (it will have access to your code as you will have control over the content inside of the iFrame).

In the case of AJAX call, the content returned by the server will be placed inside of a div.

  • a common function used for both methods is attachURL(), the only difference is that the 2nd argument is set to true for AJAX call
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
  • loading is async, so to proceed with content, you need to use the "onContentLoaded" event

Attaching via iFrame

GET request

dhxComponent.cells(id).attachURL("page.html");

POST request without params

dhxComponent.cells(id).attachURL("page.html", null, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

Attaching via AJAX

GET request

dhxComponent.cells(id).attachURL("page.html", true);

POST request without params

dhxComponent.cells(id).attachURL("page.html", true, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Using onContentLoaded event

As it was said above, loading is async, so to proceed with content, you need to use the "onContentLoaded" event:

// firstly add the event
dhxComponent.attachEvent("onContentLoaded", function(id){
    // page.html id loaded, your code here
});

// now attach a URL
dhxComponent.cells(id).attachURL("page.html");

Accessing the attached content

This part is related to the iFrame-mode only.

Assuming the code below has been attached:

<html>
<head>
    <script>
        function myFunc() {
            console.log("I'm attached function");
        }
    </script>
</head>
<body>
    <div id="attachedObject">
        Some text here
    </div>
</body>
</html>

Firstly, you need to get an iFrame object from the cell where the attached content is located:

var ifr = dhxComponent.cells(id).getFrame();

Now you can access the elements:

// make sure an element exists
var elem = ifr.contentWindow.document.getElementById("attachedObject");
elem.innerHTML = "Some new text here";

and call some JS code:

// make sure function exists and located in the iFrame's window scope
ifr.contentWindow.someFunc();

Accessing parent from attached page

This part is related to the iFrame-mode only.

If you need to make some actions with a cell from the attached page (for example, hide the window by clicking some button on the page or collapse a layout's cell) this can be done in the following way:

<!-- this attached page.html -->
<script>
    function controlParent() {
        parent.myLayout.cells(id).collapse();   // collapse layout's cell
        parent.myWins.window(id).hide();        // hiding a window
    }
</script>

Any variable or function can be acccessed but make sure it is declared in a global window scope.

Detaching URLs

Any attached URL can be detached from a cell by using the detachObject() method:

// attach
dhxComponent.cells(id).attachURL("page.html");

// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to true, the object (iFrame or a div with AJAX content) will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Google Maps DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Attaching Google Maps

There's a possibility to attach Google Maps to a cell.

Firstly, include the corresponding .js file on your page:

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>

And then initialize a cell with a map inside on the page:

var GMaps = myLayout.cells("b").attachMap(); // applies default parameters

// or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = myLayout.cells(id).attachMap(mapParams);

Related sample: Integration with Google Maps

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Progress Bar DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Progress Bar

A progress control is a state indicator. It can be used to indicate content loading or updating. While the cell is visually disabled and not accessible for user actions the progress is enabled.

This functionality will not start automatically when some content is loaded into a cell, it needs to be triggered by calling the appropriate API method.

Here is the code for a cell's progress control:

// turning progress on
dhxComponent.cells(id).progressOn();

// turning progress off
dhxComponent.cells(id).progressOff();

In practical scenario, you can place the progressOn() call before loading data in some component, and progressOff() in data loading callback, for example:

var myLayout;
var myGrid;

// init layout and attach grid
function initControls() {
    myLayout = new dhtmlXLayoutObject({
        parent: "layoutObj",
        pattern: "2U"
    });
    myGrid = myLayout.cells("a").attachGrid();
    loadGridData(true);
}

// load/reload grid data
function loadGridData(firstLoad) {
    myLayout.cells("a").progressOn();
    if (firstLoad == true) {
        myGrid.load("server.php", doOnGridLoaded);
    } else {
        myGrid.updateFromXML("server.php", true, false, doOnGridLoaded);
    }
}

// grid dataload callback
function doOnGridLoaded() {
    myLayout.cells("a").progressOff();
}
<body onload="initControls();">
    <div id="layoutObj" style="width: 600px; height: 400px;"></div>
    <input type="button" value="refresh grid" onclick="loadGridData();"></div>
</body>

Each time you will click the button, the loadGridData() method will be called and you will see the progress of loading over the cell with grid.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Different Content in the Same Cell DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Different Content in the Same Cell

Cells have a possibility to show different content in the same cell. This feature is called "views". Each cell shows the view "def" by default. You can easily switch to the other view and init different content.

Let's see how it works. We will create a "3L" layout and attach some components to the cell "b".

var myLayout = new dhtmlXLayoutObject("layoutObj", "3L");

Currently, the view "def" is selected. There's no need to call any extra commands to make it active, just attach the content you need:

var myMenu = myLayout.cells("b").attachMenu();
var myGrid = myLayout.cells("b").attachGrid();

Now let's show another view and attach some other content to it:

myLayout.cells("b").showView("tree");

At this moment the cell hides the currently active views ("def" in our case) and shows the requested one. You can name the view as you wish, it's necessary just to determine which view to show. As we haven't attached any components, the "tree" view looks like an empty cell.

Now let's attach some content to the view "tree":

myTree = myLayout.cells("b").attachTree();
myToolbar = myLayout.cells("b").attachToolbar();

Now let's go back to the view "def" and see what happens:

myLayout.cells("b").showView("def");

As you can see, now the view "tree" becomes hidden and the view "def" is restored and active.

In the above example we're using layout just to show you how the described functionality works. Views are the feature of a cell, so they are enabled in all the components that use cells: accordion, layout, tabbar and windows.

Related sample: Views

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Coloring Text Selection DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Coloring Text Selection

Sometimes you need to make the selected text look like a common skin. To set a custom color for the selection, use the following technique:

1) Define a CSS class with ::selection and ::-moz-selection pseudo-elements inside:

.my_style::selection {
    color: #454544;
    background-color: #fffcda;
}
.my_style::-moz-selection {
    color: #454544;
    background-color: #fffcda;
}

2) Set the above specified CSS class for the required object:

<div id="layoutObj"></div>
<div id="objId">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
<div id="objId2" class="my_style">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "2U",
    cells: [
        {id: "a", text: "Default selection"},
        {id: "b", text: "Custom selection"}
    ]
});

myLayout.cells("a").attachObject("objId");
myLayout.cells("b").attachObject("objId2");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration from 3.6 to 4.0 DHTMLX Docs

Documentation
  • dhtmlXWindows API
  • dhtmlXWindowsCell API
  • dhtmlXWindowsButton API
  • How to Start with Windows
  • Object Constructor
  • Configuring Windows
  • Operating Windows
  • Operating Buttons
  • Creating Custom Buttons
  • Adding External Resource to Window
  • Adding DHTMLX Components to Window
  • Handling Events
  • Using Iterator
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
Start Windows

Migration from 3.6 to 4.0

Since the release of the latest version of DHTMLX library some functionality has been removed. It was made as this functionality is no longer needed and therefore isn't supported.

See the full list of removed methods below:

Up to version 3.6 | From version 4.0
Functionality was removed
myWins.enableAutoViewport() | called automatically inside attachViewportTo()
myWins.setImagePath() | no longer used
myWins.setEffect() | Since 4.0 effects are enabled for modern browsers by default
myWins.getEffect()
myWins.window(id).setIcon() | myWins.window(id).setIconCss(css)
myWins.window(id).getIcon()
myWins.window(id).restoreIcon()
myWins.window(id).clearIcon()

before 3.6 there were "minmax1" and "minmax2" button names for maximize/minimize button, since 4.0 the common name "minmax" is used

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Helpers DHTMLX Docs

Documentation
  • Helpers
    • Ajax
    • Cell
    • Event
    • Message
    • Template
    • Common API
    • DataLoading API
Start

Helpers

  • Ajax
  • Cell
  • Event
  • Message
  • Template
  • Common API
  • DataLoading API
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Ajax DHTMLX Docs

Documentation
  • Ajax
    • Sending Data
    • Incoming Data Parsing
    • Getting Binary Data
    • Promise API for Ajax requests
    • dhtmlxAjax API
    • Migration to v4.1
  • Cell
  • Event
  • Message
  • Template
  • Common API
  • DataLoading API
Start Helpers

Ajax

This section is dedicated to the Ajax helper and describes the operations which can be performed with the help of Ajax.

API reference
  • dhtmlxAjax API
Migration
  • Migration to v4.1

Sending Data

The simplest Ajax call can be performed as:

dhx.ajax("some.php", function(text){
    dhx.message(text); // show server-side response
});

The above code makes an asynchronous GET request to the "some.php" script and shows its response through a callback function.

Passing parameters

You can pass extra parameters:

  • by including them in the request string:
dhx.ajax("some.php?action=info&id=123");
  • by a separate string with parameters:
dhx.ajax.get("some.php", "action=info&id=123");
  • by using a separate JSON object:
dhx.ajax.get("some.php",{ action:"info", id:123 });

In case of object notation, the library will escape values automatically except for the case with FormData.

  • by using FormData:
var formData = new FormData();

formData.append("action", "info");
formData.append("id", "123");

dhx.ajax.post("some.php", formData);

Post mode

The same function can be used to make POST requests:

dhx.ajax.post("some.php");

Here you can use two methods to provide extra parameters:

//$_POST["action"]="info", $_POST["id"]="123"
dhx.ajax.post("some.php","action=info&id=123");
dhx.ajax.post("some.php", { action:"info", id:123});

Note that when passing extra parameters into the server script by a separate string|object, you should specify the type of a request (GET or POST).

Sync mode

There are two ways that Ajax can access the server:

  • synchronous (before continuing, script waits for the server to reply back).
  • asynchronous (script continues page processing and handles the reply as it comes).

By default, all requests are performed in the asynchronous mode, but there is a synchronous alternative:

dhx.ajax.sync().get("some.php");
dhx.ajax.sync().post("some.php");

Callback

For asynchronous Ajax calls you can define a callback function as the last parameter of the method. For GET and POST requests the syntax is the same.

The callback function takes the following arguments:

  • text - full text of response;
  • data - response data that should be parsed as JSON or XML, whichever is applicable. It features the following methods to get the data:
    • json() - parses data as JSON;
    • xml() - parses data as XML;
    • rawxml() - gets raw XML data;
    • text() - gets response text;
  • XmlHttpRequest - loader object.

GET requests:

dhx.ajax("some.php", function(text, data, XmlHttpRequest){
    data = data.json();
    //..
});

dhx.ajax.get("some.php", function(text, data, XmlHttpRequest){
    //...
});

POST request:

dhx.ajax.post("some.php", function(text, data, XmlHttpRequest){
    //...
});

If you pass parameters to the server side script, the syntax is as follows:

dhx.ajax.get(url, params, callback);
dhx.ajax.post(url, params, callback);

It's possible to define two callback methods, one for valid server side response and the second one for the error response:

dhx.ajax("some.php",{
    error:function(text, data, XmlHttpRequest){
        alert("error");
    },
    success:function(text, data, XmlHttpRequest){
        alert("success");
    }
});

If you need to trigger multiple callbacks after the method's execution is finished, you can define an array of callbacks as the last parameter:

//GET requests
dhx.ajax.get(url, [array of callbacks]);
dhx.ajax.get(url, params, [array of callbacks]);

//POST requests
dhx.ajax.post(url, [array of callbacks]);
dhx.ajax.post(url, params, [array of callbacks]);

In some cases you may need to provide some extra data for callback, which can be done in the next way:

function after_call(text){
    alert("Call: "+this.data+", response: "+text);
};
dhx.ajax.get("some.php", after_call, { data:"my ajax"});

Basically, the parameter after callback will be accessible as "this" in the callback method.

For sync requests, there is no callback, because there is no need for waiting:

var xhr = dhx.ajax.sync().get("some.php");
var text = xhr.responseText;

Extra headers

If the server side code requires some extra headers, you can send them as:

dhx.ajax.headers({
    "Sent-by":"My Script" // any custom headers can be defined in such a way
}).get("./data.php");

You can use headers in combination with asynchronous get() and post() methods.

JSON sending

If you are working with a web service, you may need to send JSON content to the server side. It can be done as:

dhx.ajax.headers({
    "Content-type":"application/json"
}).post("./data.php", JSON.stringify(payload), function(text){
    //optional callback here
});

Incoming Data Parsing

Plain response

In general case you can use the text parameter of the callback to access the data:

dhx.ajax("./data.php", function(text){
    dhx.message(text);
})

JSON response

While you can use the above code to access raw text response, there is a more neat solution:

dhx.ajax("some.php", function(text, data){
    //text = '{ some :"abc"}'
    alert(data.json().some); //abc
});

the second parameter of response can provide you with a ready-to-use JSON object.

XML response

The same as it was described above, you can use:

dhx.ajax("some.php", function(text, data){
    //text = '<data some='abc'></data>'
    alert(data.xml().some); //abc
});

If necessary, you can access raw XML object by using data.rawxml().

Other formats

CSV

dhx.ajax("some.php", function(text, xml){
    var obj = dhx.DataDriver.csv.toObject(text,xml);
    alert(obj[0][0]); //row and column indexes
});

JSArray

dhx.ajax("some.php", function(text, xml){
    var obj = dhx.DataDriver.jsarray.toObject(text,xml);
    alert(obj[0][0]); //row and column indexes
});

HTML

dhx.ajax("some.php", function(text,xml){
    //text = '<ul><li some='abc'></ul>'
    var obj = dhx.DataDriver.html.toObject(text,xml);
    alert(obj[0].some); //abc
});

Extra parameters

If all above is not enough, you can access raw xmlHttpRequest and poll it for additional data:

dhx.ajax("some.php", function(text,xml, ajax){
    alert(ajax.status);
});

Getting Binary Data

DHTMLX Ajax class offers a pattern for retrieving binary data objects from the server.

It can be done with the dedicated response() method that allows setting responseType directly. Now only "blob" type is fully supported and "document" with some restrictions.

dhx.ajax.response("blob").get("patch.zip", function(text, data){
  //data - is a data blob
});

Functionality will not work in IE8-IE9 as these browsers cannot work with blob objects at all.

Promise API for Ajax requests

DHTMLX is integrated with the Promiz.js library, which allows treating the result of asynchronous operations without callbacks.

In other words, any Ajax request performed by DHTMLX returns a promise object that represents the eventual result of this request. It can be treated by the then() method that is automatically executed when server response arrives.

//"promise" object is returned by either of these methods
var promise = dhx.ajax("some.php");
var promise = dhx.ajax.get("some.php");
var promise = dhx.ajax.post("some.php");

//realdata - data that came from server
promise.then(function(realdata){
    ...
});

Forming a chain of requests with Promises

dhx.ajax("someA.php").then(function(realdataA){
    return dhx.ajax("someB.php");
}).then(function(realdataB){
    return dhx.ajax("someC.php")
}).then(function(realdataC){
    ...
});

Error handling with Promise objects

then() method can be used to treat errors:

var promise = dhx.ajax("some.php")
promise.then(function success(realdata){}, function error(err){});

Additionally, the fail() method can be used for error handling:

var promise = dhx.ajax("a.php");
...
promise.then(function(realdata){ /*success*/});
promise.fail(function(err){/*error*/});

Or, you can do it in one and the same function:

promise.then(function(realdata){
    //success
}).fail(function(err){
    //error
});

All the methods of the promise object come from the Promiz.js library and can be found there.

dhx.promise interface

DHTMLX offers an interface for working with promise objects - dhx.promise - featuring a set of methods that duplicate Promise object methods.

dhx.promise constructor

var my_promise = new dhx.promise(function(success, fail){
    dhx.ajax("some.php", function(text){
        if (text) success(text);
        else fail(text.error)
    });
});

//realdata - data that came from server
my_promise.then(function(realdata){
    ...
});

dhx.promise can be used, for instance, in the following cases:

  • Resolve all promises in the resulting array

You can treat several Ajax requests and perform some action when callbacks are received from all of them using the all() method:

first = dhx.ajax("someA.php");
second = dhx.ajax("someB.php");
third = dhx.ajax("someC.php");

dhx.promise.all([first,second,third]).then(function(results){
    var first_result = results[0];
    var second_result = results[1];
    var third_result = results[2];
    // do something
    ...
});
  • Create a new instance of a deferred object

For this, you need to use the defer() method:

var deferred_promise = dhx.promise.defer();

dhx.ajax("some.php", function(text){
    if (text) deferred_promise.resolve(text);
    else deferred_promise.reject(text.error)
});

deferred_promise.then(function(realdata){...});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxAjax API DHTMLX Docs

Documentation
  • dhtmlxAjax API
    • Methods
    • Events
    • Others
  • Migration to v4.1
Start Helpers Ajax

dhtmlxAjax API

Methods
del | performs an async-DELETE ajax request
get | performs an async-GET ajax request
getSync | performs a sync-GET ajax request
post | performs an async-POST ajax request
postSync | performs a sync-POST ajax request
put | performs an async-PUT ajax request
query | performs an async or sync ajax request
Events
onAjaxError | fires if the server returns an error
onLoadXMLError | fires if an error occurs during xml parsing
Other
cache | enables/disables an additional param to prevent caching
method | defines used method for load/loadStruct functionality, get or post, get by default
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • del
    • get
    • getSync
    • post
    • postSync
    • put
    • query
  • Events
  • Others
Start Helpers Ajax dhtmlxAjax API

Methods

del | performs an async-DELETE ajax request
get | performs an async-GET ajax request
getSync | performs a sync-GET ajax request
post | performs an async-POST ajax request
postSync | performs a sync-POST ajax request
put | performs an async-PUT ajax request
query | performs an async or sync ajax request
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


del DHTMLX Docs

Documentation
  • del
  • get
  • getSync
  • post
  • postSync
  • put
  • query
Start Helpers Ajax dhtmlxAjax API Methods

del

performs an async-DELETE ajax request

void del(string url, [string params,function callback] );

Parameters

url | string | url to the server side
params | string | optional, request params
callback | function | optional, a function to call after the response is loaded

Example

// simple data sending w/o del params
dhx.ajax.del("server.php?keep_alive=1");

// simple data sending with params
dhx.ajax.del("server.php", "keep_alive=1&version=std");

// data sending w/o params with callback
dhx.ajax.del("server.php", function(){
    // your code here
});

// data sending with params and callback
dhx.ajax.del("server.php", "keep_alive=1&version=std", function(){
    // your code here
});

Change log

added in 4.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


get DHTMLX Docs

Documentation
  • del
  • get
  • getSync
  • post
  • postSync
  • put
  • query
Start Helpers Ajax dhtmlxAjax API Methods

get

performs an async-GET ajax request

void get(string url, [function callback] );

Parameters

url | string | url to the server side
callback | function | optional, a function to call after the response is loaded

Example

// simple data sending
dhx.ajax.get("server.php?keep_alive=1");

// data sending with callback
dhx.ajax.get("server.php", function(){
    // your code here
});

Details

  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable: dhx.ajax.cache=true, please check details here)

  • async GET request will be performed

var t = 1;
dhx.ajax.get("server.php", function(){
    t = 2;
});
console.log(t); // still 1
  • getting xml from response, make sure server returns valid xml and the "content-type" header is set
// for php
header("Content-Type: text/xml");
<!-- assuming that the response is the following -->
<items>
    <item name="first" value="a"/>
    <item name="second" value="b"/>
</items>
dhx.ajax.get("server.php", function(r){
    var items = [];
    var xml = r.xmlDoc.responseXML;
    var nodes = xml.getElementsByTagName("items");
    for (var q=0; q<nodes.lengt; q++) {
        items.push({
            name:   nodes[q].getAttribute("name"),
            value:  nodes[q].getAttribute("value")
        });
    }
});
  • getting json from response
// assuming that the response is the following
{status: "ok", data: "value", data2: "value2"}
dhx.ajax.get("server.php", function(r){
    var t = window.dhx.s2j(r.xmlDoc.responseText); // convert response to json object
    if (t != null && t.status == "ok") {
        // response is ok
    }
});
Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSync DHTMLX Docs

Documentation
  • del
  • get
  • getSync
  • post
  • postSync
  • put
  • query
Start Helpers Ajax dhtmlxAjax API Methods

getSync

performs a sync-GET ajax request

object getSync(string url);

Parameters

url string url to the server side

Returns

object loader object

Example

// simple data sending
var r = dhx.ajax.getSync("server.php?keep_alive=1");

Details

  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable: dhx.ajax.cache=true, please check details here)

  • sync GET request will be performed

var r = dhx.ajax.getSync("server.php");
console.log(r.xmlDoc.responseText); // script will wait for response
  • getting xml from response, make sure server returns valid xml and the "content-type" header is set
// for php
header("Content-Type: text/xml");
<!-- assuming that the response is the following -->
<items>
    <item name="first" value="a"/>
    <item name="second" value="b"/>
</items>
var r = dhx.ajax.getSync("server.php");
var items = [];
var xml = r.xmlDoc.responseXML;
var nodes = xml.getElementsByTagName("items");
for (var q=0; q<nodes.length; q++) {
    items.push({
        name:   nodes[q].children[0].getAttribute("name"),
        value:  nodes[q].children[0].getAttribute("value")
    });
}
  • getting json from response
// assuming that the response is the following
{status: "ok", data: "value", data2: "value2"}
var r = dhx.ajax.getSync("server.php");
var t = dhx.s2j(r.xmlDoc.responseText); // convert response to json object
if (t != null && t.status == "ok") {
    // response is ok
}
Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


post DHTMLX Docs

Documentation
  • del
  • get
  • getSync
  • post
  • postSync
  • put
  • query
Start Helpers Ajax dhtmlxAjax API Methods

post

performs an async-POST ajax request

void post(string url, [string params,function callback] );

Parameters

url | string | url to the server side
params | string | optional, POST params
callback | function | optional, a function to call after the response is loaded

Example

// simple data sending w/o post params
dhx.ajax.post("server.php?keep_alive=1");

// simple data sending with params
dhx.ajax.post("server.php", "keep_alive=1&version=std");

// data sending w/o params with callback
dhx.ajax.post("server.php", function(){
    // your code here
});

// data sending with params and callback
dhx.ajax.post("server.php", "keep_alive=1&version=std", function(){
    // your code here
});

Details

  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable: dhx.ajax.cache=true, please check details here)

  • async POST request will be performed

var t = 1;
dhx.ajax.post("server.php", function(){
    t = 2;
});
console.log(t); // still 1
  • getting xml from response, make sure a server returns valid xml and the "content-type" header is set
// for php
header("Content-Type: text/xml");
<!-- assuming that the response is the following -->
<items>
    <item name="first" value="a"/>
    <item name="second" value="b"/>
</items>
dhx.ajax.post("server.php", "action=get_nodes", function(r){
    var items = [];
    var xml = r.xmlDoc.responseXML;
    var nodes = xml.getElementsByTagName("items");
    for (var q=0; q<nodes.lengt; q++) {
        items.push({
            name:   nodes[q].getAttribute("name"),
            value:  nodes[q].getAttribute("value")
        });
    }
});
  • getting json from response
// assuming that the response is the following
{status: "ok", data: "value", data2: "value2"}
dhx.ajax.post("server.php", "action=get_nodes", function(r){
    var t = dhx.s2j(r.xmlDoc.responseText); // convert response to json object
    if (t != null && t.status == "ok") {
        // response is ok
    }
});
  • you can both get/post params
dhx.ajax.post("server.php?get1=1&get2=2", "post3=3&post4=4");
print_r($_REQUEST);
// result
Array
(
    [get1] => 1
    [get2] => 2
    [post3] => 3
    [post4] => 4
)

print_r($_GET);
// result
Array
(
    [get1] => 1
    [get2] => 2
)

print_r($_POST);
// result
Array
(
    [post3] => 3
    [post4] => 4
)
Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


postSync DHTMLX Docs

Documentation
  • del
  • get
  • getSync
  • post
  • postSync
  • put
  • query
Start Helpers Ajax dhtmlxAjax API Methods

postSync

performs a sync-POST ajax request

object postSync(string url, [string params] );

Parameters

url | string | url to the server side
params | string | optional, POST params

Returns

object loader object

Example

// simple data sending w/o post params
var r = dhx.ajax.postSync("server.php?keep_alive=1");

// simple data sending with params
var r = dhx.ajax.postSync("server.php", "keep_alive=1&version=std");

Details

  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable: dhx.ajax.cache=true, please check details here)

  • sync POST request will be performed

var r = dhx.ajax.postSync("server.php");
console.log(r.xmlDoc.responseText); // script will wait for response
  • getting xml from response, make sure server returns valid xml and the "content-type" header is set
// for php
header("Content-Type: text/xml");
<!-- assuming that the response is the following -->
<items>
    <item name="first" value="a"/>
    <item name="second" value="b"/>
</items>
var r = dhx.ajax.postSync("server.php", "action=get_nodes");
var items = [];
var xml = r.xmlDoc.responseXML;
var nodes = xml.getElementsByTagName("items");
for (var q=0; q<nodes.lengt; q++) {
    items.push({
        name:   nodes[q].getAttribute("name"),
        value:  nodes[q].getAttribute("value")
    });
}
  • getting json from response
// assuming that the response is the following
{status: "ok", data: "value", data2: "value2"}
var r = dhx.ajax.postSync("server.php", "action=get_nodes");
var t = dhx.s2j(r.xmlDoc.responseText); // convert response to json object
if (t != null && t.status == "ok") {
    // response is ok
}
  • you can both get/post params
var r = dhx.ajax.postSync("server.php?get1=1&get2=2", "post3=3&post4=4");
print_r($_REQUEST);
// result
Array
(
    [get1] => 1
    [get2] => 2
    [post3] => 3
    [post4] => 4
)

print_r($_GET);
// result
Array
(
    [get1] => 1
    [get2] => 2
)

print_r($_POST);
// result
Array
(
    [post3] => 3
    [post4] => 4
)
Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


put DHTMLX Docs

Documentation
  • del
  • get
  • getSync
  • post
  • postSync
  • put
  • query
Start Helpers Ajax dhtmlxAjax API Methods

put

performs an async-PUT ajax request

void put(string url, [string params,function callback] );

Parameters

url | string | url to the server side
params | string | optional, request params
callback | function | optional, a function to call after the response is loaded

Example

// simple data sending w/o post params
dhx.ajax.put("server.php?keep_alive=1");

// simple data sending with params
dhx.ajax.put("server.php", "keep_alive=1&version=std");

// data sending w/o params with callback
dhx.ajax.put("server.php", function(){
    // your code here
});

// data sending with params and callback
dhx.ajax.put("server.php", "keep_alive=1&version=std", function(){
    // your code here
});

Change log

added in 4.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


query DHTMLX Docs

Documentation
  • del
  • get
  • getSync
  • post
  • postSync
  • put
  • query
Start Helpers Ajax dhtmlxAjax API Methods

query

performs an async or sync ajax request

void query(string method,string url,string data,boolean async, [function callback,object headers] );

Parameters

method | string | the method used for sending request, "GET" by default
url | string | url to the server side
data | string | the data sent to the server side by the POST-request
async | boolean | the mode of sending data to a server, true by default
callback | function | optional, a function to call after the response is loaded
headers | object | optional, a set of headers, defined as "key":"value" pairs that should be sent with a request

Example

dhx.ajax.query({
    method:"POST",
    url:"some.php",
    data:"k1=v1&k2=v2",
    async:true,
    callback:function(){},
    headers:{
        "MyHeader-Name1":"value1",
        "MyHeader-Name2":"value2",
    }
});

Details

the headers param allows specifying additional Request Headers. This API can be used in quite specific cases, e.g. for loading data from third party API and data services.

Change log

added in version 4.1.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onAjaxError
    • onLoadXMLError
  • Others
Start Helpers Ajax dhtmlxAjax API

Events

onAjaxError | fires if the server returns an error
onLoadXMLError | fires if an error occurs during xml parsing
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAjaxError DHTMLX Docs

Documentation
  • onAjaxError
  • onLoadXMLError
Start Helpers Ajax dhtmlxAjax API Events

onAjaxError

fires if the server returns an error

void onAjaxError(object request){ ... };

Parameters

request object XML HTTP request object
Details

When server side determines some conditions like it's impossible to return a valid response or it's necessary to notify a user about some parsing errors or something else, you can return custom response code:

<?php

// some code

if (some_conditions == true) {
    // valid response goes here
} else {
    // set custom response code, 520 here just as an example
    http_response_code(520);
    // optionally, you can send your custom error code/description,
    // for example, those which are inner code/descr in your app
    print_r("{error_code: 122, error_descr: 'incorrect user id'}");
}

?>

To handle it on the client side, you need to add a handler for onAjaxError event:

window.dhx.attachEvent("onAjaxError", function(r){

    // check, if any server response can be retrieved
    var t = dhx.s2j(r.xmlDoc.responseText);

    // optionally, you can set your own one, if server has returned nothing
    // or if the response is invalid
    if (t == null) t = {error_code: 1, error_descr: 'unknown server error'};

    // here your rest code, notify a user or so
    // ...

});

Then any data loading via dhx.ajax or component.load() will trigger onAjaxError event, if the response code will be any other than 200.

Change log

added in 4.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onLoadXMLError DHTMLX Docs

Documentation
  • onAjaxError
  • onLoadXMLError
Start Helpers Ajax dhtmlxAjax API Events

onLoadXMLError

fires if an error occurs during XML parsing

void onLoadXMLError(object request){ ... };

Parameters

request object XML HTTP request object

Example

dhx.attachEvent("onLoadXMLError", function(request object){
    // your code here
});

Change log

added in 4.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Events
  • Others
    • cache
    • method
Start Helpers Ajax dhtmlxAjax API

Others

cache | enables/disables an additional param to prevent caching
method | defines used method for load/loadStruct functionality, get or post, get by default
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


cache DHTMLX Docs

Documentation
  • cache
  • method
Start Helpers Ajax dhtmlxAjax API Others

cache

enables/disables an additional param to prevent caching

Example

// simple data sending
dhx.ajax.get("server.php?param=value");

// request: server.php?param=value&dhxr01402493059471=1

// now enable cache, it will disable extra-param
dhx.ajax.cache = true;
dhx.ajax.get("server.php?param=value");

// request: server.php?param=value

Details
  • false by default (i.e. caching disabled, extra param will be added)
  • affects all request types: post, postSync, get, getSync
Change log

added in 4.0.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


method DHTMLX Docs

Documentation
  • cache
  • method
Start Helpers Ajax dhtmlxAjax API Others

method

defines used method for load/loadStruct functionality, get or post, get by default

Example

dhx.ajax.method = "get";
myToolbar.loadStruct("toolbar.xml");

Change log

added in 4.0.2
since 4.1.1 "get" set as default

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration to v4.1 DHTMLX Docs

Documentation
  • dhtmlxAjax API
  • Migration to v4.1
    • dhtmlxAjax => ajax
    • Handling errors
    • XPath
Start Helpers Ajax

Migration to v4.1

dhtmlxAjax => ajax

Instead of dhtmlxAjax you should use dhx.ajax for ajax operations. See dhtmlxAjax API for details.

Handling errors

Instead of dhtmlxError.catchError you should use onLoadXMLError handler.

XPath

Similar to doXpath in older version of API you can use xmltop and xpath methods

var root = dhx.ajax.xmltop("rows", xml_object);
var nodes = dhx.ajax.xpath(xpath_expression, root_node);
  • "rows" - name of root XML tag
  • xml_object - raw xml object, result of dhx.ajax
  • xpath_expression - path expression used to select nodes or node-sets in XML
  • root_node - node from which XPath will be applied, you can use xmltop to get it
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Cell DHTMLX Docs

Documentation
  • Ajax
  • Cell
    • dhtmlXCell API
    • Attaching Components
    • Attaching Menu/Status Bar
    • Attaching HTML
    • Attaching URL
    • Attaching Google Maps
    • Progress Bar
    • Different Content in the Same Cell
    • Coloring Text Selection
    • Migration from 3.6 to 4.0
    • dhtmlXCellTop API
  • Event
  • Message
  • Template
  • Common API
  • DataLoading API
Start Helpers

Cell

Actually, dhtmlxCell is not a component, but a common part of Accordion, Layout, Tabbar and Windows. It represents an area which allows you to attach other components and HTML content into the components. It is called either "cell" or "container".

API reference
  • dhtmlXCell API
Guides

Attaching Various Content to Cell

  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Different Content in the Same Cell
 Discusses the ways of attaching miscellaneous content to a cell.

Configuring Cell's Elements

  • Progress Bar
  • Coloring Text Selection
 Covers the possibilities of a cell's customization: adding a progress bar and setting a color for text selection.

Other

  • Migration from 3.6 to 4.0
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXCell API DHTMLX Docs

Documentation
  • dhtmlXCell API
    • Methods
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
  • dhtmlXCellTop API
Start Helpers Cell

dhtmlXCell API

Methods
appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachPortal | attaches dhtmlxPortal to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getFrame | returns an iframe object when an URL is attached to a cell
getId | returns the id of a cell
getViewName | returns the name of the current view
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
unloadView | unloads the specified view
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • appendObject
    • attachAccordion
    • attachCarousel
    • attachChart
    • attachDataView
    • attachEditor
    • attachForm
    • attachGrid
    • attachHTMLString
    • attachLayout
    • attachList
    • attachMap
    • attachMenu
    • attachObject
    • attachPortal
    • attachRibbon
    • attachScheduler
    • attachSidebar
    • attachStatusBar
    • attachTabbar
    • attachToolbar
    • attachTree
    • attachTreeView
    • attachURL
    • attachVault
    • detachMenu
    • detachObject
    • detachRibbon
    • detachStatusBar
    • detachToolbar
    • getAttachedMenu
    • getAttachedObject
    • getAttachedRibbon
    • getAttachedStatusBar
    • getAttachedToolbar
    • getFrame
    • getId
    • getViewName
    • hideMenu
    • hideRibbon
    • hideStatusBar
    • hideToolbar
    • progressOff
    • progressOn
    • reloadURL
    • showInnerScroll
    • showMenu
    • showRibbon
    • showStatusBar
    • showToolbar
    • showView
    • unloadView
Start Helpers Cell dhtmlXCell API

Methods

appendObject | attaches an object to a cell without clearing cell content
attachAccordion | attaches dhtmlxAccordion to a cell
attachCarousel | attaches a carousel object to a cell
attachChart | attaches dhtmlxChart to a cell
attachDataView | attaches dhtmlxDataView to a cell
attachEditor | attaches dhtmlxEditor to a cell
attachForm | attaches dhtmlxForm to a cell
attachGrid | attaches dhtmlxGrid to a cell
attachHTMLString | attaches HTML content to a cell
attachLayout | attaches dhtmlxLayout to a cell
attachList | attaches dhtmlxList to a cell
attachMap | attaches Google Maps to a cell
attachMenu | attaches dhtmlxMenu to a cell
attachObject | attaches an HTML object to a cell
attachPortal | attaches dhtmlxPortal to a cell
attachRibbon | attaches dhtmlxRibbon to a cell
attachScheduler | attaches dhtmlxScheduler to a cell
attachSidebar | attaches dhtmlxSidebar to a cell
attachStatusBar | attaches a status bar to a cell
attachTabbar | attaches dhtmlxTabbar to a cell
attachToolbar | attaches dhtmlxToolbar to a cell
attachTree | attaches dhtmlxTree to a cell
attachTreeView | attaches dhtmlxTreeView to a cell
attachURL | attaches the specified URL to a cell
attachVault | attaches dhtmlxVault to a cell
detachMenu | detaches dhtmlxMenu from a cell
detachObject | detaches any attached content from a cell
detachRibbon | detaches dhtmlxRibbon from a cell
detachStatusBar | detaches status bar from a cell
detachToolbar | detaches dhtmlxToolbar from a cell
getAttachedMenu | returns dhtmlxMenu instance attached to a cell
getAttachedObject | returns the object attached to a cell
getAttachedRibbon | returns dhtmlxRibbon instance attached to a cell
getAttachedStatusBar | returns status bar object attached to a cell
getAttachedToolbar | returns dhtmlxToolbar instance attached to a cell
getFrame | returns an iframe object when an URL is attached to a cell
getId | returns the id of a cell
getViewName | returns the name of the current view
hideMenu | hides dhtmlxMenu attached to a cell
hideRibbon | hides dhtmlxRibbon attached to a cell
hideStatusBar | hides status bar object attached to a cell
hideToolbar | hides dhtmlxToolbar attached to a cell
progressOff | hides the progress indicator in a cell
progressOn | shows the progress indicator in a cell
reloadURL | reloads the attached URL in a cell
showInnerScroll | shows inner cell scrolls
showMenu | shows dhtmlxMenu attached to a cell
showRibbon | shows dhtmlxRibbon attached to a cell
showStatusBar | shows status bar object attached to a cell
showToolbar | shows dhtmlxToolbar attached to a cell
showView | shows the specified view, creates a new one if it doesn't exist
unloadView | unloads the specified view
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


appendObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

appendObject

attaches an object to a cell without clearing cell content

void appendObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

dhxComponent.cells(id).appendObject("div_a");
dhxComponent.cells(id).appendObject("div_b");
dhxComponent.cells(id).appendObject("div_c");

Details

  • style "display:none" will be removed automatically after attaching, it's useful to keep content hidden while not attached

  • for this mode a cell will add scrolls automatically, there's no need to specify width/height to the attached object (divs without specified dimension are usually stretched to 100% of width and height adjusted to content)

<div id="div_a" style="display:none;"> ... </div>
<div id="div_b"> ... </div>
<div id="div_c"> ... </div>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachAccordion DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachAccordion

attaches dhtmlxAccordion to a cell

dhtmlXAccordion attachAccordion( [object conf] );

Parameters

conf object optional, accordion config for object-api init

Returns

dhtmlXAccordion dhtmlXAccordion instance

Example

var myAcc = dhxComponent.cells(id).attachAccordion();
myAcc.addItem("a1", "First item", true);
myAcc.addItem("a2", "Second item");

// or
var myAcc = dhxComponent.cells(id).attachAccordion({
    icons_path: "icons/",
    items: [
        { id: "a1", text: "Main Page", icon: "flag_red.png" },
        { id: "a2", text: "Navigation", icon: "flag_green.png" },
        { id: "a3", text: "Feedback", icon: "flag_blue.png" }
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachCarousel DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachCarousel

attaches a carousel object to a cell

object attachCarousel(number width,number height, [object conf] );

Parameters

width | number | the width of a carousel
height | number | the height of a carousel
conf | object | optional, the config of a carousel for object-api init

Returns

object dhtmlXCarousel instance

Example

var myCarousel = dhxComponent.cells(id).attachCarousel(400, 300, conf){
    ...
});

Change log

added in 4.3

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachChart DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachChart

attaches dhtmlxChart to a cell

dhtmlXChart attachChart(object conf);

Parameters

conf object chart conf (please, check chart docs for details)

Returns

dhtmlXChart dhtmlXChart instance

Example

var myChart = dhxComponent.cells(id).attachChart({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachDataView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachDataView

attaches dhtmlxDataView to a cell

dhtmlXDataView attachDataView(object conf);

Parameters

conf object dataview conf (please, check DataView docs for details)

Returns

dhtmlXDataView dhtmlXDataView instance

Example

var myDataView = dhxComponent.cells(id).attachDataView({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEditor DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachEditor

attaches dhtmlxEditor to a cell

dhtmlXEditor attachEditor();

Returns

dhtmlXEditor dhtmlXEditor instance

Example

var myEditor = dhxComponent.cells(id).attachEditor({
    // editor config here
});

Details

For details about Editor initialization, read the Object Constructor article.

More info about attaching Editor to other components is given in the article Adding Editor to DHTMLX Components.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachForm DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachForm

attaches dhtmlxForm to a cell

dhtmlXForm attachForm(object conf);

Parameters

conf object form conf (please, check form docs for details)

Returns

dhtmlXForm dhtmlXForm instance

Example

var myForm = dhxComponent.cells(id).attachForm({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachGrid DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachGrid

attaches dhtmlxGrid to a cell

dhtmlXGridObject attachGrid( [object config] );

Parameters

config object optional, an object with the Grid configuration

Returns

dhtmlXGridObject dhtmlXGridObject instance

Example

// without parameters
var myGrid = dhxComponent.cells(id).attachGrid();

// passing a config object as a parameter
grid1 = myLayout.cells("a").attachGrid({
    image_path:'codebase/imgs/',
    columns: [{
        label: "Column A",
        width: 100,
        type: "ro",
        sort: "int",
        align: "right"
    },{
        label: "Column B",
        width: 250,
        type: "ed",
        sort: "str",
        align: "left"
    }],
    multiselect: true,
    xml: "grid.xml"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHTMLString DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachHTMLString

attaches HTML content to a cell

void attachHTMLString(string htmlString);

Parameters

htmlString string an HTML string to attach

Example

dhxComponent.cells(id).attachHTMLString("<div>some content</div>");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachLayout DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachLayout

attaches dhtmlxLayout to a cell

dhtmlXLayoutObject attachLayout(string|object conf);

Parameters

conf string|object layout pattern or api-init config

Returns

dhtmlXLayoutObject dhtmlXLayoutObject instance

Example

// pattern only
var myLayout = dhxComponent.cells(id).attachLayout("4H");

// api-init config
var myLayout = dhxComponent.cells(id).attachLayout({
    pattern: "4H",
    cells: [
        {id: "a", text: "Navigation", width: 100, header: false},
        {id: "b", text: "Advertisement", height: 100},
        {id: "c", text: "Main Page"},
        {id: "d", text: "Links", collapse: true}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachList DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachList

attaches dhtmlxList to a cell

dhtmlXList attachList(object conf);

Parameters

conf object list conf (please, check List docs for details)

Returns

dhtmlXList dhtmlXList instance

Example

var myList = dhxComponent.cells(id).attachList({...});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMap DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachMap

attaches Google Maps to a cell

object attachMap( [object opts] );

Parameters

opts object optional, map options (please, check Google docs for details)

Returns

object google.maps.Map object

Example

var GMaps = dhxLayout.cells(id).attachMap();
//or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = dhxLayout.cells(id).attachMap(mapParams);

Details

Please, check Google docs for details.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachMenu

attaches dhtmlxMenu to a cell

object attachMenu( [object conf] );

Parameters

conf object optional, menu config

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.cells(id).attachMenu({
    icons_path: "imgs/menu/icons/",
    json: "data/json/menu.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachObject

attaches an HTML object to a cell

void attachObject(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object DOM element or its id

Example

dhxComponent.cells(id).attachObject("objectId");

Details
  • style "display:none" (if set) will be removed automatically after attaching, useful to keep content hidden while not attached
<div id="objectId" style="display: none;">...</div>
  • for this mode cell will not render native scrolls, so you need to use the following style: "width: 100%; height: 100%; overflow: auto;" to make attached object's scrolls appear when necessary
div#objectId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}
See also
  • API
    • detachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


attachPortal DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachPortal

attaches dhtmlxPortal to a cell

dhtmlXPortal attachPortal(object conf);

Parameters

conf object portal config

Returns

dhtmlXPortal dhtmlXPortal instance

Example

var myPortal = dhxComponent.cells(id).attachPortal({
    pattern:"3L"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachRibbon

attaches dhtmlxRibbon to a cell

object attachRibbon( [object conf] );

Parameters

conf object optional, ribbon config

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.cells(id).attachRibbon({
    icons_path: "imgs/ribbon/icons/",
    json: "data/json/ribbon.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachScheduler DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachScheduler

attaches dhtmlxScheduler to a cell

object attachScheduler( [Date day,string mode,string contId,object scheduler] );

Parameters

day | Date | (optional) js date object, initial date in scheduler, current date by default
mode | string | (optional) name of the initial mode ("month", "day", "week"), "week" by default
contId | string | (optional) extended config, please see below
scheduler | object | (optional) dhtmlxScheduler object (another instance, only PRO version of scheduler)

Returns

object dhtmlXScheduler instance

Example

var myScheduler = dhxComponent.cells(id).attachScheduler();

// or
var myScheduler = dhxComponent.cells(id).attachScheduler(null, "month");

//or
var sTabs = '<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>'+
            '<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>'+
            '<div class="dhx_cal_tab" name="month_tab" style="right:280px;"></div>'+
            '<div class="dhx_cal_tab" name="timeline_tab" style="right:76px;"></div>';

var myScheduler = dhxComponent.cells(id).attachScheduler(null, "month", sTabs);

Details

There are two possible values of the contId parameter:

  • the id of the div that specifies the entire scheduler configuration
  • a string with the tabs' divs. In this case a scheduler will be rendered with the default configuration, except for the tabs: they can be presented by the default "day", "week", "month" members or by any other tabs' collection
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachSidebar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachSidebar

attaches dhtmlxSidebar to a cell

object attachSidebar( [object conf] );

Parameters

conf object optional, sidebar config for api-init

Returns

object dhtmlxSidebar instance

Example

var mySidebar = dhxComponent.cells(id).attachSidebar({
    items: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachStatusBar

attaches a status bar to a cell

obj attachStatusBar( [object conf] );

Parameters

conf object optional, status bar init params

Returns

obj status bar object

Example

/* conf param properties */
{
    text:   "Text", // status bar init text
    height: 20,     // status bar init height
    paging: true    // (optional) true to use for grid paging
}

/* init/attach status bar */

// default behavior
var sbObj = dhxComponent.cells(id).attachStatusBar();

// with text
var sbObj = dhxComponent.cells(id).attachStatusBar({text: "Loading..."});

// with text and custom height
var sbObj = dhxComponent.cells(id).attachStatusBar({text: "Loading...", height: 30});

/* operations with status bar object */

// set text
sbObj.setText("Page was successfully loaded");

// get text
var text = sbObj.getText();

Details

Since version 4.1 toolbar can be attached into statusbar in order to be used for paging in grid:

// first attach status bar
dhxComponent.cells(id).attachStatusBar({
    text:   "<div id='pagingArea'></div>",
    paging: true
});

// then init paging in grid
myGrid.enablePaging(true, 9, 3, "pagingArea");
myGrid.setPagingSkin("toolbar");
Change log
  • conf param was added in version 4.0
  • paging:true added in 4.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTabbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachTabbar

attaches dhtmlxTabbar to a cell

object attachTabbar( [object conf] );

Parameters

conf object optional, tabbar config for API-initialization

Returns

object dhtmlXTabbar instance

Example

var myTabbar = dhxComponent.cells(id).attachTabbar({
    align: "right",
    mode: "bottom",
    tabs: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
    ]
});

Details

The old parameter used for tabbar initialization - "mode" is deprecated since version 4.0 and is replaced with "conf".

To set the tabs mode, use conf.mode:

// old deprecated
var myTabbar = dhxComponent.cells(id).attachTabbar("bottom");
// new usage
var myTabbar = dhxComponent.cells(id).attachTabbar({mode:"bottom"});
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachToolbar

attaches dhtmlxToolbar to a cell

object attachToolbar( [object conf] );

Parameters

conf object optional, toolbar config

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.cells(id).attachToolbar({
    icons_path: "imgs/toolbar/icons/",
    json: "data/json/toolbar.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTree DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachTree

attaches dhtmlxTree to a cell

object attachTree( [string|number rootId] );

Parameters

rootId string|number (optional) tree root id (check Tree docs for details)

Returns

object dhtmlXTreeObject instance

Example

var myTree = dhxComponent.cells(id).attachTree();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachTreeView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachTreeView

attaches dhtmlxTreeView to a cell

object attachTreeView( [object conf] );

Parameters

conf object optional, treeview config

Returns

object dhtmlXTreeViewObject instance

Example

var myTreeView = dhxComponent.cells(id).attachTreeView({
    items: [
        {id: 1, text: "Books", open: 1, items: [
            {id: 2, text: "Turned at Dark / C. C. Hunter"},
            {id: 3, text: "Daire Meets Ever / Alyson Noël"}
        ]}
    ]
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachURL DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachURL

attaches the specified URL to a cell

void attachURL(string url, [boolean ajax,boolean|object postData] );

Parameters

url | string | URL to attach
ajax | boolean | (optional) if set to true, the URL will be loaded by AJAX (async GET), false by default
postData | boolean|object | (optional) performs POST request (true for a simple post or an object with params)

Example

/* iframe */
// GET
dhxComponent.cells(id).attachURL("page.html");
// POST
dhxComponent.cells(id).attachURL("page.html", null, true);
// POST with params
dhxComponent.cells(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

/* by ajax */
// GET
dhxComponent.cells(id).attachURL("page.html", true);
// POST
dhxComponent.cells(id).attachURL("page.html", true, true);
// POST with params
dhxComponent.cells(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Details

important notes:

  • to prevent caching in some browsers, an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • loading is async, so to proceed with content, you need onContentLoaded event
  • learn how to control attached content here
Change log

postData param and the ability to perform POST request are added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachVault DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

attachVault

attaches dhtmlxVault to a cell

dhtmlXVaultObject attachVault(object conf);

Parameters

conf object Vault config for object-api initialization

Returns

dhtmlXVaultObject dhtmlxVault instance

Example

var myVault = dhxComponent.cells(id).attachVault({
    uploadUrl:      "http://my_mega_server/upload_handler.php",
    swfUrl:         "http://my_mega_server/upload_handler.php",
    slUrl:          "http://my_mega_server/upload_handler.php",
    swfPath:        "dhxvault.swf",
    slXap:          "dhxvault.xap"
});

Details

if separate component files are used - dhtmlxvault.js should be included after dhtmlxcontainer.js

Change log

added in 3.6.1

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

detachMenu

detaches dhtmlxMenu from a cell

void detachMenu();

Example

var myMenu = dhxComponent.cells(id).attachMenu();

// detach
dhxComponent.cells(id).detachMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

detachObject

detaches any attached content from a cell

void detachObject( [boolean remove,string|number|HTMLElement moveTo] );

Parameters

remove | boolean | (optional) set to true to remove the content permanently, false by default
moveTo | string|number|HTMLElement | (optional) the object's id or the object itself to move content to (if the "remove" parameter is set to false)
Details

Let's consider possible behavior, depending on which we pass particular parameters to the method.

Assuming that we have attached Grid to the component's cell:

var myGrid = dhxComponent.cells(id).attachGrid();

In case we need to detach Grid later, there are several possible options:

1) calling the detachObject() method without parameters:

dhxComponent.cells(id).detachObject();

The Grid object won't be completely removed. It will be attached to the document.body outside the component's container and hidden with the display:none property.

2) calling the detachObject() method with the "remove" parameter set to true:

dhxComponent.cells(id).detachObject(true);

The cell will be cleared. You need to clear the Grid object to remove it permanently.

myGrid = null;

3) calling the detachObject() method with the "remove" parameter set to false and passing an object (object's id) as the second parameter:

// assuming that a node with the id="tempNode" exists
dhxComponent.cells(id).detachObject(false, "tempNode");

The Grid object won't be completely removed. It will be moved to the "tempNode" container and hidden with the display:none property.

Note also that if you call dhxComponent.unload(), the attached content will be removed permanently.

See also
  • API
    • attachObject
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


detachRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

detachRibbon

detaches dhtmlxRibbon from a cell

void detachRibbon();

Example

var myRibbon = dhxComponent.cells(id).attachRibbon();

// detach
dhxComponent.cells(id).detachRibbon();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

detachStatusBar

detaches status bar from a cell

void detachStatusBar();

Example

var sbObj = dhxComponent.cells(id).attachStatusBar();

// detach
dhxComponent.cells(id).detachStatusBar();
sbObj = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

detachToolbar

detaches dhtmlxToolbar from a cell

void detachToolbar();

Example

var myToolbar = dhxComponent.cells(id).attachToolbar();

// detach
dhxComponent.cells(id).detachToolbar();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

getAttachedMenu

returns dhtmlxMenu instance attached to a cell

object getAttachedMenu();

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.cells(id).attachMenu();

// somewhere in a different place
var attachedMenu = dhxComponent.cells(id).getAttachedMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedObject DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

getAttachedObject

returns the object attached to a cell

string|object getAttachedObject();

Returns

string|object attached object

Example

var myGrid = dhxComponent.cells(id).attachGrid({...});

// somewhere in other place
var obj = dhxComponent.cells(id).getAttachedObject();
if (typeof(window.dhtmlXGridObject) == "function" && obj instanceof dhtmlXGridObject) {
    // code related to grid
} else {
    // some other code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

getAttachedRibbon

returns dhtmlxRibbon instance attached to a cell

object getAttachedRibbon();

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.cells(id).attachRibbon();

// somewhere in other place
var attachedRibbon = dhxComponent.cells(id).getAttachedRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

getAttachedStatusBar

returns status bar object attached to a cell

object getAttachedStatusBar();

Returns

object status bar instance

Example

var myStatusBar = dhxComponent.cells(id).attachStatusBar();

// somewhere in a different place
var attachedStatusBar = dhxComponent.cells(id).getAttachedStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

getAttachedToolbar

returns dhtmlxToolbar instance attached to a cell

object getAttachedToolbar();

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.cells(id).attachToolbar();

// somewhere in a different  place
var attachedToolbar = dhxComponent.cells(id).getAttachedToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getFrame DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

getFrame

returns an iframe object when an URL is attached to a cell

HTMLElement getFrame();

Returns

HTMLElement an iframe object

Example

// as loading is async, you need to do it through an event
dhxComponent.attachEvent("onContentLoaded", function(id){

    // get frame
    var ifr = dhxComponent.cells(id).getFrame();

    // access to iframe's element
    var elem = ifr.contentWindow.document.getElementById("someId");
    elem.innerHTML = "some text";

    // access to iframe's function
    // make sure that the function is in the iframe's window scope
    ifr.contentWindow.someFunc();

});

// and then attach an URL
dhxComponent.cells(id).attachURL("server/page.php?param=value");

Details

You can learn how to manage the attached content from the article Attaching URL.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getId DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

getId

returns the id of a cell

string|number getId();

Returns

string|number the cell's id

Example

dhxComponent.forEachCell(function(cell){
    var id = cell.getId();
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getViewName DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

getViewName

returns the name of the current view

string getViewName();

Returns

string view name

Example

var name = dhxComponent.cells(id).getViewName();

Details

The default view name is "def", it is created automatically when a cell is created

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

hideMenu

hides dhtmlxMenu attached to a cell

void hideMenu();

Example

dhxComponent.cells(id).hideMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

hideRibbon

hides dhtmlxRibbon attached to a cell

void hideRibbon();

Example

dhxComponent.cells(id).hideRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

hideStatusBar

hides status bar object attached to a cell

void hideStatusBar();

Example

dhxComponent.cells(id).hideStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

hideToolbar

hides dhtmlxToolbar attached to a cell

void hideToolbar();

Example

dhxComponent.cells(id).hideToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOff DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

progressOff

hides the progress indicator in a cell

void progressOff();

Example

dhxComponent.cells(id).progressOff();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOn DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

progressOn

shows the progress indicator in a cell

void progressOn();

Example

dhxComponent.cells(id).progressOn();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


reloadURL DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

reloadURL

reloads the attached URL in a cell

void reloadURL();

Example

dhxComponent.cells(id).reloadURL();

Details

reloads both iFrame/AJAX attached, keeps postData and params, if any

Change log

added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showInnerScroll DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

showInnerScroll

shows inner cell scrolls

void showInnerScroll();

Example

dhxComponent.cells(id).showInnerScroll();

Change log

added in 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMenu DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

showMenu

shows dhtmlxMenu attached to a cell

void showMenu();

Example

dhxComponent.cells(id).showMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRibbon DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

showRibbon

shows dhtmlxRibbon attached to a cell

void showRibbon();

Example

dhxComponent.cells(id).showRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showStatusBar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

showStatusBar

shows status bar object attached to a cell

void showStatusBar();

Example

dhxComponent.cells(id).showStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showToolbar DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

showToolbar

shows dhtmlxToolbar attached to a cell

void showToolbar();

Example

dhxComponent.cells(id).showToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

showView

shows the specified view, creates a new one if it doesn't exist

boolean showView(string name);

Parameters

name string view name

Returns

boolean true if view was accessed first time, false otherwise

Example

// here is an example how to initialize content
// in several views on demand inside of a cell

// 1) for the default view "def" we will simply attach an URL
// 2) for the "grid" view  we will attach menu and grid
// 3) and for the "tree" view we will attach toolbar and tree

var myMenu;
var myGrid;
var myToolbar;
var myTree;

// the default view is ready right after component initialization
dhxComponent.cells(id).attachURL("http://somedomain.com/page.html");

function initView(name) {
    // assuming that this function will be called after some user action
    // like a button click or some other
    var state = dhxComponent.cells(id).showView(name);
    if (state == true) {
        // first call, initializes corresponding components
        if (name == "grid") {
            myMenu = dhxComponent.cells(id).attachMenu();
            myGrid = dhxComponent.cells(id).attachGrid();
        } else if (name == "tree") {
            myToolbar = dhxComponent.cells(id).attachToolbar();
            myTree = dhxComponent.cells(id).attachTree();
        }
    }
}

Details

The default view name is "def", it is created automatically when a cell is created

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


unloadView DHTMLX Docs

Documentation
  • appendObject
  • attachAccordion
  • attachCarousel
  • attachChart
  • attachDataView
  • attachEditor
  • attachForm
  • attachGrid
  • attachHTMLString
  • attachLayout
  • attachList
  • attachMap
  • attachMenu
  • attachObject
  • attachPortal
  • attachRibbon
  • attachScheduler
  • attachSidebar
  • attachStatusBar
  • attachTabbar
  • attachToolbar
  • attachTree
  • attachTreeView
  • attachURL
  • attachVault
  • detachMenu
  • detachObject
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedObject
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • getFrame
  • getId
  • getViewName
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • reloadURL
  • showInnerScroll
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
  • showView
  • unloadView
Start Helpers Cell dhtmlXCell API Methods

unloadView

unloads the specified view

void unloadView(string name);

Parameters

name string view name

Example

// create test view and switch to it
var state = dhxComponent.cells(id).showView("test_view");
console.log(state); // true

// attach some content
dhxComponent.cells(id).attachMenu();
dhxComponent.cells(id).attachGrid();

// go back to default view
var state = dhxComponent.cells(id).showView("def");
console.log(state); // false

// unload test_view
dhxComponent.cells(id).unloadView("test_view");

// open test_view again
var state = dhxComponent.cells(id).showView("test_view");
console.log(state); // true

// attach some content
dhxComponent.cells(id).attachMenu();
dhxComponent.cells(id).attachGrid();

// unload test_view
dhxComponent.cells(id).unloadView("test_view");

// check active view
var name = dhxComponent.cells(id).getViewName();
console.log(name); // "test_view"

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Components DHTMLX Docs

Documentation
  • dhtmlXCell API
  • Attaching Components
    • Getting the attached component
    • Detaching components
    • Scheduler specificity
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
  • dhtmlXCellTop API
Start Helpers Cell

Attaching Components

Almost all DHTMLX components can be attached directly to a cell by the corresponding method.

Accordion
dhxComponent.cells(id).attachAccordion();
Carousel
dhxComponent.cells(id).attachCarousel();
Chart
dhxComponent.cells(id).attachChart();
DataView
dhxComponent.cells(id).attachDataView();
Editor
dhxComponent.cells(id).attachEditor();
Form
dhxComponent.cells(id).attachForm();
Grid
dhxComponent.cells(id).attachGrid();
Layout
dhxComponent.cells(id).attachLayout();
List
dhxComponent.cells(id).attachList();
Menu
dhxComponent.cells(id).attachMenu();
Ribbon
dhxComponent.cells(id).attachRibbon();
Scheduler
dhxComponent.cells(id).attachScheduler();
Sidebar
dhxComponent.cells(id).attachSidebar();
StatusBar
dhxComponent.cells(id).attachStatusBar();
Tabbar
dhxComponent.cells(id).attachTabbar();
Toolbar
dhxComponent.cells(id).attachToolbar();
Tree
dhxComponent.cells(id).attachTree();
TreeView
dhxComponent.cells(id).attachTreeView();

We highly recommend you to follow this way of attaching components, as it guarantees proper rendering and correct resizing of embedded components in relation to their parent container.

Please note that attaching of Menu, Ribbon, Toolbar and StatusBar into a cell has some peculiarities. For details check the article Attaching Menu/Status Bar.

Make sure you've included the corresponding .js/.css files of the related component on a page, for example:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxgrid.css">
    <script src="dhtmlxgrid.js"></script>
</head>

Getting the attached component

There is a possibility to get link to the attached component:

var attached = dhxComponent.cells(id).getAttachedObject();
if (window.dhtmlXGridObject != null && attached instanceof window.dhtmlXGridObject) {
    console.log("An attached grid detected");
}

Detaching components

// attach
var myAcc = dhxComponent.cells(id).attachAccordion({...});

// detach later
dhxComponent.cells(id).detachObject(true);
myAcc = null;

Scheduler specificity

Please note, the attachScheduler method differs from other attaching methods. The difference is that attachScheduler not only attaches the component but also initializes it - creates an instance with the predefined structure.

Therefore:

  • The attachScheduler method doesn't return a component object;
  • The attachScheduler method can be called only once;
  • If you need to set some configuration options for the scheduler, set them before attaching scheduler to the layout.
var myLayout = new dhtmlXLayoutObject(document.body, "3L");
myLayout.cells("a").setWidth(800);

// configure scheduler if needed
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
// then attach it to layout
myLayout.cells("a").attachScheduler(new Date(), "month");
// load some data
scheduler.load("../common/events.xml");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Menu/Status Bar DHTMLX Docs

Documentation
  • dhtmlXCell API
  • Attaching Components
  • Attaching Menu/Status Bar
    • Attaching Menu
    • Attaching Toolbar
    • Attaching Ribbon
    • Attaching StatusBar
    • What else?
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
  • dhtmlXCellTop API
Start Helpers Cell

Attaching Menu/Status Bar

You can use Menu, Toolbar and Ribbon components as a menu bar and attach them to the top of a cell. A cell can also have a simple status bar at the bottom added with the help of the StatusBar component.

You can attach several of these components at a time together with other content of a Layout-based component.

Attaching Menu

1) Include dhtmlxMenu source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxmenu.css">
    <script src="dhtmlxmenu.js"></script>
</head>

2) Call the corresponding function:

var myMenu = dhxComponent.cells(id).attachMenu({
    // menu conf here
});

3) Learn more about dhtmlxMenu from the related documentation.

Attaching Toolbar

1) Include dhtmlxToolbar source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxtoolbar.css">
    <script src="dhtmlxtoolbar.js"></script>
</head>

2) Call the corresponding function:

var myToolbar = dhxComponent.cells(id).attachToolbar({
    // toolbar conf here
});

3) Learn more about dhtmlxToolbar from the related documentation.

Attaching Ribbon

1) Include dhtmlxRibbon source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxribbon.css">
    <script src="dhtmlxribbon.js"></script>
</head>

2) Call the corresponding function:

var myRibbon = dhxComponent.cells(id).attachRibbon({
    // ribbon conf here
});

3) Learn more about dhtmlxRibbon from the related documentation.

Attaching StatusBar

1) There's no need to include extra .js/.css files.

2) Call the corresponding function:

var sbObj = dhxComponent.cells(id).attachStatusBar({
    // status bar config here, optional
    text:   "some text here",   // status bar text
    height: 35                  // custom height
});

// set status bar text
sbObj.setText("New text");

// get status bar text
var text = sbObj.getText();

What else?

1) You can show/hide any attached control without unloading it from memory, for example:

dhxComponent.cells(id).showMenu();
dhxComponent.cells(id).hideMenu();

2) You can detach and unload the attached control completely, for example:

// init
var myMenu = dhxComponent.cells(id).attachMenu({...});

// detach later
dhxComponent.cells(id).detachMenu();
myMenu = null;

3) You can get link to the component's instance:

var myMenu = dhxComponent.cells(id).getAttachedMenu();
if (myMenu == null) {
    // not inited
    myMenu = dhxComponent.cells(id).attachMenu({...});
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching HTML DHTMLX Docs

Documentation
  • dhtmlXCell API
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
    • Attaching HTML object
    • Appending HTML object
    • Attaching HTML string
    • Detaching object
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
  • dhtmlXCellTop API
Start Helpers Cell

Attaching HTML

There is a possibility to attach HTML objects and HTML strings to a cell. Several HTML objects can be attached at a time.

Attaching HTML object

<div id="objId">Some text</div>
// attach by id
dhxComponent.cells(id).attachObject("objId");
// or attach by link
var obj = document.getElementById("objId");
dhxComponent.cells(id).attachObject(obj);

in this mode a cell doesn't render scrolls by default, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Appending HTML object

This way is the same as attaching an object, but the current cell's content isn't removed:

dhxComponent.cells(id).appendObject("otherObjId");

in this mode a cell will add scrolls automatically, so there's no need to specify width/height to the attached object.

Attaching HTML string

dhxComponent.cells(id).attachHTMLString('<div id="objId">Some text</div>');

in this mode scrolls aren't rendered by default as well, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Detaching object

Any attached object or HTML string can be detached from a cell with the help of the detachObject() method:

// attach
dhxComponent.cells(id).attachObject("objId");

// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to "true", the object will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching URL DHTMLX Docs

Documentation
  • dhtmlXCell API
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
    • Attaching via iFrame
    • Attaching via AJAX
    • Using onContentLoaded event
    • Accessing the attached content
    • Accessing parent from attached page
    • Detaching URLs
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
  • dhtmlXCellTop API
Start Helpers Cell

Attaching URL

A cell has a possibility to attach URLs. It can be done by using iFrames and AJAX calls.

In the case of iFrames call, an iFrame will be created inside of a cell, and your URL will be attached as a separate page (it will have access to your code as you will have control over the content inside of the iFrame).

In the case of AJAX call, the content returned by the server will be placed inside of a div.

  • a common function used for both methods is attachURL(), the only difference is that the 2nd argument is set to true for AJAX call
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
  • loading is async, so to proceed with content, you need to use the "onContentLoaded" event

Attaching via iFrame

GET request

dhxComponent.cells(id).attachURL("page.html");

POST request without params

dhxComponent.cells(id).attachURL("page.html", null, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", null, {fname: "Mike", hobby: "fishing"});

Attaching via AJAX

GET request

dhxComponent.cells(id).attachURL("page.html", true);

POST request without params

dhxComponent.cells(id).attachURL("page.html", true, true);

POST with params

dhxComponent.cells(id).attachURL("page.html", true, {fname: "Mike", hobby: "fishing"});

Using onContentLoaded event

As it was said above, loading is async, so to proceed with content, you need to use the "onContentLoaded" event:

// firstly add the event
dhxComponent.attachEvent("onContentLoaded", function(id){
    // page.html id loaded, your code here
});

// now attach a URL
dhxComponent.cells(id).attachURL("page.html");

Accessing the attached content

This part is related to the iFrame-mode only.

Assuming the code below has been attached:

<html>
<head>
    <script>
        function myFunc() {
            console.log("I'm attached function");
        }
    </script>
</head>
<body>
    <div id="attachedObject">
        Some text here
    </div>
</body>
</html>

Firstly, you need to get an iFrame object from the cell where the attached content is located:

var ifr = dhxComponent.cells(id).getFrame();

Now you can access the elements:

// make sure an element exists
var elem = ifr.contentWindow.document.getElementById("attachedObject");
elem.innerHTML = "Some new text here";

and call some JS code:

// make sure function exists and located in the iFrame's window scope
ifr.contentWindow.someFunc();

Accessing parent from attached page

This part is related to the iFrame-mode only.

If you need to make some actions with a cell from the attached page (for example, hide the window by clicking some button on the page or collapse a layout's cell) this can be done in the following way:

<!-- this attached page.html -->
<script>
    function controlParent() {
        parent.myLayout.cells(id).collapse();   // collapse layout's cell
        parent.myWins.window(id).hide();        // hiding a window
    }
</script>

Any variable or function can be acccessed but make sure it is declared in a global window scope.

Detaching URLs

Any attached URL can be detached from a cell by using the detachObject() method:

// attach
dhxComponent.cells(id).attachURL("page.html");

// detach later
dhxComponent.cells(id).detachObject(true);

If the 1st param is set to true, the object (iFrame or a div with AJAX content) will be removed from DOM, otherwise it will be moved to document.body.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Attaching Google Maps DHTMLX Docs

Documentation
  • dhtmlXCell API
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
  • dhtmlXCellTop API
Start Helpers Cell

Attaching Google Maps

There's a possibility to attach Google Maps to a cell.

Firstly, include the corresponding .js file on your page:

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>

And then initialize a cell with a map inside on the page:

var GMaps = myLayout.cells("b").attachMap(); // applies default parameters

// or
var mapParams = {
    center: new google.maps.LatLng(40.719837,-73.992348),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var GMaps = myLayout.cells(id).attachMap(mapParams);

Related sample: Integration with Google Maps

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Progress Bar DHTMLX Docs

Documentation
  • dhtmlXCell API
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
  • dhtmlXCellTop API
Start Helpers Cell

Progress Bar

A progress control is a state indicator. It can be used to indicate content loading or updating. While the cell is visually disabled and not accessible for user actions the progress is enabled.

This functionality will not start automatically when some content is loaded into a cell, it needs to be triggered by calling the appropriate API method.

Here is the code for a cell's progress control:

// turning progress on
dhxComponent.cells(id).progressOn();

// turning progress off
dhxComponent.cells(id).progressOff();

In practical scenario, you can place the progressOn() call before loading data in some component, and progressOff() in data loading callback, for example:

var myLayout;
var myGrid;

// init layout and attach grid
function initControls() {
    myLayout = new dhtmlXLayoutObject({
        parent: "layoutObj",
        pattern: "2U"
    });
    myGrid = myLayout.cells("a").attachGrid();
    loadGridData(true);
}

// load/reload grid data
function loadGridData(firstLoad) {
    myLayout.cells("a").progressOn();
    if (firstLoad == true) {
        myGrid.load("server.php", doOnGridLoaded);
    } else {
        myGrid.updateFromXML("server.php", true, false, doOnGridLoaded);
    }
}

// grid dataload callback
function doOnGridLoaded() {
    myLayout.cells("a").progressOff();
}
<body onload="initControls();">
    <div id="layoutObj" style="width: 600px; height: 400px;"></div>
    <input type="button" value="refresh grid" onclick="loadGridData();"></div>
</body>

Each time you will click the button, the loadGridData() method will be called and you will see the progress of loading over the cell with grid.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Different Content in the Same Cell DHTMLX Docs

Documentation
  • dhtmlXCell API
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
  • dhtmlXCellTop API
Start Helpers Cell

Different Content in the Same Cell

Cells have a possibility to show different content in the same cell. This feature is called "views". Each cell shows the view "def" by default. You can easily switch to the other view and init different content.

Let's see how it works. We will create a "3L" layout and attach some components to the cell "b".

var myLayout = new dhtmlXLayoutObject("layoutObj", "3L");

Currently, the view "def" is selected. There's no need to call any extra commands to make it active, just attach the content you need:

var myMenu = myLayout.cells("b").attachMenu();
var myGrid = myLayout.cells("b").attachGrid();

Now let's show another view and attach some other content to it:

myLayout.cells("b").showView("tree");

At this moment the cell hides the currently active views ("def" in our case) and shows the requested one. You can name the view as you wish, it's necessary just to determine which view to show. As we haven't attached any components, the "tree" view looks like an empty cell.

Now let's attach some content to the view "tree":

myTree = myLayout.cells("b").attachTree();
myToolbar = myLayout.cells("b").attachToolbar();

Now let's go back to the view "def" and see what happens:

myLayout.cells("b").showView("def");

As you can see, now the view "tree" becomes hidden and the view "def" is restored and active.

In the above example we're using layout just to show you how the described functionality works. Views are the feature of a cell, so they are enabled in all the components that use cells: accordion, layout, tabbar and windows.

Related sample: Views

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Coloring Text Selection DHTMLX Docs

Documentation
  • dhtmlXCell API
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
  • dhtmlXCellTop API
Start Helpers Cell

Coloring Text Selection

Sometimes you need to make the selected text look like a common skin. To set a custom color for the selection, use the following technique:

1) Define a CSS class with ::selection and ::-moz-selection pseudo-elements inside:

.my_style::selection {
    color: #454544;
    background-color: #fffcda;
}
.my_style::-moz-selection {
    color: #454544;
    background-color: #fffcda;
}

2) Set the above specified CSS class for the required object:

<div id="layoutObj"></div>
<div id="objId">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
<div id="objId2" class="my_style">
    King Arthur is a 2004 film directed by Antoine Fuqua ...
</div>
var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "2U",
    cells: [
        {id: "a", text: "Default selection"},
        {id: "b", text: "Custom selection"}
    ]
});

myLayout.cells("a").attachObject("objId");
myLayout.cells("b").attachObject("objId2");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration from 3.6 to 4.0 DHTMLX Docs

Documentation
  • dhtmlXCell API
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
  • dhtmlXCellTop API
Start Helpers Cell

Migration from 3.6 to 4.0

1) Views functionality was changed

Until 3.6 you could attach components to a view without switching to it:

dhxComponent.cells(id).view(name).attachMenu();
dhxComponent.cells(id).view(name).attachGrid();
dhxComponent.cells(id).view(name).setActive();

Starting from 4.0, firstly you need to show a view and then attach components to it:

// firstly make a view active
dhxComponent.cells(id).showView(name);
// then attach any components
dhxComponent.cells(id).attachMenu();
dhxComponent.cells(id).attachGrid();
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlXCellTop API DHTMLX Docs

Documentation
  • dhtmlXCell API
  • Attaching Components
  • Attaching Menu/Status Bar
  • Attaching HTML
  • Attaching URL
  • Attaching Google Maps
  • Progress Bar
  • Different Content in the Same Cell
  • Coloring Text Selection
  • Migration from 3.6 to 4.0
  • dhtmlXCellTop API
    • Methods
Start Helpers Cell

dhtmlXCellTop API

Methods
attachFooter | attaches footer to component's bottom
attachHeader | attaches header to component's top
attachMenu | attaches dhtmlxMenu to component's top
attachRibbon | attaches dhtmlxRibbon to component's top
attachStatusBar | attaches a status bar object to component's bottom
attachToolbar | attaches dhtmlxToolbar to component's top
detachFooter | detaches footer from component's bottom
detachHeader | detaches header from component's top
detachMenu | detaches dhtmlxMenu from component's top
detachRibbon | detaches dhtmlxRibbon from component's top
detachStatusBar | detaches status bar object from component's bottom
detachToolbar | detaches dhtmlxToolbar from component's top
getAttachedMenu | returns dhtmlxMenu instance attached to component's top
getAttachedRibbon | returns dhtmlxRibbon instance attached to component's top
getAttachedStatusBar | returns status bar object attached to component's bottom
getAttachedToolbar | returns dhtmlxToolbar instance attached to component's top
hideMenu | hides dhtmlxMenu attached to component's top
hideRibbon | hides dhtmlxRibbon attached to component's top
hideStatusBar | hides status bar object attached to component's bottom
hideToolbar | hides dhtmlxToolbar attached to component's top
progressOff | hides progress indicator for full component
progressOn | shows progress indicator for full component
setOffsets | sets offsets for parent container from each side
showMenu | shows dhtmlxMenu attached to component's top
showRibbon | shows dhtmlxRibbon attached to component's top
showStatusBar | shows status bar object attached to component's bottom
showToolbar | shows dhtmlxToolbar attached to component's bottom
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • attachFooter
    • attachHeader
    • attachMenu
    • attachRibbon
    • attachStatusBar
    • attachToolbar
    • detachFooter
    • detachHeader
    • detachMenu
    • detachRibbon
    • detachStatusBar
    • detachToolbar
    • getAttachedMenu
    • getAttachedRibbon
    • getAttachedStatusBar
    • getAttachedToolbar
    • hideMenu
    • hideRibbon
    • hideStatusBar
    • hideToolbar
    • progressOff
    • progressOn
    • setOffsets
    • showMenu
    • showRibbon
    • showStatusBar
    • showToolbar
Start Helpers Cell dhtmlXCellTop API

Methods

attachFooter | attaches footer to component's bottom
attachHeader | attaches header to component's top
attachMenu | attaches dhtmlxMenu to component's top
attachRibbon | attaches dhtmlxRibbon to component's top
attachStatusBar | attaches a status bar object to component's bottom
attachToolbar | attaches dhtmlxToolbar to component's top
detachFooter | detaches footer from component's bottom
detachHeader | detaches header from component's top
detachMenu | detaches dhtmlxMenu from component's top
detachRibbon | detaches dhtmlxRibbon from component's top
detachStatusBar | detaches status bar object from component's bottom
detachToolbar | detaches dhtmlxToolbar from component's top
getAttachedMenu | returns dhtmlxMenu instance attached to component's top
getAttachedRibbon | returns dhtmlxRibbon instance attached to component's top
getAttachedStatusBar | returns status bar object attached to component's bottom
getAttachedToolbar | returns dhtmlxToolbar instance attached to component's top
hideMenu | hides dhtmlxMenu attached to component's top
hideRibbon | hides dhtmlxRibbon attached to component's top
hideStatusBar | hides status bar object attached to component's bottom
hideToolbar | hides dhtmlxToolbar attached to component's top
progressOff | hides progress indicator for full component
progressOn | shows progress indicator for full component
setOffsets | sets offsets for parent container from each side
showMenu | shows dhtmlxMenu attached to component's top
showRibbon | shows dhtmlxRibbon attached to component's top
showStatusBar | shows status bar object attached to component's bottom
showToolbar | shows dhtmlxToolbar attached to component's bottom
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachFooter DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

attachFooter

attaches footer to component's bottom

void attachFooter(string|number|HTMLElement id, [number height] );

Parameters

id | string|number|HTMLElement | id or DOM element
height | number | optional, footer height

Example

dhxComponent.attachFooter("my_footer");

Details

If height is not specified, component will try to detect it automatically. In this case you'd better specify it in CSS:

#my_footer {
    padding-top: 2px;
    background-color: white;
}

#my_footer .my_footer_text {
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 10px;
    height: 70px; /* for autodetect */
    border: 1px solid #a4bed4
}
<div id="my_footer">
    <div class="my_footer_text">
        Hi! I'm footer!
    </div>
</div>

You can use visibility:hidden style for keeping your element hidden while it is not attached to a component, after attaching the style will be changed to visibility:visible.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachHeader DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

attachHeader

attaches header to component's top

void attachHeader(string|number|HTMLElement id, [number height] );

Parameters

id | string|number|HTMLElement | id or DOM element
height | number | optional, header height

Example

dhxComponent.attachHeader("my_header");

Details

If height is not specified, component will try to detect it automatically. In this case you'd better specify it in CSS:

#my_header {
    padding-bottom: 2px;
    background-color: white;
}

#my_header .my_header_text {
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 10px;
    height: 70px; /* for autodetect */
    border: 1px solid #a4bed4
}
<div id="my_header">
    <div class="my_header_text">
        Hi! I'm header!
    </div>
</div>

You can use visibility:hidden style for keeping your element hidden while it is not attached to component. After attaching the style will be changed to visibility:visible.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachMenu DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

attachMenu

attaches dhtmlxMenu to component's top

object attachMenu( [object conf] );

Parameters

conf object optional, menu config

Returns

object dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.attachMenu({
    icons_path: "imgs/menu/icons/",
    json: "data/json/menu.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachRibbon DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

attachRibbon

attaches dhtmlxRibbon to component's top

object attachRibbon( [object conf] );

Parameters

conf object optional, ribbon config

Returns

object dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.attachRibbon({
    icons_path: "imgs/ribbon/icons/",
    json: "data/json/ribbon.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachStatusBar DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

attachStatusBar

attaches a status bar object to component's bottom

object attachStatusBar( [object conf] );

Parameters

conf object optional, status bar init params

Returns

object status bar object

Example

/* conf param properties */
{
    text:   "Text", // status bar init text
    height: 20      // status bar init height
}

/* init/attach status bar */

// default behaviour
var sbObj = dhxComponent.attachStatusBar();

// with text
var sbObj = dhxComponent.attachStatusBar({text: "Loading..."});

// with text and custom height
var sbObj = dhxComponent.attachStatusBar({text: "Loading...", height: 30});

/* operations with status bar object */

// set text
sbObj.setText("Page was successfuly loaded");

// get text
var text = sbObj.getText();

Change log

conf param was added in version 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachToolbar DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

attachToolbar

attaches dhtmlxToolbar to component's top

object attachToolbar( [object conf] );

Parameters

conf object optional, toolbar config

Returns

object dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.attachToolbar({
    icons_path: "imgs/toolbar/icons/",
    json: "data/json/toolbar.json"
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachFooter DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

detachFooter

detaches footer from component's bottom

void detachFooter();

Example

dhxComponent.detachFooter();

Details

footer DOM element will be attached to body with visibility:hidden css style

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachHeader DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

detachHeader

detaches header from component's top

void detachHeader();

Example

dhxComponent.detachHeader();

Details

header DOM element will be attached to body with visibility:hidden css style

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachMenu DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

detachMenu

detaches dhtmlxMenu from component's top

void detachMenu();

Example

var myMenu = dhxComponent.attachMenu();

// detach
dhxComponent.detachMenu();
myMenu = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachRibbon DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

detachRibbon

detaches dhtmlxRibbon from component's top

void detachRibbon();

Example

var myRibbon = dhxComponent.attachRibbon();

// detach
dhxComponent.detachRibbon();
myRibbon = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachStatusBar DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

detachStatusBar

detaches status bar object from component's bottom

void detachStatusBar();

Example

var sbObj = dhxComponent.attachStatusBar();

// detach
dhxComponent.detachStatusBar();
sbObj = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachToolbar DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

detachToolbar

detaches dhtmlxToolbar from component's top

void detachToolbar();

Example

var myToolbar = dhxComponent.attachToolbar();

// detach
dhxComponent.detachToolbar();
myToolbar = null;

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedMenu DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

getAttachedMenu

returns dhtmlxMenu instance attached to component's top

dhtmlXMenuObject getAttachedMenu();

Returns

dhtmlXMenuObject dhtmlXMenuObject instance

Example

var myMenu = dhxComponent.attachMenu();

// somewhere in other place
var attachedMenu = dhxComponent.getAttachedMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedRibbon DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

getAttachedRibbon

returns dhtmlxRibbon instance attached to component's top

dhtmlXRibbon getAttachedRibbon();

Returns

dhtmlXRibbon dhtmlXRibbon instance

Example

var myRibbon = dhxComponent.attachRibbon();

// somewhere in other place
var attachedRibbon = dhxComponent.getAttachedRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedStatusBar DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

getAttachedStatusBar

returns status bar object attached to component's bottom

object getAttachedStatusBar();

Returns

object StatusBar instance

Example

var myStatusBar = dhxComponent.attachStatusBar();

// somewhere in other place
var attachedStatusBar = dhxComponent.getAttachedStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getAttachedToolbar DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

getAttachedToolbar

returns dhtmlxToolbar instance attached to component's top

dhtmlXToolbarObject getAttachedToolbar();

Returns

dhtmlXToolbarObject dhtmlXToolbarObject instance

Example

var myToolbar = dhxComponent.attachToolbar();

// somewhere in other place
var attachedToolbar = dhxComponent.getAttachedToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideMenu DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

hideMenu

hides dhtmlxMenu attached to component's top

void hideMenu();

Example

dhxComponent.hideMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideRibbon DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

hideRibbon

hides dhtmlxRibbon attached to component's top

void hideRibbon();

Example

dhxComponent.hideRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideStatusBar DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

hideStatusBar

hides status bar object attached to component's bottom

void hideStatusBar();

Example

dhxComponent.hideStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


hideToolbar DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

hideToolbar

hides dhtmlxToolbar attached to component's top

void hideToolbar();

Example

dhxComponent.hideToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOff DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

progressOff

hides progress indicator for full component

void progressOff();

Example

dhxComponent.progressOff();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


progressOn DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

progressOn

shows progress indicator for full component

void progressOn();

Example

dhxComponent.progressOn();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setOffsets DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

setOffsets

sets offsets for parent container from each side

void setOffsets(object conf);

Parameters

conf object offsets config

Example

// init component
var myComponent = new dhtmlXComponent(...);

// setting offsets for parent container
// this also works for document.body init
myComponent.setOffsets({
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
});

// also you can specify offset only for a single direction
myComponent.setOffsets({
    bottom: 10
});

// or for several directions
myComponent.setOffsets({
    right: 10,
    left: 10
});

Change log

added in 4.2

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showMenu DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

showMenu

shows dhtmlxMenu attached to component's top

void showMenu();

Example

dhxComponent.showMenu();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showRibbon DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

showRibbon

shows dhtmlxRibbon attached to component's top

void showRibbon();

Example

dhxComponent.showRibbon();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showStatusBar DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

showStatusBar

shows status bar object attached to component's bottom

void showStatusBar();

Example

dhxComponent.showStatusBar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


showToolbar DHTMLX Docs

Documentation
  • attachFooter
  • attachHeader
  • attachMenu
  • attachRibbon
  • attachStatusBar
  • attachToolbar
  • detachFooter
  • detachHeader
  • detachMenu
  • detachRibbon
  • detachStatusBar
  • detachToolbar
  • getAttachedMenu
  • getAttachedRibbon
  • getAttachedStatusBar
  • getAttachedToolbar
  • hideMenu
  • hideRibbon
  • hideStatusBar
  • hideToolbar
  • progressOff
  • progressOn
  • setOffsets
  • showMenu
  • showRibbon
  • showStatusBar
  • showToolbar
Start Helpers Cell dhtmlXCellTop API Methods

showToolbar

shows dhtmlxToolbar attached to component's bottom

void showToolbar();

Example

dhxComponent.showToolbar();

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Event DHTMLX Docs

Documentation
  • Ajax
  • Cell
  • Event
    • Handling events of HTML elements
    • Handling events of DHTMLX components
    • dhtmlxEvent API
  • Message
  • Template
  • Common API
  • DataLoading API
Start Helpers

Event

dhtmlxEvent is a helper class for setting cross-browser handlers for events of HTML elements and DHTMLX components.

Handling events of HTML elements

To set an event handler for an HTML element, use the dhtmlxEvent() function.

<div id="mydiv" style="width:200px; height:50px; border:1px solid #ccc"></div>

<script>
    dhtmlxEvent (document.getElementById('mydiv'), "click", function(ev){
        alert("Hello, world!");
    });
</script>
  • element - (HTMLElement) an HTML element.
  • evName - (string) the event name (without 'on' prefix).
  • handler - (function) a handler function that takes the event object as a parameter.

dhtmlxEvent() function can be called any number of times and can be used for HTML events only

Calling the helper is a good point to start using DHTMLX components on the page.

For example, to ensure that the script written by you will be called only after the page has been completely parsed and to protect yourself from potential errors you can get in the habit of using the following technique:

//alternative to calling window.onload
dhtmlxEvent (window, "load", function(ev){
    var layout = new dhtmlXLayoutObject(document.body,"2U");
    var menu = layout.attachMenu();
    var toolbar = layout.attachToolbar();
    var grid = layout.cells("a").attachGrid();
    var form = layout.cells("b").attachForm();
    ...
})

Handling events of DHTMLX components

To set an event handler for a DHTMLX component, use the attachEvent method:

Attaching event handlers to DHTMLX components

var myForm = new dhtmlXForm("containerId", formStructure);

myForm.attachEvent("onButtonClick", function(name){     alert("Button with name "+name+" was clicked");});

Related sample: onButtonClick event

To detach a handler from an event of a DHTMLX component, use the detachEvent method:

Detaching event handlers from DHTMLX components

var eventId = myForm.attachEvent("onButtonClick", function(name){
    alert("Button with name "+name+" was clicked");
});

myForm.detachEvent(eventId);

See the complete description of the mentioned methods in dhtmlxEvent API

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxEvent API DHTMLX Docs

Documentation
  • dhtmlxEvent API
    • Methods
Start Helpers Event

dhtmlxEvent API

Methods
attachEvent | adds any user-defined handler to available events
detachEvent | detaches a handler from an event
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • attachEvent
    • detachEvent
Start Helpers Event dhtmlxEvent API

Methods

attachEvent | adds any user-defined handler to available events
detachEvent | detaches a handler from an event
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
Start Helpers Event dhtmlxEvent API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • attachEvent
  • detachEvent
Start Helpers Event dhtmlxEvent API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Message DHTMLX Docs

Documentation
  • Ajax
  • Cell
  • Event
  • Message
    • Introduction
    • Working with Message Boxes
    • Message Boxes Description
    • FAQ
  • Template
  • Common API
  • DataLoading API
Start Helpers

Message

dhtmlxMessage is a helper that simplifies creating different message boxes.

  • Introduction
  • Working with Message Boxes
  • Message Boxes Description
  • FAQ
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Introduction DHTMLX Docs

Documentation
  • Introduction
    • Message Box Types
    • Skins
  • Working with Message Boxes
  • Message Boxes Description
  • FAQ
Start Helpers Message

Introduction

Message Box Types

dhtmlxMessage offers the following variations at your disposal: alert, confirm and message.

The subtypes of these message boxes are presented below. As you can see, the subtypes differ just by their apperance.

Read the chapter "Working with Message Boxes" to learn how to set one of the types (subtypes) or define your own one.

Alert Message Box

  • alert

  • alert-warning

  • alert-error

Confirm Message Box

  • confirm

  • confirm-warning

  • confirm-error

Message Box

Skins

The message boxes can be used with 3 different skins:

  • skyblue

Related sample: Skin dhx_skyblue

  • web

Related sample: Skin dhx_web

  • terrace

Related sample: Skin dhx_terrace

The skin is specified at the 'dhtmlxSuite' compilation stage.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Working with Message Boxes DHTMLX Docs

Documentation
  • Introduction
  • Working with Message Boxes
    • Included Files
    • Constructor
    • Usage Forms
    • Styling
    • Positioning
    • Hiding a Message Box with API
  • Message Boxes Description
  • FAQ
Start Helpers Message

Working with Message Boxes

Included Files

To use dhtmlxMessage you need to have dhtmlx.js and dhtmlx.css files included on the page.

dhtmlxMessage is a part of 'dhtmlxSuite' package and can't be used standalone

<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Constructor

There are 2 ways to initialize the helper:

  1. Common
    The type of the message box is specified through the parameter type.
    The default value is message.
    dhtmlx.message({
    type:"confirm-warning",
    text:"Are you sure you want to do it?"
});
  2. Message-related (applicable to alert and confirm boxes only).
    The type of the message is specified in the calling method.
    dhtmlx.confirm({
    title:"Confirm",
    text:"Continue?"
});
//or
dhtmlx.alert({
    title:"Alert",
    type:"alert-error",
    text:"You can't do this"
});

Related sample: Message

Usage Forms

The helper can be used in 2 forms:

  1. Short form (contains just the text of a message - implicit usage of the parameter 'text'. The other parameters take default values)
    dhtmlx.alert("some text");
  2. Full form (contains several available parameters. Non-specified parameters take default values)
    dhtmlx.alert({
      type:"alert-error",
      text:"some text",
      title:"Error!",
      ok:"Yes"
});

Styling

For any type of the message box you can define a custom style to achieve the desired look.

Generally, the appropriate css class is specified through the parameter type: you define a css class and set the parameter to its name.

While creating a css class, please, use the 'important' keyword to ensure correct processing.

There are some rules related to setting the 'type' parameter you should keep in mind:

  1. To set a css class for the alert and confirm boxes, you must initialize such a box using the 'window-related' way.
  2. To set a css class for the message boxes, you must initialize such a box using the 'common' way.
  3. The name of a css class should go with the 'dhtmlx-' prefix.
<style type="text/css">
.dhtmlx-myCss{
    font-weight:bold !important;
    color:white !important;
    background-color:red !important;
}
</style>
...
dhtmlx.message({ type:"myCss", text:"some text" });
//or
dhtmlx.confirm ({type:"myCss", text:"some text"});
//or
dhtmlx.alert ({type:"myCss", text:"some text"});

Positioning

Message Boxes

To position alert or confirm box, use the top, left properties of the object constructor:

dhtmlx.confirm({
    top:'10',
    left:'10',
    type:"confirm",
    text: "Continue?",
    callback: function(result){
        dhtmlx.message("Result: "+result);
    }
});

Info Boxes

To position an info box, use the property dhtmlx.message.position.

  • dhtmlx.message.position - ('top', 'bottom') sets the position of the info box(es) on a screen. The default value - 'top'.
    With the 'top' position specified, each next info box will be displayed below the previous one. With the 'bottom' position specified, each next info box will be displayed above the previous one.
dhtmlx.message.position="top";
dhtmlx.message("Your data has been successfully saved!");

Related sample: Message

If you want to get info box(es) left aligned, add the following style on the page:

<style>
.dhtmlx_message_area{
    left:5px;
    right:auto;
}
</style>

Hiding a Message Box with API

To hide the specified message box manually and not to wait while it hides automatically, you can use the dhtmlx.message.hide(boxId) method.

The method can't be used with dhtmlx.alert and dhtmlx.confirm

  • boxId - the box id specified in the box's constructor
dhtmlx.message({
    id:"myBox",
    text:"Page is loaded"
});
..
dhtmlx.message.hide("myBox");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Message Boxes Description DHTMLX Docs

Documentation
  • Introduction
  • Working with Message Boxes
  • Message Boxes Description
    • Alert Message Box
    • Confirm Message Box
    • Message Box
  • FAQ
Start Helpers Message

Message Boxes Description

Alert Message Box

Parameters

id | string|number | the message box's id
title | string | the text of the header (by default, 'alert')
type | string | the subtype of the window or a custom css class
text | string | the text of the message box's body
ok | string | the text of the 'Ok' button
callback | function | the function called on button click. Takes 'true' as the parameter
position | string | for now supports only one value - "top", any other value will result in center-align
width | string | the width of the modal box(e.g. "100px", "50%")
height | string | the height of the modal box

Full form

//common initialization
dhtmlx.message({
    title: "Close",
    type: "alert-warning",
    text: "You can't close this window!",
    callback: function() {dhtmlx.alert("Test alert");}
});
//message-related initialization
dhtmlx.alert({
    text: "Download is completed.",
    callback: function() {dhtmlx.alert("Test alert");}
});

Short form

dhtmlx.alert("someText");

Related sample: Alert

Confirm Message Box

Parameters

id | string|number | the message box's id
title | string | the text of the header (by default, 'confirm')
text | string | the text of the message box's body
type | string | the subtype of the window or a custom css class
callback | function | the function called on button click. Takes true or false as the parameter (subject to the clicked button)
cancel | string | the text of the 'Cancel' button
ok | string | the text of the 'Ok' button
position | string | for now supports only one value - "top", any other value will result in center-align
width | string | the width of the modal box(e.g. "100px", "50%")
height | string | the height of the modal box

Full form

//common initialization
dhtmlx.message({
    type:"confirm",
    text: "Continue?",
    callback: function() {dhtmlx.confirm("Test confirm");}
});
//message-related initialization
dhtmlx.confirm({
    title: "Close",
    type:"confirm-warning",
    text: "Are you sure you want to do it?",
    callback: function() {dhtmlx.confirm("Test confirm");}
});

Short form

dhtmlx.confirm("ConfirmText");

Related sample: Confirm

Message Box

Parameters

id | string|number | the instance's id
text | string | the text of the message box
expire | number | the time period after the end of which the message box disappears (in milliseconds)
type | string | defines a custom css class

Full form

dhtmlx.message({
    text:"An error has occured.<br /> Please, see the log file!",
    expire:1000,
    type:"customCss" // 'customCss' - css class
});

Short form

dhtmlx.message("Your data has been successfully saved!");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


FAQ DHTMLX Docs

Documentation
  • Introduction
  • Working with Message Boxes
  • Message Boxes Description
  • FAQ
    • How to position alert/confirm message box?
    • How to position message?
    • Can dhtmlxMessage work in the compatibility mode?
Start Helpers Message

FAQ

How to position alert/confirm message box?

Alert and confirm message boxes have the position "center" by default. One more option is to place these helpers at the top of the page. For this purpose, use the following property:

dhtmlx.message.position = "top";

The only possible value of the "position" property for alert and confirm is "top".

How to position message?

As for message, its default position is set by means of the property position and the default value is "top". Another possible value is "bottom".

If you want to get messages left aligned, add the following style on the page:

<style>
.dhtmlx_message_area{
    left:5px;
    right:auto;
}
</style>

Can dhtmlxMessage work in the compatibility mode?

No, it works only in the standard mode. Besides, dhtmlxMessage supports IE from version 7+.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Template DHTMLX Docs

Documentation
  • Ajax
  • Cell
  • Event
  • Message
  • Template
    • Template format
    • Using templates
    • Built-in functions
    • Function 'lowercase'
    • Function 'uppercase'
    • Function 'maxlength'
    • Function 'date'
    • Function 'number_format'
    • User defined function
    • Date Formatting
  • Common API
  • DataLoading API
Start Helpers

Template

dhtmlxTemplate is a component that allows using templates instead of fixed values. You may use string, date or number templates or create your own one.

dhtmlxTemplate presents a set of rules in some text. Various sets of values can be applied to this text. As a result, you get any number of the same texts that will differ by some dynamic parts. These parts will contain values processed according to the predefined rules.

Template format

#key|function:param:param#

key | key from json object, its value will be taken
function | (optional) parse value, using a built-in function or a user-defined one
param | (optional) a param for the function (there can be several params)

template examples:

#key#
#key|function#
#key|function:param#
#key|function:param:param#

Using templates

Here is a simple sample that describes how you can use templates:

// firstly, you need a string that contains a template
var str = "Hi! My name is #name# and I'm #age# years old";

// then you should specify values for the template
var values = {name: "James", age: 24};

// add a little bit of dhx magic
var text = window.dhx.template(str, values);

// and check the result
console.log(text); // Hi! My name is James and I'm 24 years old

The picture below illustrates how values are inserted instead of templates and a sentence is formed.

Built-in functions

There's also a possibility to use functions that let you apply various formatting to the text:

lowercase | used to convert characters to lower case
uppercase | used to convert characters to upper case
maxlength | used for limiting the count of characters in a text
date | used for dates formatting
number_format | used for number formatting

Function 'lowercase'

// describe a string with a template
var str = "#text# in lower case: #text|lowercase#";

// get values
var values = {text: "Some Text"};

// apply a template function
var text = window.dhx.template(str, values);

// check the result
console.log(text); // Some Text in the lower case: some text

Function 'uppercase'

// describe a string with a template
var str = "#text# in the upper case: #text|uppercase#";

// get values
var values = {text: "Some Text"};

// apply a template function
var text = window.dhx.template(str, values);

// check the result
console.log(text); // Some Text in the upper case: SOME TEXT

Function 'maxlength'

This function requires a parameter which will specify the count of characters

// describe a string with a template
var str = "10 characters of '#text#': '#text|maxlength:10#'";

// get values
var values = {text: "Some text is here"};

// apply a template function
var text = window.dhx.template(str, values);

// check the result
console.log(text); // 10 characters of 'Some text is here': 'Some text '

Function 'date'

This function requires a date format parameter, please check available settings here

// describe a string with a template
var str = "Current date/time: #value|date:%Y-%m-%d %H\\:%i#";

// get values
var values = {value: new Date()}; // or new Date().getTime()

// apply a template function
var text = window.dhx.template(str, values);

// check the result
console.log(text); // Current date/time: 2014-11-12 13:55

To escape a colon:

  • in HTML markup use a single backslash \
  • in javascript string use a double backslash \\

Function 'number_format'

This function requires a format, as well as the group_sep(opt) and dec_sep(opt) params

// describe a string with a template
var str = "Total amount: #value|number_format:$ 0,000.00#";

// get values
var values = {value: 12345.67};

// apply a template function
var text = window.dhx.template(str, values);

// check the result
console.log(text); // Total amount: $ 12,345.67

User defined function

// firstly, you need to name your function and add it into dhx.template
// assuming that our custom function will be called 'text_color' and will change text color
window.dhx.template.text_color = function(value, color){
    // the 1st param is always a value,
    // the 2nd and other params - any number of params that will be defined in the template,
    // we need only one param for a color
    return "<span style='color:"+color+";'>"+value+"</span>";
};

// then describe a string with a template
var str = "#value|text_color:red#";

// get values
var values = {value: "Important!"};

// apply a template function
var text = window.dhx.template(str, values);

// check the result
console.log(text); // <span style='color:red;'>Important!</span>

extend your function and add one more param:

// add your custom function into dhx.template
window.dhx.template.text_color = function(value, textColor, bgColor){
    return "<span style='color:"+textColor+"; background-color:"+bgColor+"'>"
      +value+"</span>";
};

// describe a string with a template
var str = "#value|text_color:red:black#";

// get values
var values = {value: "WOW!"};

// apply a template function
var text = window.dhx.template(str, values);

// check the result
console.log(text); // <span style='color:red; background-color:black'>WOW!</span>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Date Formatting DHTMLX Docs

Documentation
  • Date Formatting
    • Available Date Formats
Start Helpers Template

Date Formatting

You can configure the date format and language settings used for dates in dhtmlx components. There are just several steps to complete.

  • set the necessary language to be used for dates in the dateLang property:
window.dhx.dateLang = "en";
  • specify the names of days and months in the chosen language by means of the dateStrings property:
window.dhx.dateLang = "en";
window.dhx.dateStrings = {
    en: {
        monthFullName:  ["January","February","March","April","May","June","July",
                           "August","September","October","November","December"],
        monthShortName: ["Jan","Feb","Mar","Apr","May","Jun","Jul",
                           "Aug","Sep","Oct","Nov","Dec"],
        dayFullName:    ["Sunday","Monday","Tuesday","Wednesday","Thursday",
                           "Friday","Saturday"],
        dayShortName:   ["Su","Mo","Tu","We","Th","Fr","Sa"]
    }
};
  • define the desired date format in the dateFormat property:
window.dhx.dateLang = "en";
window.dhx.dateStrings = {
    en: {
        monthFullName:  ["January","February","March","April","May","June","July",
                           "August","September","October","November","December"],
        monthShortName: ["Jan","Feb","Mar","Apr","May","Jun","Jul",
                           "Aug","Sep","Oct","Nov","Dec"],
        dayFullName:    ["Sunday","Monday","Tuesday","Wednesday","Thursday",
                           "Friday","Saturday"],
        dayShortName:   ["Su","Mo","Tu","We","Th","Fr","Sa"]
    }
};
window.dhx.dateFormat = {                                                                   en: "%Y-%m-%d"                                                                      };
  • call the date2str() method to apply the settings to the date:
window.dhx.date2str(val, format);

where:

  • val - the date to be formatted;
  • format - the date format;

Available Date Formats

While specifying the format for dates you can use any character from the following list:

%d | day as a number with leading zero, 01..31
%j | day as a number, 1..31
%D | short name of the day, Su Mo Tu...
%l | full name of the day, Sunday Monday Tuesday...
%m | month as a number with leading zero, 01..12
%n | month as a number, 1..12
%M | short name of the month, Jan Feb Mar...
%F | full name of the month, January February March...
%y | year as a number, 2 digits
%Y | year as a number, 4 digits
%h | hours 12-format with leading zero, 01..12)
%g | hours 12-format, 1..12)
%H | hours 24-format with leading zero, 01..24
%G | hours 24-format, 1..24
%i | minutes with leading zero, 01..59
%s | seconds with leading zero, 01..59
%a | am or pm
%A | AM or PM
%% | escape for %
%u | milliseconds
%P | timezone offset
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Common API DHTMLX Docs

Documentation
  • Ajax
  • Cell
  • Event
  • Message
  • Template
  • Common API
    • Methods
    • Others
  • DataLoading API
Start Helpers

Common API

Methods
absLeft | returns left element position related to window
absTop | returns top element position related to window
attachEvent | adds any user-defined handler to available events
date2str | converts date into string
detachEvent | detaches a handler from an event
newId | returns (and reserves) next unique ID for any purposes
s2b | converts string to boolean and returns true|false (useful for XML)
s2j | converts string into JSON format
screenDim | returns top/bottom coords for visible screen area including scrolls
selectTextRange | selects text in input/textarea
str2date | converts string into date
trim | removes spaces in the beginning and end of string
Other
ajax | dhtmlx ajax module, please see dhtmlxAjax
dateFormat | defines the date format
dateLang | defines the language used for date
dateStrings | defines a set of strings used for weeks and months' names in the string format
isChrome | set to true if browser is Chrome
isEdge | set to true if browser is Edge
isFF | set to true if browser is Firefox
isIE | set to true if browser is Internet Explorer
isIE10 | set to true if browser is Internet Explorer 10
isIE11 | set to true if browser is Internet Explorer 11
isIE6 | set to true if browser is Internet Explorer 6
isIE7 | set to true if browser is Internet Explorer 7
isIE8 | set to true if browser is Internet Explorer 8
isIE9 | set to true if browser is Internet Explorer 9
isIPad | set to true if browser is Safari on IPad
isKHTML | set to true if browser is Konqueror
isOpera | set to true if browser is Opera
promise | an interface for working with Promise objects
version | version of dhtmlx library
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • absLeft
    • absTop
    • attachEvent
    • date2str
    • detachEvent
    • newId
    • s2b
    • s2j
    • screenDim
    • selectTextRange
    • str2date
    • trim
  • Others
Start Helpers Common API

Methods

absLeft | returns left element position related to window
absTop | returns top element position related to window
attachEvent | adds any user-defined handler to available events
date2str | converts date into string
detachEvent | detaches a handler from an event
newId | returns (and reserves) next unique ID for any purposes
s2b | converts string to boolean and returns true|false (useful for XML)
s2j | converts string into JSON format
screenDim | returns top/bottom coords for visible screen area including scrolls
selectTextRange | selects text in input/textarea
str2date | converts string into date
trim | removes spaces in the beginning and end of string
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


absLeft DHTMLX Docs

Documentation
  • absLeft
  • absTop
  • attachEvent
  • date2str
  • detachEvent
  • newId
  • s2b
  • s2j
  • screenDim
  • selectTextRange
  • str2date
  • trim
Start Helpers Common API Methods

absLeft

returns left element position related to window

number absLeft(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object or id

Returns

number left element position

Example

var t = document.getElementById("someId");
var x = window.dhx.absLeft(t);

// or
var x = window.dhx.absLeft("someId");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


absTop DHTMLX Docs

Documentation
  • absLeft
  • absTop
  • attachEvent
  • date2str
  • detachEvent
  • newId
  • s2b
  • s2j
  • screenDim
  • selectTextRange
  • str2date
  • trim
Start Helpers Common API Methods

absTop

returns top element position related to window

number absTop(string|number|HTMLElement obj);

Parameters

obj string|number|HTMLElement object or id

Returns

number top element position

Example

var t = document.getElementById("someId");
var y = window.dhx.absTop(t);

// or
var y = window.dhx.absTop("someId");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


attachEvent DHTMLX Docs

Documentation
  • absLeft
  • absTop
  • attachEvent
  • date2str
  • detachEvent
  • newId
  • s2b
  • s2j
  • screenDim
  • selectTextRange
  • str2date
  • trim
Start Helpers Common API Methods

attachEvent

adds any user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name | string | name of the event
handler | function | user-defined event handler

Returns

number internal event id, you can use it for detachEvent(id)

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Details
  • several handlers can be attached to one and the same event, and all of them will be executed
  • event names are case-insensitive
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


date2str DHTMLX Docs

Documentation
  • absLeft
  • absTop
  • attachEvent
  • date2str
  • detachEvent
  • newId
  • s2b
  • s2j
  • screenDim
  • selectTextRange
  • str2date
  • trim
Start Helpers Common API Methods

date2str

converts date into string

string date2str(string val,string format);

Parameters

val | string | the date
format | string | the date format

Returns

string the date as a string

Example

window.dhx.date2str(val, format);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


detachEvent DHTMLX Docs

Documentation
  • absLeft
  • absTop
  • attachEvent
  • date2str
  • detachEvent
  • newId
  • s2b
  • s2j
  • screenDim
  • selectTextRange
  • str2date
  • trim
Start Helpers Common API Methods

detachEvent

detaches a handler from an event

void detachEvent(number id);

Parameters

id number internal event id, returned by attachEvent()

Example

// attach event
var evId = myComponent.attachEvent("eventName", function(){
    // your code here
});

// detach event
myComponent.detachEvent(evId);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


newId DHTMLX Docs

Documentation
  • absLeft
  • absTop
  • attachEvent
  • date2str
  • detachEvent
  • newId
  • s2b
  • s2j
  • screenDim
  • selectTextRange
  • str2date
  • trim
Start Helpers Common API Methods

newId

returns (and reserves) next unique ID for any purposes

number newId();

Returns

number id

Example

var data = {};
data[window.dhx.newId()] = {
    param: "value",
    param2: "value2"
};

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


s2b DHTMLX Docs

Documentation
  • absLeft
  • absTop
  • attachEvent
  • date2str
  • detachEvent
  • newId
  • s2b
  • s2j
  • screenDim
  • selectTextRange
  • str2date
  • trim
Start Helpers Common API Methods

s2b

converts string to boolean and returns true|false (useful for XML)

boolean s2b(string|number|boolean value);

Parameters

value string|number|boolean value to test

Returns

boolean true for: true, 1, "true", "1", "yes", "y"

Example

var t = window.dhx.s2b("yes"); // returns true

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


s2j DHTMLX Docs

Documentation
  • absLeft
  • absTop
  • attachEvent
  • date2str
  • detachEvent
  • newId
  • s2b
  • s2j
  • screenDim
  • selectTextRange
  • str2date
  • trim
Start Helpers Common API Methods

s2j

converts string into JSON format

string s2j(string str);

Parameters

str string string to convert

Returns

string string in JSON format

Example

var t = window.dhx.s2j('{my_key: "my_value"}');
console.log(t.my_key); // my_value

Details

It can be used for parsing server responses:

<?php
// server side
if (isset($_REQUEST["action"]) && $_REQUEST["action"] == "aboutMe") {
    print_r('{name: "James", age: 26, role: "Site Admin"}');
}
?>

// client side
window.dhx.ajax.get("server.php?action=aboutMe", function(r){
    var t = window.dhx.s2j(r.xmlDoc.responseText);
    if (t != null) {
        for (var a in t) console.log(a+": "+t[a]);
    } else {
        dhtmlx.message({type: "error", text: "...."});
    }
});

the result will be:
name: James
age: 26
role: Site Admin

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


screenDim DHTMLX Docs

Documentation
  • absLeft
  • absTop
  • attachEvent
  • date2str
  • detachEvent
  • newId
  • s2b
  • s2j
  • screenDim
  • selectTextRange
  • str2date
  • trim
Start Helpers Common API Methods

screenDim

returns top/bottom coords for visible screen area including scrolls

object screenDim();

Returns

object top and bottom coords

Example

// necessary to show div under input,
// if no space at bottom - over input
// assuming div.style.position = "absolute"

// your custom div used as popup for input
var div = document.getElementById("customDivId");

// your custom input
var input = document.getElementById("customInputId");

// get screen res
var dim = window.dhx.screenDim(); // dim = {top: some_value, bottom: some_value}

// 1st attempt, show under
var inputY = window.dhx.absTop(input);
var divY = inputY+input.offsetTop;

// check if space at bottom not allowed to insert div
if (divY + div.offsetHeight > dim.bottom) {
    divY = inputY-div.offsetHeight;
    // extra check
    if (divY < dim.top) {
        // ooops! small page height
        // here you need to choose "smallest evil"
    }
}

// finally
div.style.top = divY+"px";
div.style.width = input.offsetWidth+"px";

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


selectTextRange DHTMLX Docs

Documentation
  • absLeft
  • absTop
  • attachEvent
  • date2str
  • detachEvent
  • newId
  • s2b
  • s2j
  • screenDim
  • selectTextRange
  • str2date
  • trim
Start Helpers Common API Methods

selectTextRange

selects text in input/textarea

void selectTextRange(string|number|HTMLElement inp,number start,number end);

Parameters

inp | string|number|HTMLElement | id or object
start | number | start position
end | number | end position

Example

var input = document.getElementById("someInputId");
window.dhx.selectTextRange(input, 0, input.value.length-1);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


str2date DHTMLX Docs

Documentation
  • absLeft
  • absTop
  • attachEvent
  • date2str
  • detachEvent
  • newId
  • s2b
  • s2j
  • screenDim
  • selectTextRange
  • str2date
  • trim
Start Helpers Common API Methods

str2date

converts string into date

string str2date(string val,string format);

Parameters

val | string | the string
format | string | the string format

Returns

string the date

Example

window.dhx.str2date(val, format);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


trim DHTMLX Docs

Documentation
  • absLeft
  • absTop
  • attachEvent
  • date2str
  • detachEvent
  • newId
  • s2b
  • s2j
  • screenDim
  • selectTextRange
  • str2date
  • trim
Start Helpers Common API Methods

trim

removes spaces in the beginning and end of string

string trim(string str);

Parameters

str string string to trim

Returns

string string w/o spaces in the beginning and end of string

Example

var firstName = window.dhx.trim("  John Black "); // firstName = "John Black";

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Others DHTMLX Docs

Documentation
  • Methods
  • Others
    • ajax
    • dateFormat
    • dateLang
    • dateStrings
    • isChrome
    • isEdge
    • isFF
    • isIE
    • isIE10
    • isIE11
    • isIE6
    • isIE7
    • isIE8
    • isIE9
    • isIPad
    • isKHTML
    • isOpera
    • promise
    • version
Start Helpers Common API

Others

ajax | dhtmlx ajax module, please see dhtmlxAjax
dateFormat | defines the date format
dateLang | defines the language used for date
dateStrings | defines a set of strings used for weeks and months' names in the string format
isChrome | set to true if browser is Chrome
isEdge | set to true if browser is Edge
isFF | set to true if browser is Firefox
isIE | set to true if browser is Internet Explorer
isIE10 | set to true if browser is Internet Explorer 10
isIE11 | set to true if browser is Internet Explorer 11
isIE6 | set to true if browser is Internet Explorer 6
isIE7 | set to true if browser is Internet Explorer 7
isIE8 | set to true if browser is Internet Explorer 8
isIE9 | set to true if browser is Internet Explorer 9
isIPad | set to true if browser is Safari on IPad
isKHTML | set to true if browser is Konqueror
isOpera | set to true if browser is Opera
promise | an interface for working with Promise objects
version | version of dhtmlx library
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ajax DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

ajax

dhtmlx ajax module, please see dhtmlxAjax

ajax;

Example

window.dhx.ajax.get("url", function(){
    // callback
});

// the same
dhtmlxAjax.get("url", function(){
    // callback
});

See also
  • Articles
    • Ajax
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


dateFormat DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

dateFormat

defines the date format

dateFormat;

Example

window.dhx.dateFormat = {
    en: "%Y-%m-%d"
};

Details

While specifying the format for dates you can use any character from the following list:

%d | day as a number with leading zero, 01..31
%j | day as a number, 1..31
%D | short name of the day, Su Mo Tu...
%l | full name of the day, Sunday Monday Tuesday...
%m | month as a number with leading zero, 01..12
%n | month as a number, 1..12
%M | short name of the month, Jan Feb Mar...
%F | full name of the month, January February March...
%y | year as a number, 2 digits
%Y | year as a number, 4 digits
%h | hours 12-format with leading zero, 01..12)
%g | hours 12-format, 1..12)
%H | hours 24-format with leading zero, 01..24
%G | hours 24-format, 1..24
%i | minutes with leading zero, 01..59
%s | seconds with leading zero, 01..59
%a | am or pm
%A | AM or PM
%% | escape for %
%u | milliseconds
%P | timezone offset
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dateLang DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

dateLang

defines the language used for date

dateLang;

Example

window.dhx.dateLang = "en";

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dateStrings DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

dateStrings

defines a set of strings used for weeks and months' names in the string format

dateStrings;

Example

window.dhx.dateStrings = {
    en: {
        monthFullName:  ["January","February","March","April","May","June","July",
                           "August","September","October","November","December"],
        monthShortName: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug",
                            "Sep","Oct","Nov","Dec"],
        dayFullName:    ["Sunday","Monday","Tuesday","Wednesday","Thursday",
                            "Friday","Saturday"],
        dayShortName:   ["Su","Mo","Tu","We","Th","Fr","Sa"]
    }
};

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isChrome DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

isChrome

set to true if browser is Chrome

isChrome;

Example

if (window.dhx.isChrome) {
    // your code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isEdge DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

isEdge

set to true if browser is Edge

isEdge;

Example

if (window.dhx.isEdge) {
    // your code
}

Change log

added in version 4.4

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isFF DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

isFF

set to true if browser is Firefox

isFF;

Example

if (window.dhx.isFF) {
    // your code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isIE DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

isIE

set to true if browser is Internet Explorer

isIE;

Example

if (window.dhx.isIE) {
    // your code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isIE10 DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

isIE10

set to true if browser is Internet Explorer 10

isIE10;

Example

if (window.dhx.isIE10) {
    // your code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isIE11 DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

isIE11

set to true if browser is Internet Explorer 11

isIE11;

Example

if (window.dhx.isIE11) {
    // your code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isIE6 DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

isIE6

set to true if browser is Internet Explorer 6

isIE6;

Example

if (window.dhx.isIE6) {
    // your code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isIE7 DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

isIE7

set to true if browser is Internet Explorer 7

isIE7;

Example

if (window.dhx.isIE7) {
    // your code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isIE8 DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

isIE8

set to true if browser is Internet Explorer 8

isIE8;

Example

if (window.dhx.isIE8) {
    // your code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isIE9 DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

isIE9

set to true if browser is Internet Explorer 9

isIE9;

Example

if (window.dhx.isIE9) {
    // your code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isIPad DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

isIPad

set to true if browser is Safari on IPad

isIPad;

Example

if (window.dhx.isIPad) {
    // your code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isKHTML DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

isKHTML

set to true if browser is Konqueror

isKHTML;

Example

if (window.dhx.isKHTML) {
    // your code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


isOpera DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

isOpera

set to true if browser is Opera

isOpera;

Example

if (window.dhx.isOpera) {
    // your code
}

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


promise DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

promise

an interface for working with Promise objects

object promise;

Example

first = dhx.ajax("someA.php");
second = dhx.ajax("someB.php");
third = dhx.ajax("someC.php");

dhx.promise.all([first, second, third]).then(function(results){
    var first_result = results[0];
    var second_result = results[1];
    var third_result = results[2];
    // do something
    ...
});

Details

dhx.promise constructor

var my_promise = new dhx.promise(function(success, fail){
    dhx.ajax("some.php", function(text){
        if (text) success(text);
        else fail(text.error)
    });
});

//realdata - data that came from server
my_promise.then(function(realdata){
    ...
});
See also
  • Articles
    • Promise API for Ajax requests
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


version DHTMLX Docs

Documentation
  • ajax
  • dateFormat
  • dateLang
  • dateStrings
  • isChrome
  • isEdge
  • isFF
  • isIE
  • isIE10
  • isIE11
  • isIE6
  • isIE7
  • isIE8
  • isIE9
  • isIPad
  • isKHTML
  • isOpera
  • promise
  • version
Start Helpers Common API Others

version

version of dhtmlx library

version;

Example

console.log(window.dhx.version); // outputs: 4.0

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataLoading API DHTMLX Docs

Documentation
  • Ajax
  • Cell
  • Event
  • Message
  • Template
  • Common API
  • DataLoading API
    • Methods
    • Events
Start Helpers

DataLoading API

Methods
load | loads data to the component via XML or JSON, usually data-values pairs
loadStruct | loads data to the component via XML or JSON, usually component config
Events
onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • load
    • loadStruct
  • Events
Start Helpers DataLoading API

Methods

load | loads data to the component via XML or JSON, usually data-values pairs
loadStruct | loads data to the component via XML or JSON, usually component config
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


load DHTMLX Docs

Documentation
  • load
  • loadStruct
Start Helpers DataLoading API Methods

load

loads data to the component via XML or JSON, usually data-values pairs

promise load(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.load({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.load('<data><node id="a1".../></data>');

// json/xml from server
myComponent.load("server/data.xml");

// local json/xml with callback
myComponent.load({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.load('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.load("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.load(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure the response has the header "Content-Type: text/xml" for the XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


loadStruct DHTMLX Docs

Documentation
  • load
  • loadStruct
Start Helpers DataLoading API Methods

loadStruct

loads data to the component via XML or JSON, usually component config

promise loadStruct(string|object data, [function doOnLoad] );

Parameters

data | string|object | XML|JSON URL|string|object
doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered

Returns

promise a "promise" object

Example

var myComponent = new dhtmlXComponent();

// local json/xml object
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]});

// local json/xml string
myComponent.loadStruct('<data><node id="a1".../></data>');

// json/xml from server
myComponent.loadStruct("server/data.xml");

// local json/xml with callback
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]}, function(){
    // data loaded and rendered
    // your code here
});

// local json/xml string with callback
myComponent.loadStruct('<data><node id="a1".../></data>', function(){
    // data loaded and rendered
    // your code here
});

// json/xml from server with callback
myComponent.loadStruct("server/data.xml", function(){
    // data loaded and rendered
    // your code here
});

// returns a "promise" object, see details
myComponent.loadStruct(url).then(function(text){
    // text - a server side response
});

Details

The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.

In the case of loading config from server:

  • async POST request will be performed (that's why you need callback)
    (to use GET instead of POST set dhx.ajax.method = "get", please check details here)
  • to prevent caching in some browsers an extra param like "dhxr0123456789" will be added
    (to disable the extra param set dhx.ajax.cache = true, please check details here)
  • callback order: onXLS event => [request] => onXLE event => doOnLoad()
  • make sure response has the header "Content-Type: text/xml" for XML mode

DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.

Change log
  • added in 4.0
  • integration with Promiz.js is added in version 5.1
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onXLE
    • onXLS
Start Helpers DataLoading API

Events

onXLE | fires when the data loading is finished and a component or data is rendered
onXLS | fires when XML loading started
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLE DHTMLX Docs

Documentation
  • onXLE
  • onXLS
Start Helpers DataLoading API Events

onXLE

fires when the data loading is finished and a component or data is rendered

void onXLE(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onXLS DHTMLX Docs

Documentation
  • onXLE
  • onXLS
Start Helpers DataLoading API Events

onXLS

fires when XML loading started

void onXLS(){ ... };

Example

var myComponent = new dhtmlXComponent();

myComponent.attachEvent("onXLS", function(){
    // before loading started
    // your code here
});

myComponent.attachEvent("onXLE", function(){
    // after loading ended and data rendered (before user's callback)
    // your code here
});

function doOnLoad() {
    // callback, optional
    // called after loading ended and data rendered (after onXLE)
};

myComponent.load("server/data.json", doOnLoad);

// or
myComponent.loadStruct("server/config.json", doOnLoad);

Details

used in load() and loadStruct()

load() usually loads data into component (for example menu or grid rows)

loadStruct() usually loads data to init component (for example tabs config for tabbar)

callback order: onXLS event => [request] => onXLE event => doOnLoad()

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Guides DHTMLX Docs

Documentation
  • Guides
    • DHTMLX Package Structure
    • DHTMLX Coding Principles
    • Using libCompiler
    • Creating a Demo for Support
    • Using DHTMLX with TypeScript
Start

Guides

This chapter is dedicated to main concepts and techniques of building web applications with DHTMLX library.

It gives useful recommendations on how to organize your work most efficiently: starting from basics such as learning the DHTMLX package structure and ending with tips on costructing a demo to get a quick help from support.

Besides, the chapter describes common principles of developing typical of all the large family of DHTMLX components.

Basic Concepts

  • DHTMLX Package Structure
  • DHTMLX Coding Principles
  • Using libCompiler
  • Creating a Demo for Support

Integration

  • Using DHTMLX with TypeScript
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DHTMLX Package Structure DHTMLX Docs

Documentation
  • DHTMLX Package Structure
    • Package
    • Support
    • Required Source Files
    • Minimal init code
  • DHTMLX Coding Principles
  • Using libCompiler
  • Creating a Demo for Support
  • Using DHTMLX with TypeScript
Start Guides

DHTMLX Package Structure

DHTMLX is a Javascript library that delivers more than 20 different components. Each component can be used standalone or as a part of the common package.

Package

To start working with the library you need to download the dhtmlxSuite package that contains source files of the components.

The package contains the following folders and files:

  • codebase - the packed code files of the library. These files have much smaller size and intended for use in production. In your apps you need to use files from this folder:

    • ext - a folder which contains extension resources for Upload control of the Form component;
    • thirdparty - a folder that includes third-party libraries for correct work of the Chart component;
    • imgs - a folder with source images required for correct rendering of components;
    • dhtmlx.js - a script file;
    • dhtmlx.css - a style file;
    • dhtmlx_deprecated.js - a file which stores the API deprecated from previous versions;
    • dhtmlx.d.ts - a file with TypeScript definitions for all DHTMLX components.

  • docs - a folder with documentation files. Run the index.html file resided in the folder to read the documentation of the library's components;

  • samples - the code samples;
  • skins - a folder with available skins;
  • sources - the source code files of the library. The files are not minified and easy-to-read. The package is mostly intended to be used for component's debugging:
    • libCompiler - a tool that allows you to compile multiple source files of individual components into single scripts (more details);
    • dhtmlxWindows ... dhtmlxAccordion - folders with source files of individual components;
  • License_gpl_2.0 - a txt file which contains the text of General Public License v2.0.

Support

To help you while working with the library, we provide a number of support resources such as:

  1. Documentation.
    You can access the documentation locally or online.
    • To read the documentation locally, run the index.html file resided in the root folder of the DHTMLX Suite package.
    • To read the documentation online, visit this page.
      Note, online documentation is more actual and complete than the one supplied with the package.
  2. Demos.
    • See a big number of samples at here
  3. Forum.
    • Use the DHTMLX forum to find answers to your questions and share your experience. The forum is available at forum.dhtmlx.com.
  4. Members support for licensed customers.
    • If you are a licensed customer with an active support subscription, you can submit a ticket to get assistance from our team. Visit this page to know more abour members support center.

Required Source Files

The DHTMLX library includes the following source resources:

  1. dhtmlx.js file - a script file
  2. dhtmlx.css file - a style file
  3. imgs folder - a folder with source images required for correct rendering of components.

So, to start working with the DHTMLX library, you need to:

  1. Download the "dhtmlxSuite" package (link to download).
  2. Find the "dhtmlx_std_full.zip " archive in the root of the package and extract its content to a directory on your local web server (you are creating a web application and the availability of a web server is mandatory).
  3. Create an HTML file for your future app in the root folder of your directory.
    So, the final structure of your directory should look something like this:

    [yourDirectory]
    [codebase]
        [imgs]
        dhtmlx.js
        dhtmlx.css
    index.html                  //an HTML file where you need to build your app
    4. You may also find the types folder in the "dhtmlx_std_full.zip " archive. It's used for working with the DataView component. But as in general case we don't need this folder, we have removed it from the directory.

Files Size

Don't be confused with the size of the script file, which is ~ 1 Mb.

  1. Firstly, it contains the entire functionality for more than 20 components. When it comes to the release, you will be able to recompile the file using the special tool - libCompiler - and to leave just functionality of the necessary components.
  2. All modern browsers support operating with the packed scripts. For example, in the "gzip" format, the maximum bundle weight of the file is less than 200 Kbyts. So, browsers will successfully cache it as well as any external content.

Minimal init code

Below you can see a sample of a basic DHTMLX-based app that produces a 3-cell layout of 600px*400px.

index.html file

<!DOCTYPE html>
<html>
<head>
    <title>My First Application</title>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">      <script src="codebase/dhtmlx.js" type="text/javascript"></script>       <div id="box" style="width: 600px; height: 400px;"></div>
    <script>
        dhxLayout = new dhtmlXLayoutObject("box", "3L");
    </script>
</head>
<body>

</body>
</html>

What's next?

Now, we recommend you to read the Building Web Interfaces article to get acquainted with the basics of building web interfaces with the help of the DHTMLX library.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DHTMLX Coding Principles DHTMLX Docs

Documentation
  • DHTMLX Package Structure
  • DHTMLX Coding Principles
    • Positioning components on the page
    • Initializing components
    • Handling events
    • Setting global parameters
  • Using libCompiler
  • Creating a Demo for Support
  • Using DHTMLX with TypeScript
Start Guides

DHTMLX Coding Principles

This article describes different ways to organize and design the user interface for your app.

Positioning components on the page

Actually, to structure a page you can use usual HTML and place components into specified HTML elements. It will work well if you need to have a few components on the page.

Attaching DHTMLX components to HTML elements on the page

<div id="mygrid_box" style="width:600px; height:160px;float:left;"></div>
<div id="myform_box" style="width:350px; height:160px; padding-left:10px;"></div>

<script>
    var mygrid = new dhtmlXGridObject("mygrid_box");   // initializes a grid in DIV
    var myform = new dhtmlXForm("myform_box");         // initializes a form in DIV
</script>

But if the amount of components is rather big, we recommend using special layout components of the DHTMLX library to design the page:

  1. dhtmlxLayout - arranges the content in columns and rows where after you can place different components, including another dhtmlxLayout objects.
  2. dhtmlxAccordion - presents the content in multiple horizontal or vertical panes.
  3. dhtmlxTabbar - presents a navigation tab panel that keeps a set of views and displays one view at a time.
Layout | Accordion | Tabbar

The main of them is dhtmlxLayout using which you can define any structure for the page. Hereafter we will talk about it in detail. The use of other components you can find in the related documentation (dhtmlxAccordion documentation, dhtmlxTabbar documentation).

Using dhtmlxLayout

dhtmlxLayout allows you to arrange the content in any desirable number of columns and rows. There is a big number of predefined patterns. Moreover, you can insert layouts into each other to create really complex structures. As for menu and toolbar, you can add them both to the whole layout and to a specific cell.

So, you place layout(s) on the page and then allocate DHTMLX components, HTML objects, etc. in the created cells:

Attaching a DHTMLX component to a layout's cell

myLayout = new dhtmlXLayout(document.body,"4I"); myGrid = myLayout.cells("a").attachGrid();

The dhtmlXLayout() constructor takes 2 parameters:

  1. An HTML container for the layout.
  2. The layout's pattern.

Referring to layout's cells

To refer to a layout's cell, the cells method is used. The method takes the cell id as a parameter and returns the cell object.

By default, cells have 1-letter ids taken in the alphabetical order from left to right, from top to bottom: "a", "b", "c" and so further.

myLayout = new dhtmlXLayout(document.body,"4I"); var cellA = myLayout.cells("a");

Attaching content to layout's cells

Detailed information about the types of content you can attach to cells and the ways that you can do this is given in the article Attaching Components.

Nesting layouts into each other

If none of the predefined layout patterns fits you, you can create any structure by inserting layouts into each other.

For example:

dhxLayout = new dhtmlXLayoutObject("parentId", "3J");

dhxLayout.cells("b").hideHeader();
dhxLayout.cells("b").attachLayout("3E");

As a result, you will get a combination of two layout patterns:

Initializing components

There are 2 ways to initialize any component of the library:

  1. In an HTML element.
  2. In a cell of a layout component (dhtmlxLayout, dhtmlxAccordion, etc.).

Initializing a DHTMLX component in an HTML element

It's a common way of initialization, components are initialized through the constructor function.

Initializing a grid

<div id="box" style="width: 600px; height: 400px;"></div>

<script>
myGrid = new dhtmlXGridObject("box");
</script>
  • The names of all constructors coincide with the names of components.
  • The constructors take different parameters (depending on a component) but one of parameters is a constant - an HTML container (or its id) where a component's instance will be created.
  • Some components allow changing the parent HTML item after initialization. Another way to relocate a component on the page is to relocate its HTML container.

Initializing a DHTMLX component in a cell of a layout component

To initialize DHTMLX components in a specific cell of a layout component, you need to use the attach[componentName] methods.

Generally, such methods look like this: layout.cells("cell_id").attach[componentName]:

myAccordion = new dhtmlXAccordion(document.body);
myGrid = myAccordion.cells("a").attachGrid();

The way is similar to the previous one with the only difference - instead of a constructor function you need to write the 'attach' method of a layout (or more exactly, the method of a separate layout cell). As a result, the component is initialized directly in the appropriate cell.

Handling events

To attach an event handler to any DHTMLX component, you need to use the attachEvent method as in:

componentObj.attachEvent("onSomeEvent", function (){
    // handler code
});

The method takes 2 parameters:

  • name - (string) the event name.
  • handler - (function) the handler function.

Handler functions take different parameters depending on the attached events.

var myGrid = new dhtmlXGridObject('gridbox');
myGrid.attachEvent("onRowSelect",function(rowId,cellInd){
   alert("The row "+ rowId +" is selected. The cell "+ cellInd +" is clicked.")
});

You can find the full list of events and detailed information about their parameters in the "API Reference" chapter of the related component documentation.

Setting global parameters

There are some parameters which can be set for all components on the page at once. Currently, they are:

  1. The skin's name.
  2. The relative path to the source images (relative to your HTML file).
dhtmlx.skin = "dhx_terrace"; // sets the "dhx_terrace" skin for components on the page
// indicates that source images for components are in the directory "./codebase/imgs"
dhtmlx.image_path = "codebase/imgs/";

The lines above set the "dhx_terrace" skin and specify the path to the source images for all the components on the page.

If these properties are set for concrete objects later, they will have a higher priority status.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Using libCompiler DHTMLX Docs

Documentation
  • DHTMLX Package Structure
  • DHTMLX Coding Principles
  • Using libCompiler
    • Compiling a package
    • Compiling a debug package
    • Compiling in Linux
    • Making changes in the Suite
    • Selecting necessary files
  • Creating a Demo for Support
  • Using DHTMLX with TypeScript
Start Guides

Using libCompiler

LibCompiler is a special tool that makes the process of compiling a package easier and handier.

Compiling a package

When you download a package, e.g. dhtmlxSuite_v40_pro.zip, and unpack it, you get the following directory structure:

  • the codebase directory contains compiled files,
  • the docs directory includes link to the documentation,
  • the samples directory stores examples,
  • the skins directory keeps files for skins,
  • finally, the sources directory contains the library’s source files and the very libCompiler which all of you like so much.

In order for libCompiler to work you need:

  1. installed jre to run yui.jar
  2. installed php to run scripts
  3. the directories of source files

First configuration

Open the file compile.bat in a text editor:

In line 5 change the path c:\path_to_php_dir\ for the path to the directory where php is installed, e.g. C:\WebServers\PHP5. In general case the result will look like this:

That’s all, now you can run the compile.bat file. Pay attention that it’ll rewrite js/css files and images in the codebase directory.

Delete the content of the codebase directory: all files and subfolders (not the directory itself!). Then libCompiler will create the necessary subdirectories and write the needed files.

The result of the compile.bat file execution is given below:

Compiling a debug package

Reproduce all the steps from the Part 1 with the file compile_debug.bat. This file will make the same compilation, as in the part 1 and create the dhtmlx_debug.js file additionally.

Run the compile_debug.bat file and when its execution finishes, the file dhtmlx_debug.js will appear in the codebase directory.

The result of file execution (pay attention to dhtmlx_debug.js in logs):

The same result but from the file system side:

The dhtmlx_debug.js file has the same components while the markup is preserved, which is rather handy during the debugging.

Compiling in Linux

The process is almost the same as for Windows. You need PHP and JRE installed, go to sources/libCompiler dir and exec from the command line:

php lib_compiler.php

or for debug version

php lib_compiler.php --debug=true

If your environment doesn't have a public path to java, edit lib_compiler.php and change the path to java:

$compiler = "java -jar yui.jar";

Also you need r/w access for codebase and skins dirs.

Making changes in the Suite

If you need to recompile dhtmlx.js with a custom code:

1) edit/update the corresponding file in the sources folder
2) run compile.bat (or compile_debug.bat)

libCompiler will recompile dhtmlx.js and dhtmlx.css files with your changes.

Selecting necessary files

You can also create a custom compilation, by removing unused components from single dhtmlx.js/css

1) edit /sources/libCompiler/conf/stat_js and remove all unused components' js files from it
2) edit /sources/libCompiler/conf/stat_css and remove all unused components' css files from it
3) recompile suite and use target dhtmlx.js/css files

dhtmlxcommon.js is required always;
dhtmlxcore.js is required for chart and dataview;
dhtmlxcontainer.js is required for tabbar, layout, accordion and windows.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Creating a Demo for Support DHTMLX Docs

Documentation
  • DHTMLX Package Structure
  • DHTMLX Coding Principles
  • Using libCompiler
  • Creating a Demo for Support
  • Using DHTMLX with TypeScript
Start Guides

Creating a Demo for Support

This article covers the process of creating a demo for a support request.

If your request is supplied with a demo - your problem will be certainly solved in shorter time.
We really want to help you but we need a demo to reproduce the issue.

Your demo must include:

  • CSS, JS files used in your app.
  • Test data, images and other static data used in your app.
  • Code that contains the issue. Remember, your final demo must run on a 3rd party computer.

5 steps to create a demo:
  1. Create a folder with the name that somehow relates to the issue (e.g. "my_demo ") in the root directory of your local web server.
  2. Create a subfolder with the name "codebase " and place source DHTMLX files and all other css/js files used in your app there.
  3. If you use data files in your app, create a subfolder with the name "data " and place the files there.
  4. If you use image files in your app, create a subfolder with the name "images " and place images there.
  5. Create the "index.html " file in the "my_demo " folder and fill it in with your code that causes the problem.
We really appreciate if you help us to find and solve your problem faster.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Using DHTMLX with TypeScript DHTMLX Docs

Documentation
  • DHTMLX Package Structure
  • DHTMLX Coding Principles
  • Using libCompiler
  • Creating a Demo for Support
  • Using DHTMLX with TypeScript
    • TypeScript Benefits
    • Creating a Standalone TypeScript App
    • Creating a TypeScript App with DHTMLX Optimus
Start Guides

Using DHTMLX with TypeScript

With DHTMLX of version 5.1 and higher, you can initialize and work with DHTMLX components from TypeScript.

The library package includes the codebase/dhtmlx.d.ts file which contains TypeScript definitions for all components of DHTMLX Suite. As for dhtmlxGantt and dhtmlxScheduler, they possess their own TypeScript definitions:

  • Gantt TypeScript definitions
  • Scheduler TypeScript definitions

TypeScript Benefits

Why do you need to use DHTMLX with TypeScript?

Firstly, it is quite obvious that by checking the types, you will write a more stable code.

One more important advantage is that all modern IDE will provide suggestions and type checking for your code created with DHTMLX.

Creating a Standalone TypeScript App

To use TypeScript, you need to configure a toolchain which will compile ts files into a regular JavaScript. There are a lot of ways to do it, you can choose any of them.

To simplify your work, we provide a simple project starter which contains everything you need to work with TypeScript: a Typescript package to compile typescript files into JavaScript and Webpack to bundle all files in the final app.

You need just grab the starter - this is a bootstrap for DHTMLX-based apps with TypeScript support.

After unzipping the archive, run the following commands to start the project:

npm install
npm run server

Creating a TypeScript App with DHTMLX Optimus

DHTMLX Optimus is a micro framework for organizing DHTMLX-based apps.

By default Optimus uses modern JavaScript (ES6), but it can work equally well with TypeScript.

To estimate the possibilities of this integration, you can grab the latest copy of a starter project for Optimus-Typescript-based apps. Then you can run it by using standard commands:

npm install
npm run server

Optimus-TypeScript integration doesn't require any changes in the API and usage principles in comparison to the vanilla version of DHTMLX Optimus.

As you can see, in the case of combination with TypeScript, the app uses a bit different toolchain and files extensions in sources are changed to .ts, all the rest is the same. The code of views doesn't differ from that of normal JavaScript, except for added typings.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Using libCompiler DHTMLX Docs

Documentation
  • Using libCompiler
    • Compiling a package
    • Compiling a debug package
    • Compiling in Linux
    • Making changes in the Suite
    • Selecting necessary files
Start

Using libCompiler

LibCompiler is a special tool that makes the process of compiling a package easier and handier.

Compiling a package

When you download a package, e.g. dhtmlxSuite_v40_pro.zip, and unpack it, you get the following directory structure:

  • the codebase directory contains compiled files,
  • the docs directory includes link to the documentation,
  • the samples directory stores examples,
  • the skins directory keeps files for skins,
  • finally, the sources directory contains the library’s source files and the very libCompiler which all of you like so much.

In order for libCompiler to work you need:

  1. installed jre to run yui.jar
  2. installed php to run scripts
  3. the directories of source files

First configuration

Open the file compile.bat in a text editor:

In line 5 change the path c:\path_to_php_dir\ for the path to the directory where php is installed, e.g. C:\WebServers\PHP5. In general case the result will look like this:

That’s all, now you can run the compile.bat file. Pay attention that it’ll rewrite js/css files and images in the codebase directory.

Delete the content of the codebase directory: all files and subfolders (not the directory itself!). Then libCompiler will create the necessary subdirectories and write the needed files.

The result of the compile.bat file execution is given below:

Compiling a debug package

Reproduce all the steps from the Part 1 with the file compile_debug.bat. This file will make the same compilation, as in the part 1 and create the dhtmlx_debug.js file additionally.

Run the compile_debug.bat file and when its execution finishes, the file dhtmlx_debug.js will appear in the codebase directory.

The result of file execution (pay attention to dhtmlx_debug.js in logs):

The same result but from the file system side:

The dhtmlx_debug.js file has the same components while the markup is preserved, which is rather handy during the debugging.

Compiling in Linux

The process is almost the same as for Windows. You need PHP and JRE installed, go to sources/libCompiler dir and exec from the command line:

php lib_compiler.php

or for debug version

php lib_compiler.php --debug=true

If your environment doesn't have a public path to java, edit lib_compiler.php and change the path to java:

$compiler = "java -jar yui.jar";

Also you need r/w access for codebase and skins dirs.

Making changes in the Suite

If you need to recompile dhtmlx.js with a custom code:

1) edit/update the corresponding file in the sources folder
2) run compile.bat (or compile_debug.bat)

libCompiler will recompile dhtmlx.js and dhtmlx.css files with your changes.

Selecting necessary files

You can also create a custom compilation, by removing unused components from single dhtmlx.js/css

1) edit /sources/libCompiler/conf/stat_js and remove all unused components' js files from it
2) edit /sources/libCompiler/conf/stat_css and remove all unused components' css files from it
3) recompile suite and use target dhtmlx.js/css files

dhtmlxcommon.js is required always;
dhtmlxcore.js is required for chart and dataview;
dhtmlxcontainer.js is required for tabbar, layout, accordion and windows.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Client-Server Communication DHTMLX Docs

Documentation
  • Client-Server Communication
    • DataProcessor
    • PHP Connector
    • Java Connector
    • .Net Connector
    • ColdFusion Connector
Start

Client-Server Communication

To implement interaction of client-side components with the server side DHTMLX library provides two effective tools: dhtmlxConnector and dhtmlxDataProcessor. There are connectors for PHP, Java, .Net and Cold Fusion platforms are available.

Server Side Solutions

  • PHP Connector
  • Java Connector
  • .Net Connector
  • Cold Fusion Connector
 dhtmlxConnector is a server-side helper library that enables access to external datasources and backend systems. It lets load data from the server, implement server-side filtering, sorting and validation.

Client Side Solution

  • dataProcessor
 dhtmlxDataProcessor is a mediator between the client and server side. It allows managing CRUD operations on the client and saving the applied changes back the server.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataProcessor DHTMLX Docs

Documentation
  • DataProcessor
    • dataProcessor API
    • Basic Operating Principles
    • Initializing DataProcessor
    • Configuring DataProcessor
    • Common Tasks & Errors
  • PHP Connector
  • Java Connector
  • .Net Connector
  • ColdFusion Connector
Start Client-Server Communication

DataProcessor

DataProcessor is a clear, functional library that lets you to ‘communicate’ with server-side backend. It not only simplifies work with server-side but also helps to monitor all data changes. You can use it with any DHTMLX component that allows editing inside of itself. For example, Grid or DataView.

API reference
  • dataProcessor API
Guides

Working with DataProcessor

  • Basic Operating Principles
  • Initializing DataProcessor
  • Configuring DataProcessor
  • Common Tasks & Errors
 Gives all the necessary information that you need while working with DataProcessor
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dataProcessor API DHTMLX Docs

Documentation
  • dataProcessor API
    • Methods
    • Events
  • Basic Operating Principles
  • Initializing DataProcessor
  • Configuring DataProcessor
  • Common Tasks & Errors
Start Client-Server Communication DataProcessor

dataProcessor API

Methods
clearVerificator | cancels verifying of a column
defineAction | defines a handler function for a specific response status
enableDataNames | changes the default names of incoming parameters (c0-cN) to the columns' ids in the grid
enableDebug | enables debug output
enablePartialDataSend | enables mode when only updated properties will be sent to server side
enableUTFencoding | set data escaping mode
getState | returns state of item ( is updated or not )
getSyncState | return state of dataprocessor
ignore | exec block without triggering dataprocessor
init | link dataprocessor to the component
sendData | sends to the server side all data which aren't saved yet
setTransactionMode | configures data sending mode
setUpdateMode | defines the action that will trigger data saving
setUpdated | marks item as updated
setVerificator | specifies a column which values should be varified before sending to the server
url | sets url to the server side data saving script
Events
onAfterUpdate | fires after receiving and processing server side response
onAfterUpdateFinish | fires after receiving and processing ALL items in the response
onBeforeDataSending | fires before data sending
onBeforeUpdate | fires before data sending
onFullSync | fires when all data saved and client and server is in sync
onRowMark | fires before each attempt to mark the updated item
onValidationError | fires after validation error before data sending
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Methods DHTMLX Docs

Documentation
  • Methods
    • clearVerificator
    • defineAction
    • enableDataNames
    • enableDebug
    • enablePartialDataSend
    • enableUTFencoding
    • getState
    • getSyncState
    • ignore
    • init
    • sendData
    • setTransactionMode
    • setUpdateMode
    • setUpdated
    • setVerificator
    • url
  • Events
Start Client-Server Communication DataProcessor dataProcessor API

Methods

clearVerificator | cancels verifying of a column
defineAction | defines a handler function for a specific response status
enableDataNames | changes the default names of incoming parameters (c0-cN) to the columns' ids in the grid
enableDebug | enables debug output
enablePartialDataSend | enables mode when only updated properties will be sent to server side
enableUTFencoding | set data escaping mode
getState | returns state of item ( is updated or not )
getSyncState | return state of dataprocessor
ignore | exec block without triggering dataprocessor
init | link dataprocessor to the component
sendData | sends to the server side all data which aren't saved yet
setTransactionMode | configures data sending mode
setUpdateMode | defines the action that will trigger data saving
setUpdated | marks item as updated
setVerificator | specifies a column which values should be varified before sending to the server
url | sets url to the server side data saving script
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


clearVerificator DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

clearVerificator

cancels verifying of a column

void clearVerificator(number index);

Parameters

index number the column's index

Example

myDataProcessor.setVerificator(1,not_empty);

function not_empty(value,id,ind){
    if (value=="") mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
    return value!="";
}

myDataProcessor.clearVerificator(1);

Related samples

  • Basic validation
Details

Beware, the method is used for the Grid component only.

See also
  • API
    • setVerificator
  • Articles
    • Configuring DataProcessor
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


defineAction DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

defineAction

defines a handler function for a specific response status

void defineAction(string status,function handler);

Parameters

status | string | the response status
handler | function | a handler function for processing the specified status of response

Example

myDataProcessor.defineAction("error",function(response){
    alert(response.firstChild.nodeValue);
    return true;
});

Related samples

  • Extended error handing
Details

Status

There are 5 predefined statuses of response:

  1. updated
  2. inserted
  3. deleted
  4. invalid
  5. error

You can also specify a custom status and set it as a parameter:

// server side: PHP, dhtmlxConnector
function validate($data){
    if ($data->get_value("some")=="") $data->set_status("my_status")
}
$conn->event->attach("beforeProcessing","validate");

// client side:
dp.defineAction("my_status",function(response){
    //your custom code
    return true;
})

Handler function

The handler function takes 1 parameter:

  • response - the server response (in the XML Document format)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDataNames DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

enableDataNames

changes the default names of incoming parameters (c0-cN) to the columns' ids in the Grid

void enableDataNames(boolean mode);

Parameters

mode boolean true to change the default names

Example

dp.enableDataNames(true);

Details

The parameters c0-cN, used by default, are not very useful on the server side. Dataprocessor allows using the IDs of Grid columns' instead of them.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableDebug DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

enableDebug

enables debug output

void enableDebug(boolean mode);

Parameters

mode boolean true to enable debug output

Example

dp.enableDebug(true);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enablePartialDataSend DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

enablePartialDataSend

enables the mode when only updated properties will be sent to the server side

void enablePartialDataSend(boolean mode);

Parameters

mode boolean true to send only updated elements

Example

dp.enablePartialDataSend(true);

Details

Works for dhtmlxGrid only.
This feature is not compatible with the DHTMLX connector.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


enableUTFencoding DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

enableUTFencoding

sets data escaping mode

void enableUTFencoding(boolean mode);

Parameters

mode boolean true for UTF-8, false for using the current browser's locale

Example

dp.enableUTFencoding(true);

Details

Enabled by default.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getState DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

getState

returns the state of an item (updated or not)

string getState(string|number id);

Parameters

id string|number the id of an item

Returns

string the status of an item (updated, invalid, etc.)

Example

var status = dp.getState(id);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


getSyncState DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

getSyncState

returns the state of DataProcessor

boolean getSyncState();

Returns

boolean true when all data is saved

Example

var state = dp.getSyncState();

Details

If some records haven't been saved yet, or have received an "error" response, the method will return false.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ignore DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

ignore

executes a block without triggering DataProcessor

void ignore(function code);

Parameters

code function data modification code

Example

dp.ignore(function(){
   some.addRow(id, data); // won't be saved
});

Details

You can place data adding and deleting operations here when you don't want to save that changes on the server side.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


init DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

init

links DataProcessor to the component

void init(object obj);

Parameters

obj object a DHTMLX component

Example

dp.init(mygrid);

Details

DataProcessor can be attached only to one component.
Calling this method a second time will cause an error.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


sendData DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

sendData

sends all data which aren't saved to the server side yet

void sendData( [string|number id] );

Parameters

id string|number optional, the id of an item
Details
  • If ID is provided, only one item will be sent to the server side.
  • When called without parameters, the method will send all items that aren't saved yet.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setTransactionMode DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

setTransactionMode

configures the data sending mode

void setTransactionMode(string mode,boolean total);

Parameters

mode | string | the data sending mode, "GET"|"POST"|"REST"|"JSON" (see related articles for details)
total | boolean | defines, whether all data is sent all at once, or each record is sent by a separate request

Example

dp.setTransactionMode("POST", true);

Details

In order to send custom HTTP request headers or some additional data to the server, you need to specify the first parameter as an object and define the following properties inside of it:

  • mode - (string) data sending mode, "GET", "POST", "REST", "JSON"
  • headers - (object) a set of headers, defined as "key":"value" pairs that should be sent with a request
  • payload - (object) additional data, set as "key":"value" pairs that should be sent to the server together with headers
dp.setTransactionMode({
    mode:"POST",
    headers:{
        "Content-Type": "application/x-www-form-urlencoded",
        "Accept-Language": "fr-FR"
    },
    payload:{
        "user_id":"12"
    }
}, true);
See also
  • Articles
    • Configuring DataProcessor
    • Using dataProcessor with REST API
    • Using dataProcessor in JSON mode
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


setUpdateMode DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

setUpdateMode

defines the action that will trigger data saving

void setUpdateMode(string mode,boolean dnd);

Parameters

mode | string | the name of the mode
dnd | boolean | the drag-n-drop processing mode

Example

dp.setUpdateMode("cell", false);

Details

Applicable for dhtmlxGrid and dhtmlxTreeGrid only.

mode

  • "cell" - update after changing any cell (default)
  • "row" - update after editing and moving selection to a different row
  • "off" - auto update will not be triggered

drag-n-drop

  • false - after drag-n-drop dataprocessor will generate two actions - insert and delete
  • true - after drag-n-drop dataprocessor will generate one update action
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setUpdated DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

setUpdated

marks an item as updated

void setUpdated(string|number rowId, [boolean mode,string state] );

Parameters

rowId | string|number | the id of a row to set the update status for
mode | boolean | optional, true (default) for "updated", false for "not updated"
state | string | optional, the update mode name, "updated" by default

Example

dp.setUpdated(1);
dp.setUpdated(2, true, "deleted");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


setVerificator DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

setVerificator

specifies a column which values should be verified before sending to the server

void setVerificator(number index,function verifyFunc);

Parameters

index | number | the index of column
verifyFunc | function | a function that will verify values of the specified column (if not set, the values will be compared to an empty string)

Example

// checks if the 1st column values is not equal to 0
myDataProcessor.setVerificator(0,greater_0);

function greater_0(value){
    return value>0;
}

//checks if the 2nd column values is not empty
myDataProcessor.setVerificator(1,not_empty);

function not_empty(value,id,ind){
    if (value=="") mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
    return value!="";
}

Related samples

  • Basic validation
  • Validation with marks
  • Validation with message
Details

Beware, the method is used for the Grid component only.

The verifying function goes through all cells of the column and takes 3 parameters:

  • value - the value of the cell
  • rowID - the row id
  • colInd - the column index
See also
  • API
    • clearVerificator
  • Articles
    • Configuring DataProcessor
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


url DHTMLX Docs

Documentation
  • clearVerificator
  • defineAction
  • enableDataNames
  • enableDebug
  • enablePartialDataSend
  • enableUTFencoding
  • getState
  • getSyncState
  • ignore
  • init
  • sendData
  • setTransactionMode
  • setUpdateMode
  • setUpdated
  • setVerificator
  • url
Start Client-Server Communication DataProcessor dataProcessor API Methods

url

sets URL to the server-side data saving script

void url(string str);

Parameters

str string URL to the server-side data saving script

Example

dp.url(str);

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Methods
  • Events
    • onAfterUpdate
    • onAfterUpdateFinish
    • onBeforeDataSending
    • onBeforeUpdate
    • onFullSync
    • onRowMark
    • onValidationError
Start Client-Server Communication DataProcessor dataProcessor API

Events

onAfterUpdate | fires after receiving and processing server side response
onAfterUpdateFinish | fires after receiving and processing ALL items in the response
onBeforeDataSending | fires before data sending
onBeforeUpdate | fires before data sending
onFullSync | fires when all data saved and client and server is in sync
onRowMark | fires before each attempt to mark the updated item
onValidationError | fires after validation error before data sending
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterUpdate DHTMLX Docs

Documentation
  • onAfterUpdate
  • onAfterUpdateFinish
  • onBeforeDataSending
  • onBeforeUpdate
  • onFullSync
  • onRowMark
  • onValidationError
Start Client-Server Communication DataProcessor dataProcessor API Events

onAfterUpdate

fires after receiving and processing server side response

void onAfterUpdate(string|number id,string action,string tid,mixed response){ ... };

Parameters

id | string|number | id of updated item
action | string | response status (operation type)
tid | string | new id (applicable only for insert operations)
response | mixed | xml node/json object, contains parsed xml/json response

Example

dp.attachEvent("onAfterUpdate", function(id, action, tid, response){
     //your code here
})

Details

Possible response statuses are the following:

  • updated;
  • inserted;
  • deleted;
  • invalid;
  • error.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onAfterUpdateFinish DHTMLX Docs

Documentation
  • onAfterUpdate
  • onAfterUpdateFinish
  • onBeforeDataSending
  • onBeforeUpdate
  • onFullSync
  • onRowMark
  • onValidationError
Start Client-Server Communication DataProcessor dataProcessor API Events

onAfterUpdateFinish

fires after receiving and processing ALL items in the response

void onAfterUpdateFinish(){ ... };

Example

dp.attachEvent("onAfterUpdateFinish", function(){
     //custom code here
})

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeDataSending DHTMLX Docs

Documentation
  • onAfterUpdate
  • onAfterUpdateFinish
  • onBeforeDataSending
  • onBeforeUpdate
  • onFullSync
  • onRowMark
  • onValidationError
Start Client-Server Communication DataProcessor dataProcessor API Events

onBeforeDataSending

fires before sending data to a server

void onBeforeDataSending(string|number id,string state,object data){ ... };

Parameters

id | string|number | the id of an item
state | string | the item's state (operation type)
data | object | serialized data that will be sent to the server side

Example

dp.attachEvent("onBeforeDataSending", function(id, state, data){
    //custom code here
    return true;
});

Details

The event fires for each data update request (after onBeforeUpdate).

The event can be blocked. Returning false from event handler will prevent data sending.

Possible response statuses are the following:

  • updated;
  • inserted;
  • deleted;
  • invalid;
  • error.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onBeforeUpdate DHTMLX Docs

Documentation
  • onAfterUpdate
  • onAfterUpdateFinish
  • onBeforeDataSending
  • onBeforeUpdate
  • onFullSync
  • onRowMark
  • onValidationError
Start Client-Server Communication DataProcessor dataProcessor API Events

onBeforeUpdate

fires before updating a record (records)

void onBeforeUpdate(string|number id,string state,object data){ ... };

Parameters

id | string|number | the item's id
state | string | the item's state (operation type)
data | object | data that will be sent to the server side

Example

dp.attachEvent("onBeforeUpdate", function(id, state, data){
    //your code here
    return true;
});

Details

The event fires for each updating record and before onBeforeDataSending.

The event can be blocked. Returning false from event handler will prevent data sending.

Possible response statuses are the following:

  • updated;
  • inserted;
  • deleted;
  • invalid;
  • error.
See also
  • API
    • setUpdateMode
    • Back to top
    • Suite Components
    • Accordion
    • Calendar
    • Carousel
    • Chart
    • ColorPicker
    • Combo
    • DataView
    • Form
    • Grid
    • Layout
    • List
    • Menu
    • Popup
    • Ribbon
    • Sidebar
    • Slider
    • Tabbar
    • Toolbar
    • TreeGrid
    • TreeView
    • Windows
    • Other Components
    • Diagram
    • Gantt
    • Pivot
    • RichText
    • Scheduler
    • SpreadSheet
    • Vault
    • Data Saving
    • DataStore
    • DataProcessor
    • PHP connector
    • Java connector
    • .Net connector
    • ColdFusion
    • Tools&Helpers


onFullSync DHTMLX Docs

Documentation
  • onAfterUpdate
  • onAfterUpdateFinish
  • onBeforeDataSending
  • onBeforeUpdate
  • onFullSync
  • onRowMark
  • onValidationError
Start Client-Server Communication DataProcessor dataProcessor API Events

onFullSync

fires when all data saved and client and server is in sync

void onFullSync(){ ... };

Example

dp.attachEvent("onFullSync", function(){
    //custom code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onRowMark DHTMLX Docs

Documentation
  • onAfterUpdate
  • onAfterUpdateFinish
  • onBeforeDataSending
  • onBeforeUpdate
  • onFullSync
  • onRowMark
  • onValidationError
Start Client-Server Communication DataProcessor dataProcessor API Events

onRowMark

fires before each attempt to mark the updated item

void onRowMark(string|number id,string state,boolean mode,object invalid){ ... };

Parameters

id | string|number | id of item for which error occurs
state | string | item's state ( operation type )
mode | boolean | true for adding update mark, false for removing
invalid | object | details about errors, if any

Example

dp.attachEvent("onRowMark", function(id, state, mode, invalid){
    //custom code here
    return true;
});

Details

Event is blockable. Return false to prevent item marking

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onValidationError DHTMLX Docs

Documentation
  • onAfterUpdate
  • onAfterUpdateFinish
  • onBeforeDataSending
  • onBeforeUpdate
  • onFullSync
  • onRowMark
  • onValidationError
Start Client-Server Communication DataProcessor dataProcessor API Events

onValidationError

fires after validation error before data sending

void onValidationError(string|number id,object details){ ... };

Parameters

id | string|number | id of the item for which error occurs
details | object | error details

Example

dp.attachEvent("onValidationError", function(id, details){
    //custom code here
});

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Basic Operating Principles DHTMLX Docs

Documentation
  • dataProcessor API
  • Basic Operating Principles
    • Common request parameters format
    • Scheduler request params examples
    • Grid and Tree request params
    • Response details
  • Initializing DataProcessor
  • Configuring DataProcessor
  • Common Tasks & Errors
Start Client-Server Communication DataProcessor

Basic Operating Principles

If you use DHTMLX PHP connectors - please, refer to PHP Connector.

The default package contains an example of the server-side code for PHP (by additional request the similar code for Java/ColdFusion/C#.Net/RubyOnRails can be sent).

In this chapter we'd like to show you dataProcessor in details (a bit changed image from the main page will be to the point).

Let's take a look at the example. You have some data stored in a database and want to represent them in a grid with the possibility to edit them. Let's look inside and learn what role dataProcessor plays here.

Common request parameters format

First of all, dataProcessor gets the data (all the parameters are part of the GET or POST requests).

The setTransactionMode method is used to set the desired transaction mode.

There are several types of requests:

1) a separate request for each record

dp.setTransactionMode("POST", false);

Request values are:

  • id - the record's id
  • property1 - 1st data property of an updated record
  • property2 - 2nd data property of an updated record
  • propertyN - (N+1)th data property of an updated record
  • !nativeeditor_status - defines the type of the operation (insert, update, delete), possible values are:
    • inserted - the record was added;
    • deleted - the record was deleted;
    • updated or any other value - the record was updated;

Depending on the value of "!nativeeditor_status" the related section of the server-side logic is triggered.

2) several records in one request

dp.setTransactionMode("POST", true);

Request values are:

  • {event1_id}_id - the 1st record's id
  • {event1_id}_property1 - 1st data property of the 1st record
  • {event1_id}_property2 - 2nd data property of the 1st record
  • {event1_id}_propertyN - (N+1)th data property of the 1st record
  • {event1_id}_!nativeeditor_status - defines the type of the operation (insert, update, delete), possible values are:
    • inserted - the record was added;
    • deleted - the record was deleted;
    • updated or any other value - the record was updated;
  • {event2_id}_id - the 2nd record's id
  • {event2_id}_property1 - 1st data property of the 2nd record
  • {event2_id}_property2 - 2nd data property of the 2nd record
  • {event2_id}_propertyN - (N+1)th data property of the 2nd record
  • {event2_id}_!nativeeditor_status - defines the type of the operation (insert, update, delete), possible values are:
    • inserted - the record was added;
    • deleted - the record was deleted;
    • updated or any other value - the record was updated;
  • ids - the ids of all the records in the request (ids:{event1_id},{event2_id})

A dataprocessor request can pass any number of data properties. An id is a mandatory parameter, other data properties are completely optional.

3) a request based on the rules of REST API

dp.setTransactionMode("REST");

4) a request sent by dataProcessor in the JSON mode

dp.setTransactionMode("JSON");

Scheduler request params examples

An example of Scheduler request values for a separate request for each record is given below:

  • id: 71
  • start_date: 2014-11-04 15:00
  • end_date: 2014-11-04 18:00
  • text: Recinto Ferial - Valencia
  • details: Details for Recinto Ferial - Valencia
  • !nativeeditor_status: updated

The following example presents Scheduler request values in case of several records in one request:

  • 15_id: 15
  • 15_start_date: 2015-04-06 10:00
  • 15_end_date: 2015-04-06 16:45
  • 15_text: New event
  • 15_section_id: 3
  • 15_!nativeeditor_status:updated
  • 16_id: 16
  • 16_start_date: 2015-04-08 8:00
  • 16_end_date: 2015-04-08 10:00
  • 16_text: New event
  • 16_section_id: 5
  • 16_!nativeeditor_status: updated
  • ids: 15,16

Grid and Tree request params

The request values for a grid row update are:

  • gr_id - the id of a row in the grid for which some operation is executed;
  • !nativeeditor_status - defines the type of the operation (insert, update, delete), possible values are:
    • inserted - the row was added;
    • deleted - the row was deleted;
    • updated or any other value - the row was updated;
  • c0 - the data of the first column in the updated row;
  • c1 - the data of the second column in the updated row;
  • ...
  • cN - the data of the (N+1)th column in the grid.

The request values for a tree branch update are:

  • tr_id - the id of the node in the tree for which some operation is executed;
  • tr_pid - the parent's id;
  • tr_order - the node's sequence on the level;
  • tr_text - the node's text(label);
  • Userdata blocks are passed with their names.
  • !nativeeditor_status - the type of the operation, possible values are:
    • inserted - item is inserted;
    • deleted - item is deleted;
    • updated or if an item doesn't exist - item is updated.

Response details

Then dataProcessor processes the incoming parameters, makes all the necessary operations in the database and returns the response.

The response must be a valid XML or JSON in order to be processed correctly.

XML response must have the following format:

<data>
   <action type="some" sid="some" tid="some" />
</data>

where:

  • type - the type of the operation;
  • sid - the original row ID (the same as gr_id);
  • tid - the ID of the row after the operation (may be the same as gr_id, or a different one - it can be used during a new row adding, when a temporary ID created on the client-side is replaced with the ID taken from the DB, or by any other business rule).

Since the version 4.1 dataProcessor can work with JSON responses.

A simple JSON response should look as:

{"status":"ok"}
//or
{"tid":121}

A more complex example can be as follows:

{"action":"updated", "sid":15, "tid":15}

To return an error in response of JSON format, use the following code:

{"action":"error", ...}

Types of response

There are 5 predefined types of response:

  • updated;
  • inserted;
  • deleted;
  • invalid;
  • error.

dataProcessor already contains the logic that defines the default processing of the stated types of response (in other words, actions). You can attach custom handlers to add some extra reaction but, in general, you needn't care about the processing of these actions.

In some cases you may need to return some additional information (the most common use-case - an error during a DB operation). To dispose a problem you can use an additional response type:

function some_error(node)
{
    alert(node.getAttribute("type"));    // 'my_error'
    alert(node.firstChild.data);         // Details
    return false;
}

dp.defineAction("error",some_error);

where some_error - a custom function which will be called when the response of "my_error" type is received.

<data>
   <action type="my_error" sid="id" tid="id">Details</action>
</data>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing DataProcessor DHTMLX Docs

Documentation
  • dataProcessor API
  • Basic Operating Principles
  • Initializing DataProcessor
    • Object constructor
    • Attaching dataProcessor object to a data component
    • Using dataProcessor with dhtmlxConnector
    • Using dataProcessor with REST API
    • Using dataProcessor in JSON mode
  • Configuring DataProcessor
  • Common Tasks & Errors
Start Client-Server Communication DataProcessor

Initializing DataProcessor

Object constructor

To create a dataProcessor object, use the dataProcessor constructor:

var dp = new dataProcessor("php/update.php"); //"php/update.php" - url to the data feed

Attaching dataProcessor object to a data component

To attach a dataProcessor to a data component, use the init() method:

mygrid = new dhtmlXGridObject('gridbox');  mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Book Title, Author, Sales");
mygrid.init();
mygrid.load("data.xml");

var dp = new dataProcessor("php/update.php"); dp.init(mygrid); // mygrid - object of the component dataProcessor will be attached to

Related sample: Basic init of dataprocessor

dataProcessor is initialized in the auto-update mode by default, i.e. after each change in the grid, data is sent to the server.

In some cases it makes sense to disable the auto-update mode and send data to the server manually:

dp.setUpdateMode("off")
...
dp.sendData(); //sends data of the attached component to the server

Related sample: Sending all at once

So now dataProcessor stores the information about all the changes made in the grid and sends them to the server only after the sendData() method was called.

Using dataProcessor with dhtmlxConnector

If you use dhtmlxConnector (php, java, .net) you can take its connector file as a parameter of the constructor.

myDP = new dataProcessor("myconnector.php");
myDP.init(mygrid);

Note, the client side encodes data as UTF-8, and if your server doesn't use it as the default encoding, it may process the incoming data as a differently encoded one, which may lead to problems.

Using dataProcessor with REST API

Since version 4.1 of DHTMLX library dataProcessor can be used not only with dhtmlxConnector, but also with server-side REST API. The obvious advantage of this technology is that it's used by various frameworks (PHP,.NET an so on).

To set the REST mode, use the setTransactionMode function with the REST parameter (upper case is a must). Pay attention, that you should set the REST mode only after the initialization of dataProcessor.

myDataProcessor = new dataProcessor("php/json.php"); //lock feed url
myDataProcessor.init(mygrid); //link dataprocessor to the grid
myDataProcessor.setTransactionMode("REST");

After that all requests to the server will be processed according to the rules of the REST protocol.

JSON responses

REST API returns a JSON object, thus giving dataProcessor the ability to work with JSON responses.

So instead of the long XML response

<data>
   <action type="some" sid="some" tid="some" />
</data>

You get a short one in JSON format:

//for example
{"status":"ok"}
//or
{"tid":121}

A more complex example can look as:

{"action":"updated", "sid":15, "tid":15}

If you need to return an error, the response should be as follows:

{"action":"error", ...}

You can pass any data in a JSON response. Besides, the response can be received on the client side by means of the onAfterUpdate event.

Using dataProcessor in JSON mode

Since version 5.1 of DHTMLX library dataProcessor can be used with JSON data sending mode.
In this mode the client side sends a serialized object as a payload of data saving request.

myDataProcessor = new dataProcessor("php/json.php"); //lock feed url
myDataProcessor.init(mygrid); //link dataprocessor to the grid
myDataProcessor.setTransactionMode("JSON");

On the server side, you can read the body of request and deserialize it like this:

$pack = json_decode(file_get_contents('php://input'), true);
$id     = $pack["id"];          //id of data object
$action = $pack["action"];      //operation type - inserted, updated, deleted
$data   = $pack["data"];        //data object

As a response, the client side expects any valid JSON object which may contain a new id (can be used during data inserting):

//for example
{"status":"ok"}
//or
{"tid":121}

or on returning an error:

{"action":"error" }

You can pass any extra data in a JSON response. Extra attributes can be retrieved on the client side by means of the onAfterUpdate event.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Configuring DataProcessor DHTMLX Docs

Documentation
  • dataProcessor API
  • Basic Operating Principles
  • Initializing DataProcessor
  • Configuring DataProcessor
    • Meaningful Names
    • Sending Modes
    • Additional Settings for Sending Data
    • Validation
    • Styling
    • Debugging
  • Common Tasks & Errors
Start Client-Server Communication DataProcessor

Configuring DataProcessor

Here we collect all the information concerning dataProcessor configuration:

  • Sending modes
  • Validation
  • Styling
  • Debugging

Meaningful Names

The parameters c0-cN used by default aren't very useful on the server side. The dataprocessor allows using the grid columns' IDs instead of these params.

For this purpose use the enableDataNames method:

grid.setHeader("Name of the book,Name of the author")
grid.setColumnIds("book,author");
...
dp.enableDataNames(true);

// on the server side you'll get:
// $_GET['c0']     =>     $_GET['book']\\
// $_GET['c1']     =>     $_GET['author']

Related sample: Meaningful names

Sending Modes

There are different ways of sending data to dataProcessor. You can set the desired mode using the setTransactionMode method. The following transaction modes are available: "POST", "GET", "REST", "JSON".

POST or GET

dataProcessor uses the GET command by default. But if you have dhtmlxConnector included on the page, dataProcessor will send parameters through the POST command. To set the GET of POST transaction mode, use the setTransactionMode method:

dp.setTransactionMode("POST");

Related sample: Sending all at once

Sending all at once

The update for each row is sent as a separate request by default, i.e. when 20 rows are updated - 20 requests are sent to the server. This is not a good approach and instead of it, a single (more complex) request can be sent to the server side:

dp.setTransactionMode("POST",true);

Related sample: Sending all at once

In this case the server side receives a slightly different set of parameters:

  • ids - a comma-separated list of the updated rows' IDs. For each ID in this list, the request will contain a set of details.

For example, if we have two updated rows on the client side with IDs = r2 and r3, the server-side code will receive the following: ids = r2,r3

  • r2_!nativeeditor_status - the status of an operation for the row r2
  • r2_c0 .. r2_cN - the data for a column of the row r2
  • r3_!nativeeditor_status - the status of an operation for the row r3
  • r3_c0 .. r3_cN - the data for a column of the row r3

The awaited server-side response must be presented in the same format as a usual one, but it must include the data for all the processed rows:

<data>
   <action type="some" sid="r2" tid="r2" />
   <action type="some" sid="r3" tid="r3" />
</data>

It's not recommended to set this mode if you use dhtmlxConnector. dhtmlxConnector requires using POST and sending all data at once (set by default): dp.setTransactionMode("POST",true).

REST

This mode allows using dataProcessor with the REST API.

To enable this mode, pass the "REST" parameter to the setTransactionMode method:

dp.setTransactionMode("REST");

After that all requests to the server will be processed according to the rules of the REST protocol.

Request

  • the type of the request depends on the operation type POST|PUT|DELETE
  • each request contains only one object
  • id of the changed item is sent with the request URL as data.php/12
  • instead of using columns' data, columns' ids are used. It's rather handy and dataProcessor allows changing the default incoming parameters (column indexes c0-cN) to the columns' ids

Thus, you can set the columns' ids and then apply them as follows:

grid.setHeader("Name of the book,Name of the author")
grid.setColumnIds("Book,Author");
...
dp.enableDataNames(true);

and your request will look like this:

URL: /api
POST:
Form data:
Book=The Green Mile
Author=Stephen King

Response

An example of the response in the REST mode is:

{"action":"updated", "sid":12, "tid":12}

JSON

This mode allows using dataProcessor in JSON mode.

To enable this mode, pass the "JSON" parameter to the setTransactionMode method:

dp.setTransactionMode("JSON");

Request

This mode is used only for the POST operation and is useful for sending complex (nested) objects:

For example, for the Grid you can send a request as:

{ "action":"inserted", "id":"12", data:{
    "book":"The Green Mile", "author":"Stephen King"
}}

Response

A simple response should look as follows:

{"action":"updated"}

Additional Settings for Sending Data

Sending custom parameters with HTTP request

You can send custom parameters with HTTP request to the server. For this purpose, you should pass to the setTransactionMode method. It takes two parameters:

  • parameters - (object) a set of request parameters:
    • mode - (string) data sending mode, GET or POST
    • headers - (object) a set of headers, defined as "key":"value" pairs that should be sent with a request
    • payload - (object) additional data, set as "key":"value" pairs that should be sent to the server
  • total - (boolean) defines, whether to send all data at once, or each record by a separate request
dp.setTransactionMode({
    mode:"POST",
    headers:{
        "Header-Name1" : "HeaderValue1"
    },
    payload:{
        "key1":"value1"
    }
}, true);

Sending just changed items

A user can enable the mode just when the changed fields and row IDs are sent to the server-side (instead of all the fields in the default mode). To enable the mode, use the enablePartialDataSend method:

dp.enablePartialDataSend(true);

Active fields

There is a possibility to define which column may trigger the update. To define the so-called 'active' columns, use the setDataColumns() method:

dp.setDataColumns([false,true,true,true]);

Related sample: Active fields

In that case, changing the first column values will not trigger data sending to the server. Such mode makes sense only if auto-update is enabled.

Validation

Grid allows defining the validators which will be activated before data sending.

For this purpose the method setVerificator(index,method) is used. Where:

  • index - the index of the column to which verificator will be assigned;
  • method - the verification function.

The verificator function is a function which will receive the following parameters:

  • the value of a cell;
  • the id of a row;
  • indexes of columns.

The function, based on such values, must return true (to accept a value) or false (to deny a value). If any value was denied during validation, data sending will be blocked and the onValidatationError event generated.

Inside of the verificator function, "this" points to the object which dataProcessor is attached to (grid or tree).

Verificator functions are called before sending data. The exact time depends on the way DataProcessor is initialized:

  • in auto update mode the functions will be called after each operation of editing a cell (when the editor is closed).
  • in manual sending mode - after the sendData() call.

Validate message

If you need to collect all validation errors and output them as a single error message, you can make it by setting the second parameter of the validation function to true (now the function will return a text message).

Related sample: Basic validation

Styling

You can define the style that the string will have after one of the predefined actions has been completed. For example, after you've updated a string it will have the style defined in the property dp.styles.updated.

The styles which an object can have after changing but before saving:

  • dp.styles.updated - string's style for the updated status;
  • dp.styles.inserted- string's style for the inserted status;
  • dp.styles.deleted - string's style for the deleted status;

The styles which an object can have after getting the response:

  • dp.styles.invalid - string's style for the invalid status;
  • dp.styles.invalid_cell - style assigned to the cell the validation of which failed;
  • dp.styles.error - string's style for the error status;

Default style:

  • dp.styles.clear - default style of a row.

For example the default style for the updated record is the following:

dp.styles.updated="font-weight:bold;"

You can redefine it like this for example:

dp.styles.updated="font-style:italic; color:green;"

Related sample: Custom styles

Debugging

In order to execute dataProcessor debugging, you need to enable it using the corresponding method - enableDebug:

var dp = new dataProcessor(url);
dp.enableDebug(true);

After that you will be able to check dataProcessor debug info in the browser's console.

In case you use dhtmlxConnector, you can enable a similar functionality on the server side and write server-side exceptions into a log file.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Common Tasks & Errors DHTMLX Docs

Documentation
  • dataProcessor API
  • Basic Operating Principles
  • Initializing DataProcessor
  • Configuring DataProcessor
  • Common Tasks & Errors
    • Common Tasks
    • Common Errors
Start Client-Server Communication DataProcessor

Common Tasks & Errors

In this chapter we consider most popular tasks & errors you can face during the development process.

Common Tasks

Update completion

There are two events which can be used to catch the finish of data sync operation:

dp.attachEvent("onAfterUpdateFinish",function(){
   alert("single row updated")
});
dp.attachEvent("onFullSync",function(){
   alert("all rows updated")
});

At any time the update state can be checked as follows:

dp.getSyncState();

which will return true if all data is synced by the server and false otherwise.

Manual row updating

DataProcessor detects a row changing only by the edit operations. If a row was changed by a direct API calling, it will not be updated. In such case you can manually call the dataProcessor to inform about the update operation:

grid.cells(id,ind).setValue(new_one);
dp.setUpdated(id,true);

The row can be marked as "not updated" in the same manner (may be useful in some scenarios):

dp.setUpdated(id,false);

If you want to mark a row with the status different from "updated" (not sure how it can be useful, but still) it can be done as shown below:

dp.setUpdated(id,true,"status name");

Error catching

Starting from version 2.1, dataProcessor has a default reaction on the "error" response type which is used to report about server-side errors. The row marked as error will be highlighted in the grid. And it will not be sent back to the server until one of the following events occurs:

1. A user edits data in a row;

2. Rows set back to the updated status through the setUpdated command.

Server-side validation

It's a reaction on the "invalid" status in the server-side response. It's similar to "error", but has a different visual marking.

If you want to extend it, you should do the following on the client side:

dp.defineAction("invalid",function(response){
var message = response.getAttribute("message");
alert(message);
return true;
})

And you need to do some work on the server-side (if the data isn't valid, a text message will be returned):

<?xml version="1.0" encoding="UTF-8"?>
<data>
  <action sid="{gr_id}" type="invalid" message="Data in the first column is not valid" />
</data>

Loading extra data during update

It's possible to extend the default after-update reaction as:

dp.defineAction("updated",function(response){
    var sid = response.getAttribute("sid");
    var extra = response.getAttribute("extra");
    this.obj.cells(sid,0).setValue(extra);
    return true;
})

With such a code you will be able to specify any additional data which needs to be updated in the grid after receiving XML response from the server:

<data>
 <action sid="{gr_id}" type="updated" tid="{gr_id}" extra="new value for first column" />
</data>

Sending extra data to server

In the case of grid, if you'd like to send some extra data in addition to those, that were sent through the dp.sendData() command, you can use the method setUserData() (sets global userdata for a grid).

myGrid.setUserData("", "some", "value");

On the server side you can get the sent data through the onBeforeUpdate event:

dp.attachEvent("onBeforeUpdate",function(id,action){
  action.get_value(some);
  return true;
})

Also it's possible to include any custom parameters directly into dataprocessor's URL used in the client-side dataProcessor constructor:

var dp = new DataProcessor("some.php?field="+field_name);

//on server-side for all calls you will have:
//$_GET['field']

Partial data sending

If you update data 'partially', you can face the problem when only the first part is updated. For example, you have 3 columns in a grid and want to update some record. At first, you update the first cell. It's updated correctly. You try to update the second and the third ones but they won't do. The following technique will help you to update the 2 last cells:

cells(rId, 2).setValue(age);
cells(rId, 2).cell.wasChanged = true;//added
cells(rId, 3).setValue(gender);
cells(rId, 3).cell.wasChanged = true;//added

Changing URL

To change the URL of the dataprocessor after it's been initialized you can use the following code:

dp.serverProcessor = "some_new_url";

Currently, there is no way to detach dataprocessor from an object. But you can use this technique and reset its URL.

Common Errors

Incorrect XML error

The most probable cause is some server-side error which breaks the XML. You can enable the debug console and check the response of the server side to receive more information (debug console can detect many types of xml-related errors and show the reasons of these problems).

Deleted rows are not removed from the grid

Actually it is not an error - the rows will be removed only after synchronizing with the server. You can define a custom marking routine which will hide rows instead of striking them through.

Deleted rows are not removed from the grid after synchronizing with the server (updated/inserted rows stay bold)

The most probable cause is the incorrect values of the "action" attribute in the response XML.

JS error after synchronizing with the server

Most probably this error is caused by incorrect values of the "sid" and "tid" attributes in the response XML.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


PHP Connector DHTMLX Docs

Documentation
  • DataProcessor
  • PHP Connector
    • PHP Connector API
    • General Idea of dhtmlxConnector
    • Initializing PHP Connector
    • Components Functionality
    • Basic Loading
    • Dynamic Loading
    • Filtering
    • Formatting/Changing Data Before Loading
    • Sorting
    • Client-Side Requirement - DataProcessor
    • Making Queries
    • Saving Data Changes Made in Form
    • Security
    • Validation
    • Data Export
    • Elementary DB Operations with Connector
    • Error Handling and Logging
    • Handling Events
    • Extending Functionality
    • Using Connector with Popular Frameworks
    • Samples
    • Migration and New Functions
    • HowTos
  • Java Connector
  • .Net Connector
  • ColdFusion Connector
Start Client-Server Communication

PHP Connector

DHTMLX connector is a helper server-side library that enables access to external datasources and backend systems.

It supports all DHTMLX components which operate with data.

The library itself provides a wide server-side functionality, such as data loading (static or dynamic), saving, filtering, validation, etc. Integration with DHTMLX Dataprocessor allows managing the insert/delete/update operations as well.

Server-side requirements

  • Fully supported DataBases: MySQL, PostgreSQL, Oracle, MSSQL, FileSystem
  • Partially supported DataBases: SQLite, any PDO|ODBC compliant ( MSAccess, Excel, SQLLite, DB2, FireBird, etc. )
  • PHP version: 5.x

Supported functionality

  • Data loading for Grid, TreeGrid, Tree, Combo, Gantt, Scheduler, DataView, Chart, Form
  • Data saving for Grid, TreeGrid, Tree, Gantt, Scheduler, DataView, Form
  • Server-side sorting and filtering for Grid, Treegrid
  • Dynamic loading (paging) for Grid, Treegrid, Tree, Gantt, Scheduler, DataView, Combo
API reference
  • PHP Connector API
Guides

PHP Connector Basics

  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
 Discusses the definition of dhtmlxConnector, the way of initializing PHP connector and the components' functionality that the connector supports.

Loading Data

  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
 Describes the ways of loading data using PHP Connector as well as the operations connected with it: filtering, formatting and sorting data.

Managing Create/Update/Delete Operations

  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
 Tells about executing main operations with data using PHP Connector.

Miscellaneous

  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
 Covers common information you may need while working with PHP Connector.

Auxiliary Resources

  • Samples
  • Migration and New Functions
  • HowTos
 Includes the samples of common PHP Connector usage, notes on new versions of the connector and answers to the questions about connector's work.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


PHP Connector API DHTMLX Docs

Documentation
  • PHP Connector API
    • Connector object
    • DataItem Object
    • DataAction Object
    • Events
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

PHP Connector API

  • add - adds a configured connector object to a collection for further retrieving the entire collection from the server
  • add_section - adds the first child tag(section) to data
  • asString - allows getting data generated by dhtmlxConnector as a string. Once the functionality is activated, dhtmxConnector starts to return data as a string instead of direct loading into the client
  • configure - configures the connector without rendering data
  • dynamic_loading - enables the dynamical loading mode for connector
  • enable_log - enables logging for connector
  • is_select_mode - returns current active mode
  • mix - has 2 overloads
  • render - retrieves configured data from the server
  • render_array - configures connector and retrieves data from a PHP array
  • render_sql - configures connector and retrieves data based on provided SQL text
  • render_complex_sql - configures connector and retrieves data based on provided SQL text
  • render_table - configures connector and retrieves data from single table
  • set_encoding - allows you to set encoding that will be applied to generated XML
  • set_limit - limits the number of data items that will be loaded to a component
  • set_options - creates a collection of options (attaches OptionsConnector to gridConnector or schedulerConnector)
  • sort - sorts a dataset on the server side
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Connector object DHTMLX Docs

Documentation
  • Connector object
    • add
    • add_section
    • asString
    • configure
    • dynamic_loading
    • enable_log
    • filter
    • is_select_mode
    • mix
    • render
    • render_array
    • render_sql
    • render_complex_sql
    • render_table
    • set_encoding
    • set_limit
    • set_options
    • sort
  • DataItem Object
  • DataAction Object
  • Events
Start Client-Server Communication PHP Connector PHP Connector API

Connector object

add

(available from version 2.0 and applicable just to MixedConnector)

adds a configured connector object to a collection for further retrieving the entire collection from the server.

$conn->add($name, $config);

Parameters:

  • $name - the name which will be assigned to a data block (configured by the specified connector object) in the final retrieved JSON object
  • $config - the connector object. You can use just connectors that generate 'JSON' data feed

See also:

  • render
  • MixedConnector

add_section

(available from version 1.5 and applicable just to DataConnector/JSONDataConnector)

adds the first child tag(section) to data.

$conn->add_section($name, $value);

Parameters:

  • $name - the section name
  • $value - the section value

See also:

  • JSONDataConnector/DataConnector

asString

(available from version 2.0)

allows getting data generated by dhtmlxConnector as a string. Once the functionality is activated, dhtmxConnector starts to return data as a string instead of direct loading into the client.

$conn->asString($isActive);

Parameters:

  • $isActive - (boolean) activates/disables the functionality. By default is false.

See also:

  • Returning data as a string

configure

configures the connector without rendering data.

$conn->configure($table,$id,$text,$extra,$relation);

Parameters:

  • $table - the name of a table.
  • $id - the name of the id field.
  • $text - a comma separated list of data fields.
  • $extra - a comma separated list of extra fields, optional.
  • $relation_id - used for building hierarchy in case of Tree and TreeGrid.

See also:

  • add
  • render
  • MixedConnector

dynamic_loading

enables the dynamical loading mode for connector.

$conn->dynamic_loading([$rowsNum]);

Parameters:

  • tree, treegrid - no parameters
  • grid - the number of rows which should be initially loaded (the value should be more than the number of rows visible in grid, or at least any positive number)
  • combo - the maximum number of options which the server will send for a single data request in autocomplete mode

See also:

  • Dynamic loading

enable_log

enables logging for connector.

$conn->enable_log("path to log file");

Parameters:

  • path - absolute or relative path to text file where log will be written.

See also:

  • Errors handling and logging

filter

(available from version 2.0)

filters a dataset on the server side.

$conn->filter($name,$value);
//or
$conn->filter($sql_str);

Parameters:

  • $name - the name of a field

  • $value - the filtering criteria

  • $sql_str - the sql statement specifying the filtering logic See also:

  • Filtering

is_select_mode

returns current active mode.

$conn->is_select_mode();

Parameters:

  • none.

Returns:

  • true, if select mode is active.
  • false, if update mode is active.

mix

(available from version 2.0)

has 2 overloads:

1) adds a custom key:value pair(s) to all items of the dataset.

$conn->mix($key,$value);

Parameters:

  • $key - the key of an item (an unique identifier)
  • $value - the actual data item

2) provides querying data from two tables, based on a relationship between the specified columns in these tables. Used with render_table method that defines configuration of the primary table

$conn->mix($table, $config, array ($fkey => $pkey));

Parameters:

  • $table - the name of the child(joined) table
  • $config - the connector object of the child table
  • $fkey - the foreign key
  • $pkey - the primary key

See also:

  • Adding 'key:value' pairs to data items
  • Joining tables

render

retrieves configured data from the server. Applicable just to MixedConnector.

$conn->render();

See also:

  • add
  • MixedConnector

render_array

configures connector and retrieves data from a PHP array which can be filled by any kind of external logic.

$conn->render_array($data,$id,$text,$extra,$relation_id);

Parameters:

  • $data - the name of a PHP array.
  • $id - the name of the id field.
  • $text - a comma separated list of data fields.
  • $extra - a comma separated list of extra fields, optional.
  • $relation_id - used for building hierarchy in case of Tree and TreeGrid.

See Also:

  • render_sql
  • render_complex_sql
  • Basic concepts

render_sql

configures connector and retrieves data based on provided SQL text.

$conn->render_sql($sql,$id,$text,$extra,$relation_id);

Parameters:

  • $sql - any sql code, which will be used as a base for data selection.
  • $id - the name of the id field.
  • $text - a comma separated list of data fields.
  • $extra - a comma separated list of extra fields, optional.
  • $relation_id - used for building hierarchy in case of Tree and TreeGrid.

See Also:

  • render_table
  • Basic concepts

render_complex_sql

configures connector and retrieves data based on provided SQL text.

Works similar to render_sql, but have 2 differences:

  1. Uses provided sql exactly as it is;
  2. Can be used only for data loading (for data saving you can use separate connector, event handlers, or custom model).

The method can be used to call stored procedures in the database.

$conn->render_complex_sql($sql,$id,$text,$extra,$relation_id);

Parameters:

  • $sql - any sql code, which will be used as a base for data selection or the name of a stored procedure.
  • $id - the name of the id field.
  • $text - a comma separated list of data fields.
  • $extra - a comma separated list of extra fields, optional.
  • $relation_id - used for building hierarchy in case of Tree and TreeGrid.

See Also:

  • render_sql
  • render_table
  • Basic concepts

render_table

configures connector and retrieves data from single table.

$conn->render_table($table,$id,$text,$extra,$relation);

Parameters:

  • $table - the name of a table.
  • $id - the name of the id field.
  • $text - a comma separated list of data fields.
  • $extra - a comma separated list of extra fields, optional.
  • $relation_id - used for building hierarchy in case of Tree and TreeGrid.

Description:

  • If you want to render all fields from DB ( except of identity field), you can use simplified command:
$conn->render_table($table);

See Also:

  • render_sql
  • render_complex_sql
  • Basic concepts

set_encoding

allows you to set encoding that will be applied to generated XML (default encoding is UTF-8).

$conn->set_encoding("iso-8859-1");

Parameters:

  • encoding name.

set_limit

limits the number of data items that will be loaded to a component.

$conn->set_limit([$rowsNum]);

Parameters:

  • the number of data items which should be loaded

set_options

creates a collection of options (attaches OptionsConnector to gridConnector or schedulerConnector). Applicable to gridConnector or schedulerConnector only

$list = new OptionsConnector($res, $dbtype);//initializes OptionsConnector
$list->render_table(
    "types",
    "type_id",
    "type_id(value),name(label)"
); //retrieves data from the 'types' table

$scheduler = new schedulerConnector(
    $res,
    $dbtype
);//initializes schedulerConnector

//attaches OptionsConnector to schedulerConnector
$scheduler->set_options("my_collection", $list);

Parameters:

  • the name of a collection
  • the OptionsConnector object

sort

(available from version 2.0)

sorts a dataset on the server side.

$conn->sort($name,$direction);
//or
$conn->sort($sql_str);

Parameters:

  • $name - the name of a field

  • $direction - the sorting direction ("ASC" or "DESC")

  • $sql_str - the sql statement specifying the sorting logic

See also:

  • Sorting
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataItem Object DHTMLX Docs

Documentation
  • Connector object
  • DataItem Object
    • dhtmlxChart
    • dhtmlxCombo
    • dhtmlxDataView
    • dhtmlxForm
    • dhtmlxGrid
    • dhtmlxTree
    • dhtmlxTreeGrid
    • dhtmlxScheduler
  • DataAction Object
  • Events
Start Client-Server Communication PHP Connector PHP Connector API

DataItem Object

Different components have different sets of methods. Follow the link of component you use.

  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxChart DHTMLX Docs

Documentation
  • dhtmlxChart
    • get_id
    • get_index
    • get_value
    • set_id
    • skip
    • set_value
    • set_userdata
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Start Client-Server Communication PHP Connector PHP Connector API DataItem Object

dhtmlxChart

get_id

returns the id of an item.

$dataItem->get_id();

Parameters:

  • none.

See also:

  • set_id

get_index

returns the index of the currently selected item (for example, in grid, it will be the index of a row )

$dataItem->get_index();

Parameters:

  • none.

get_value

returns the value of a field.

$dataItem->get_value($name);

Parameters:

  • $name - name or alias of the field.

See Also:

  • set_value

set_id

sets the id of an item.

$dataItem->set_id($value);

Parameters:

  • $value - id of the item. See also:

  • get_id

skip

ignores the current item while rendering output. Allows you to define custom filtering rules.

$dataItem->skip()

Parameters:

  • none.

set_value

sets the value of a field.

$dataItem->set_value($name,$value)

Parameters:

  • $name - name or alias of the field
  • $value - value of the item in question

See Also:

  • get_value

set_userdata

(available from version 1.5)

sets user data for the item.

$dataItem->set_userdata($name,$value)

Parameters:

  • $name - the user data name
  • $value - user data string

See also:

  • Formatting/changing data before loading
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxCombo DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
    • get_id
    • get_index
    • get_value
    • select
    • set_id
    • skip
    • set_value
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Start Client-Server Communication PHP Connector PHP Connector API DataItem Object

dhtmlxCombo

get_id

returns the id of an item.

$dataItem->get_id();

See also:

  • set_id

get_index

returns the index of the currently selected item (for example, in grid, it will be the index of a row )

$dataItem->get_index();

Parameters:

  • none.

get_value

returns the value of a field.

$dataItem->get_value($name);

Parameters:

  • $name - name or alias of the field.

See Also:

  • set_value

select

marks the specified combo option as selected.

$dataItem->select();

Parameters:

  • none.

set_id

sets the id of an item.

$dataItem->set_id($value);

Parameters:

  • $value - id of the item.

See also:

  • get_id

skip

ignores the current item while rendering output. Allows you to define custom filtering rules.

$dataItem->skip()

Parameters:

  • none

set_value

sets the value of a field.

$dataItem->set_value($name,$value)

Parameters:

  • $name - name or alias of the field
  • $value - value of the field in question

See Also:

  • get_value
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxDataView DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
    • get_id
    • get_index
    • get_value
    • set_id
    • skip
    • set_value
    • set_userdata
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Start Client-Server Communication PHP Connector PHP Connector API DataItem Object

dhtmlxDataView

get_id

returns the id of an item.

$dataItem->get_id();

See also:

  • set_id

get_index

returns the index of the currently selected item (for example, in grid, it will be the index of a row )

$dataItem->get_index();

Parameters:

  • none.

get_value

returns the value of a field.

$dataItem->get_value($name);

Parameters:

  • $name - name or alias of the field. See Also:

  • set_value

set_id

sets the id of an item.

$dataItem->set_id($value);

Parameters:

  • $value - id of the item.

See also:

  • get_id

skip

ignores the current item while rendering output. Allows you to define custom filtering rules.

$dataItem->skip()

Parameters:

  • none

set_value

sets the value of a field.

$dataItem->set_value($name,$value)

Parameters:

  • $name - name or alias of the field
  • $value - value of the field in question

See Also:

  • get_value

set_userdata

(available from version 1.5)

sets user data for the item.

$dataItem->set_userdata($name,$value)

Parameters:

  • $name - the user data name
  • $value - user data string

See also:

  • Formatting/changing data before loading
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxForm DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
    • get_id
    • get_index
    • get_value
    • set_id
    • skip
    • set_value
    • set_userdata
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Start Client-Server Communication PHP Connector PHP Connector API DataItem Object

dhtmlxForm

get_id

returns the id of an item.

$dataItem->get_id();

See also:

  • set_id

get_index

returns the index of the currently selected item (for example, in grid, it will be the index of a row )

$dataItem->get_index();

Parameters:

  • none.

get_value

returns the value of a field.

$dataItem->get_value($name);

Parameters:

  • $name - name or alias of the field.

See Also:

  • set_value

set_id

sets the id of an item.

$dataItem->set_id($value);

Parameters:

  • $value - id of the item.

See also:

  • get_id

skip

ignores the current item while rendering output. Allows you to define custom filtering rules.

$dataItem->skip()

Parameters:

  • none

set_value

sets the value of a field.

$dataItem->set_value($name,$value)

Parameters:

  • $name - name or alias of the field
  • $value - value of the field in question

See Also:

  • get_value

set_userdata

(available from version 1.5)

sets user data for the item.

$dataItem->set_userdata($name,$value)

Parameters:

  • $name - the user data name
  • $value - user data string

See also:

  • Formatting/changing data before loading
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxGrid DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
    • get_id
    • get_index
    • get_value
    • set_cell_attribute
    • set_cell_class
    • set_cell_style
    • set_id
    • set_options
    • skip
    • set_row_attribute
    • set_row_color
    • set_row_style
    • set_value
    • set_userdata
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Start Client-Server Communication PHP Connector PHP Connector API DataItem Object

dhtmlxGrid

get_id

returns the id of an item

$dataItem->get_id();

See also:

  • set_id

get_index

returns the index of the currently selected item (for example, in grid, it will be the index of a row )

$dataItem->get_index();

Parameters:

  • none.

get_value

returns the value of a field.

$dataItem->get_value($name);

Parameters:

  • $name - name or alias of the field.

See Also:

  • set_value

set_cell_attribute

sets an attribute for a cell of item.

$dataItem->set_cell_attribute($name,$attr,$value)

Parameters:

  • $name - name of alias of the cell
  • $attr - name of attribute
  • $value - value of attribute

See Also:

  • set_cell_style
  • set_cell_class

set_cell_class

sets a css class for a cell of item.

$dataItem->set_cell_class($name,$value);

Parameters:

  • $name - name or alias of the cell
  • $value - css class for the cell

See Also:

  • set_cell_style
  • set_cell_attribute

set_cell_style

sets the style for a cell of item.

$dataItem->set_cell_style($style);

Parameters:

  • $style - HTML style attributes.

See Also:

  • set_cell_class
  • set_cell_attribute

set_id

sets the id of an item.

$dataItem->set_id($value);

Parameters:

  • $value - id of the item.

See also:

  • get_id

set_options

assigns options collection to a column.

$dataItem->set_options($name,$options);

Parameters:

  • $name - the name of the column
  • $options - an array of options or a connector object

Sample:

$grid->set_options("column_id",array("1" => "one", "2" => "two","3" => "three"));
//or
$filter1 = new OptionsConnector($res);
$filter1->render_table("countries","country_id","country_name(value)");
$grid->set_options("column_id",$filter1);

skip

ignores the current item while rendering output. Allows to define custom filtering rules.

$dataItem->skip()

Parameters:

  • none

set_row_attribute

sets attribute for any row in the component.

$dataItem->set_row_attribute($attr,$value);

Parameters:

  • $attr - name of attribute
  • $value - value of attribute

See Also:

  • set_row_style
  • set_row_attribute

set_row_color

sets color for any row in the component.

$dataItem->set_row_color($color)

Parameters:

  • $color - color of a row

See Also:

  • set_row_style
  • set_row_attribute

set_row_style

sets style for any row of the component.

$dataItem->set_row_style($style);

Parameters:

  • $style - HTML style attributes

See Also:

  • set_row_color
  • set_row_attribute

set_value

sets value of a field.

$dataItem->set_value($name,$value)

Parameters:

  • $name - name or alias of the field
  • $value - value of the field in question

See Also:

  • get_value

set_userdata

(available from version 1.5)

sets user data for the item.

$dataItem->set_userdata($name,$value)

Parameters:

  • $name - the user data name
  • $value - user data string

See also:

  • Formatting/changing data before loading
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxTree DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
    • get_check_state
    • get_id
    • get_index
    • get_parent_id
    • get_value
    • set_attribute
    • set_check_state
    • set_id
    • set_image
    • set_kids
    • skip
    • set_value
    • set_userdata
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Start Client-Server Communication PHP Connector PHP Connector API DataItem Object

dhtmlxTree

get_check_state

returns the state of the selected item.

$dataItem->get_check_state();

Returns:

  • state of checkbox related to the item:
  • '0' - unchecked
  • '1' - checked.
  • '-1' - third (custom) state.

See also:

  • set_check_state

get_id

returns the id of an item.

$dataItem->get_id();

See also:

  • set_id

get_index

returns the index of the currently selected item (for example, in grid, it will be the index of a row )

$dataItem->get_index();

Parameters:

  • none

get_parent_id

returns the parent id of the selected item.

$dataItem->get_parent_id();

Parameters:

  • none

get_value

returns the value of a field.

$dataItem->get_value($name);

Parameters:

  • $name - name or alias of the field.

See Also:

  • set_value

set_attribute

allows you to set some attribute for a item.

$dataItem->set_attribute($name, $value);

Parameters:

  • $name - the name of an attribute.
  • $value - the value that an attribute is set to.

set_check_state

allows you to set the state of the checkbox related to an item.

$dataItem->set_check_state($value);

Parameters:

  • $value - state of the item.

    Valid values are:

  • '0' - unchecked.

  • '1' - checked.

  • '-1' - third custom state. See also:

  • get_check_state

set_id

sets the id of an item.

$dataItem->set_id($value);

Parameters:

  • $value - id of the item.

See also:

  • get_id

set_image

allows you to set image for any item in tree.

$dataItem->set_image($img);

Parameters:

  • $img - relative path to image which will be set for a item.

Description:

  • Can be used with variable number of parameters.
$dataItem->set_image($img1,$img2,$img3)
  • $img1 - image of folder in opened state
  • $img2 - image of folder in closed state
  • $img3 - image of leaf item

set_kids

allows you to mark an item as a leaf or branch of tree.

$dataItem->set_kids($is_enabled);

Parameters:

  • $is_enabled - (boolean) specifies whether an item must be marked as a branch.
  • true - item will be marked as a branch.
  • false - item will be marked as a leaf.

See also:

  • Dynamic loading

skip

ignores the current item while rendering output. Allows you to define custom filtering rules.

$dataItem->skip()

Parameters:

  • none

set_value

sets the value of a field.

$dataItem->set_value($name,$value)

Parameters:

  • $name - name or alias of the field
  • $value - value of the field in question

See Also:

  • get_value

set_userdata

(available from version 1.5)

sets user data for the item.

$dataItem->set_userdata($name,$value)

Parameters:

  • $name - the user data name
  • $value - user data string

See also:

  • Formatting/changing data before loading
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxTreeGrid DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
    • get_id
    • get_index
    • get_parent_id
    • get_value
    • set_cell_attribute
    • set_cell_class
    • set_cell_style
    • set_id
    • set_image
    • skip
    • set_row_attribute
    • set_row_color
    • set_row_style
    • set_value
    • set_userdata
  • dhtmlxScheduler
Start Client-Server Communication PHP Connector PHP Connector API DataItem Object

dhtmlxTreeGrid

get_id

returns the id of an item.

$dataItem->get_id();

See also:

  • set_id

get_index

returns the index of the currently selected item (for example, in grid, it will be the index of a row )

$dataItem->get_index();

Parameters:

  • none.

get_parent_id

returns the parent id of the selected item.

$dataItem->get_parent_id();

Parameters:

  • none

get_value

returns the value of a field.

$dataItem->get_value($name);

Parameters:

  • $name - name or alias of the field.

See Also:

  • set_value

set_cell_attribute

sets an attribute for a cell of item.

$dataItem->set_cell_attribute($name,$attr,$value)

Parameters:

  • $name - name of alias of the cell
  • $attr - name of attribute
  • $value - value of attribute

See Also:

  • set_cell_style
  • set_cell_class

set_cell_class

sets the css class for a cell of item.

$dataItem->set_cell_class($name,$value);

Parameters:

  • $name - name or alias of the cell
  • $value - css class for the cell

See Also:

  • set_cell_style
  • set_cell_attribute

set_cell_style

sets the style for a cell of item.

$dataItem->set_cell_style($style);

Parameters:

  • $style - HTML style attributes.

See Also:

  • set_cell_class
  • set_cell_attribute

set_id

sets the id of the item.

$dataItem->set_id($value);

Parameters:

  • $value - id of the item.

See also:

  • get_id

set_image

sets image for all check states of the node in tree.

$dataItem->set_image($img);

Parameters:

  • $img - relative path to image which will be set for the item of tree (relative to the folder with tree's icons).

skip

ignores the current item while rendering output. Allows you to define custom filtering rules.

$dataItem->skip()

Parameters:

  • none

set_row_attribute

sets an attribute for any row in the component.

$dataItem->set_row_attribute($attr,$value);

Parameters:

  • $attr - name of attribute
  • $value - value of attribute

See Also:

  • set_row_style
  • set_row_attribute

set_row_color

sets color for any row in the component.

$dataItem->set_row_color($color)

Parameters:

  • $color - color of a row

See Also:

  • set_row_style
  • set_row_attribute

set_row_style

sets the style for any row of the component.

$dataItem->set_row_style($style);

Parameters:

  • $style - HTML style attributes

See Also:

  • set_row_color
  • set_row_attribute

set_value

sets the value of a field.

$dataItem->set_value($name,$value)

Parameters:

  • $name - name or alias of the field
  • $value - value of the field in question

See Also:

  • get_value

set_userdata

(available from version 1.5)

sets user data for the item.

$dataItem->set_userdata($name,$value)

Parameters:

  • $name - the user data name
  • $value - user data string

See also:

  • Formatting/changing data before loading
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxScheduler DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
    • get_id
    • get_index
    • get_value
    • set_id
    • skip
    • set_options
    • set_value
    • set_userdata
Start Client-Server Communication PHP Connector PHP Connector API DataItem Object

dhtmlxScheduler

get_id

returns the id of an item.

$dataItem->get_id();

See also:

  • set_id

get_index

returns the index of the currently selected item (for example, in grid, it will be the index of a row ).

$dataItem->get_index();

Parameters:

  • none.

get_value

returns the value of a field.

$dataItem->get_value($name);

Parameters:

  • $name - name or alias of the field.

See Also:

  • set_value

set_id

sets the id of an item.

$dataItem->set_id($value);

Parameters:

  • $value - id of the item.

See also:

  • get_id

skip

ignores the current item while rendering output. Allows you to define custom filtering rules.

$dataItem->skip()

Parameters:

  • none

set_options

assigns options collection to a column.

$dataItem->set_options($name,$options);

Parameters:

  • $name - the name of the column
  • $options - an array of options or a connector object

Sample:

$scheduler->set_options("type",array("1" => "one", "2" => "two","3" => "three"));
//or
$options = new OptionsConnector($res);
$options->render_table("types","type_id","type_id(value),type_name(label)");
$scheduler->set_options("type",$options);

set_value

sets the value of a field.

$dataItem->set_value($name,$value)

Parameters:

  • $name - name or alias of the field
  • $value - value of the field in question

See Also:

  • get_value

set_userdata

(available from version 1.5)

sets user data for the item.

$dataItem->set_userdata($name,$value)

Parameters:

  • $name - the user data name
  • $value - user data string

See also:

  • Formatting/changing data before loading
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataAction Object DHTMLX Docs

Documentation
  • Connector object
  • DataItem Object
  • DataAction Object
    • add_field()
    • error()
    • get_data()
    • get_id()
    • get_new_id()
    • get_status()
    • get_value()
    • invalid()
    • remove_field()
    • set_new_id()
    • set_response_attribute()
    • set_response_text()
    • set_response_xml()
    • set_status()
    • set_value()
    • success()
  • Events
Start Client-Server Communication PHP Connector PHP Connector API

DataAction Object

add_field()

allows you to register field for usage while INSERT/UPDATE/DELETE operation.

$action->add_field($name,$value);

Parameters:

  • $name - name or alias of the field
  • $value - value of the field in question

See also:

  • remove_field
  • Making queries

error()

marks provided data as invalid and cancels default UPDATE processing (invalid record will be highlighted in red bold font).

$action->error()

Parameters:

  • none

See Also:

  • invalid
  • Validation

get_data()

returns hash of data values that will take part in INSERT/UPDATE/DELETE operations.

$action->get_data();

Parameters:

  • none.

get_id()

returns the id of the currently selected record.

$action->get_id();

Parameters:

  • none.

get_new_id()

returns the ID received after INSERT operation (valid for afterProcessing event only).

$action->get_new_id()

Parameters:

  • none.

Returns:

  • the id of the record

get_status()

returns action type of the item.

$action->get_status()

Returns:

  • update, insert, delete, error or custom status set through set_status() method

Parameters:

  • none.

See Also:

  • set_status

get_value()

returns value of a field.

$action->get_value($name);

Parameters:

  • $name - name of column or alias.

See Also:

  • set_value
  • Validation

invalid()

marks provided data as invalid and cancels default UPDATE processing (invalid record will be highlighted in bold font).

$action->invalid()

Parameters:

  • none.

See Also:

  • error
  • Validation

remove_field()

allows to remove one of default fields from INSERT/UPDATE/DELETE operation.

$action->remove_field($name,$value);

Parameters:

  • $name - name or alias of the field.
  • $value - value of the field in question.

See Also:

  • add_field

set_new_id()

sets a new ID for a record

$action->set_new_id($id)

Parameters:

  • $id - a new id to be set for the record

set_response_attribute()

allows you to define custom attribute which will be added to the related action tag in XML response.

$action->set_response_attribute($name,$value);

Parameters:

  • $name - name of the attribute.
  • $value - value of the attribute in question.

See Also:

  • set_response_text
  • set_response_xml

set_response_text()

allows you to set string that will be included in response

$action->set_response_text($text);

Parameters:

  • $text - any text value that will be returned on client-side with related action.

See Also:

  • set_response_xml
  • set_response_attribute

set_response_xml()

allows you to set xml-string that will be included in response (if you need to provide just a text - use set_response_text() method).

$action->set_response_xml($text);

Parameters:

  • $text - any text value that will be returned on client-side with related action.

See Also:

  • set_response_text
  • set_response_attribute

set_status()

sets the status of operation.

$action->set_status($value)

Parameters:

  • $value - status of operation.

It can be either some predefined value (updated, inserted, deleted, error) or any custom status. Beware, when you set custom status you cancel default data processing.

See Also:

  • get_status
  • Validation

set_value()

sets value of a field.

$action->set_value($name,$value)

Parameters:

  • $name - name or alias of the field
  • $value - value of the field in question

See Also:

  • get_value

success()

confirms that operation has been executed correctly and cancels any default data processing.

$action->success()

Parameters:

  • in case INSERT operation: a new ID of element ( which will be updated on client-side )

See also:

  • Making queries
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Connector object
  • DataItem Object
  • DataAction Object
  • Events
    • beforeSort
    • beforeFilter
    • beforeRender
    • beforeOutput
    • beforeUpdate
    • beforeInsert
    • beforeDelete
    • afterUpdate
    • afterInsert
    • afterDelete
    • beforeProcessing
    • afterProcessing
    • onDBError
Start Client-Server Communication PHP Connector PHP Connector API

Events

Events list

  • beforeSort Event
  • beforeFilter Event
  • beforeRender Event

  • beforeOutput Event

  • beforeUpdate Event

  • beforeInsert Event

  • beforeDelete Event

  • afterUpdate Event

  • afterInsert Event

  • afterDelete Event

  • beforeProcessing Event

  • afterProcessing Event

  • onDBError Event

Order of execution

data loading

  • incoming request parsed
  • beforeSort
  • beforeFilter
  • sql select executed
  • for each selected record
    • beforeRender
    • generate xml for record
  • output data to client

data updating

  • incoming request parsed
  • global transaction started ( if enabled )
  • beforeProcessing
  • for each record
    • record level transaction if started ( if enabled )
    • beforeInsert/beforeDelete/beforeUpdate
    • record level transaction commited ( if enabled )
  • afterProcessing
  • global transaction commited ( if enabled )
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeSort DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • onDBError
Start Client-Server Communication PHP Connector PHP Connector API Events

beforeSort

The event occurs before data loading and allows to customize sorting of dataset

$conn->event->attach("beforeSort",handlerFunc);

Parameters handlerFunc:

  • $sort_by - SortInterface object

Availability:

  • Available for Grid, Treegrid

Sample:

function custom_sort($sorted_by){
   $sorted_by->rules[0]["name"]="LENGTH(some_field)";// SORT BY LENGTH(some_field)
}
$conn->attach->event("beforeSort","custom_sort");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeFilter DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • onDBError
Start Client-Server Communication PHP Connector PHP Connector API Events

beforeFilter

The event occurs before data loading and allows to customize filtering of dataset.

$conn->event->attach("beforeFilter",handlerFunc);

Parameters handlerFunc:

  • $filter_by - FilterInterface object

Availability:

  • Available for Grid, Combo

Sample:

function custom_filter($filter_by){
       if (!sizeof($filter_by->rules))
             $filter_by->add("some_field","value","LIKE");
//change WHERE some_field LIKE '%value%' to the WHERE some_field > 'value'
       $index = $filter_by->index("some_field");
       if ($index!==false)  //there is client side input for the filter
             $filter_by->rules[$index]["operation"]=">";
}
$conn->event->attach("beforeFilter","custom_filter");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeRender DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • onDBError
Start Client-Server Communication PHP Connector PHP Connector API Events

beforeRender

The event occurs event occurs after data has been selected from the database but before its outputting to client.

$conn->event->attach("beforeRender",handlerFunc);

Parameters handlerFunc:

  • $dataItem - DataItem Object

Availability:

  • Available for Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

Sample:

function color_rows($row){
    if ($row->get_index()%2)
    $row->set_row_color("red");
}

$conn->event->attach("beforeRender","color_rows");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeOutput DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • onDBError
Start Client-Server Communication PHP Connector PHP Connector API Events

beforeOutput

The event occurs event occurs after data has been selected from the database and ready to be sent to client side. Event can be used to mix some custom data in XML output. The most common use-case - header structure for the grid.

$conn->event->attach("beforeOutput",handlerFunc);

Parameters handlerFunc:

  • Doesn't get any parameters

Availability:

  • Available for Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

Sample:

function grid_header(){
    echo '<head>
    <column width="50" type="dyn" align="right" color="white" sort="str">Sales</column>
    <column width="150" type="ed" align="left" color="#d5f1ff" sort="str">Book Title</column>
    </head>';
}
$conn->event->attach("beforeOutput","grid_header");

//In case of dyn. loading mode, one more check need to be added, to prevent data output for additional data calls.
function grid_header(){
        if (!isset($_GET["posStart"]))
        echo '<head>
            <column width="50" type="dyn" align="right" color="white" sort="str">Sales</column>
            <column width="150" type="ed" align="left" color="#d5f1ff" sort="str">Book Title</column>
        </head>';
}
$conn->event->attach("beforeOutput","grid_header");
$conn->dynamic_loading(100);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeUpdate DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • onDBError
Start Client-Server Communication PHP Connector PHP Connector API Events

beforeUpdate

The event occurs before updating values in database and can cancel default update statement or validate incoming values.

$conn->event->attach("beforeUpdate",handlerFunc);

Parameters handlerFunc:

  • $action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample:

// creates and runs a custom update statement using values coming in request,
// cancels the default update
function myUpdate($action){
   $res->query("UPDATE Countries SET item_nm='{$action->get_value('name')}'
                WHERE item_id='{$action->get_id()}'");
   $action->success();
}

// or
// checks if the value of name is empty, then cancels update.
// Otherwise, proceeds with the default update
function myUpdate($action){
    if($action->get_value("name")=="")
    $action->invalid();
}

// or
// sets a new value for name and proceeds with the default update
function myUpdate($action){
    $new_value = rand(0,100);
    $action->set_value("name",$new_value);
}

$conn->event->attach("beforeUpdate","myUpdate");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeInsert DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • onDBError
Start Client-Server Communication PHP Connector PHP Connector API Events

beforeInsert

The event occurs before inserting values into database and can cancel default insert statement or validate incoming values.

$conn->event->attach("beforeInsert",handlerFunc);

Parameters handlerFunc:

  • $action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample:

  • See related beforeUpdate sample.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeDelete DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • onDBError
Start Client-Server Communication PHP Connector PHP Connector API Events

beforeDelete

The event occurs before deleting record in database and can cancel default delete statement or validate incoming values.

$conn->event->attach("beforeDelete",handlerFunc);

Parameters handlerFunc:

  • $action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample:

  • See related beforeUpdate sample.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


afterUpdate DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • onDBError
Start Client-Server Communication PHP Connector PHP Connector API Events

afterUpdate

The event occurs after updating values in database and can be used to pass additional values to client-side.

$conn->event->attach("afterUpdate",handlerFunc);

Parameters handlerFunc:

  • $action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample:

  • See related afterProcessing sample.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


afterInsert DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • onDBError
Start Client-Server Communication PHP Connector PHP Connector API Events

afterInsert

The event occurs after inserting values into database and can can be used to pass additional values to client-side.

$conn->event->attach("afterInsert",handlerFunc);

Parameters handlerFunc:

  • $action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample:

  • See related afterProcessing sample.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


afterDelete DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • onDBError
Start Client-Server Communication PHP Connector PHP Connector API Events

afterDelete

The event occurs after deleting record in database and can be used to pass additional values to client-side.

$conn->event->attach("afterDelete",handlerFunc);

Parameters handlerFunc:

  • $action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample: See related afterProcessing sample.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeProcessing DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • onDBError
Start Client-Server Communication PHP Connector PHP Connector API Events

beforeProcessing

The event occurs before beforeInsert, beforeUpdate, beforeDelete events occur and relates to all operations: Insert, Update and Delete. It can be cancelled in the same way as the aforementioned events.

$conn->event->attach("beforeProcessing",handlerFunc);

Parameters handlerFunc:

  • $action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample: See related beforeUpdate sample.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


afterProcessing DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • onDBError
Start Client-Server Communication PHP Connector PHP Connector API Events

afterProcessing

The event occurs after beforeInsert, beforeUpdate, beforeDelete events occur and relates to all operations: Insert, Update and Delete. It can be used to pass additional values to client side.

$conn->event->attach("afterProcessing",handlerFunc);

Parameters handlerFunc:

  • $action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample:

 //adds new xml as a child of default <action> tag which is passed to client side as response
function doAfterProcessing($action){
       $action->set_response_xml("<guid>some value</guid>")
}
$conn->event->attach("afterProcessing",doAfterProcessing);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


onDBError DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • onDBError
Start Client-Server Communication PHP Connector PHP Connector API Events

onDBError

The event occurs when some DB level error occurs, during data saving operations. It is relates to all operations: Insert, Update and Delete. It can be used to pass error info to the client side.

$conn->event->attach("onDBError",handlerFunc);

Parameters handlerFunc:

  • $action - DataAction Object
  • $exception - SQL related exception object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample:

 //adds new xml as a child of default <action> tag which is passed to client side as response
function doOnDBError($action, $exception){
       $action->set_response_xml("<errorinfo>".((String)$exception)."</errorinfo>")
}
$conn->event->attach("onDBError",doOnDBError);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


General Idea of dhtmlxConnector DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
    • General List of Connectors
    • JSONDataConnector/DataConnector
    • KeyGridConnector
    • MixedConnector
    • OptionsConnector
    • SelectOptionsConnector
    • Tree(TreeGrid)GroupConnector
    • Tree(TreeGrid)MultitableConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

General Idea of dhtmlxConnector

dhtmlxConnector is a server-side library that lets you access data sources. It consists of individual component-specific connectors and a set of additional ones that provide advanced functionality.

A dhtmlxConnector's job is to provide necessary data exchange conditions so that you do not have to deal with the technical details of working with various data stores, systems or services. As such, each type of dhtmlxConnector is designed to use a specific API.

As the library is server-side, it provides different manipulations just on the server backend:

  • loading data (statically or dynamically) from database, File System, Excel file.
  • server-side filtering, sorting and validation.

When you need to deal with the client side as well, i.e. pass data back to the server, you should use DataProcessor additionally (for more details on this topic, read the chapter 'Client-side requirement - dataProcessor').

General List of Connectors

Component-specific:

  • ChartConnector (relates to Chart)
  • ComboConnector (relates to Combo)
  • DataViewConnector (relates to DataView)
  • FormConnector (relates to Form)
  • GridConnector (relates to Grid)
  • SchedulerConnector (relates to Scheduler)
  • TreeConnector (relates to Tree)
  • TreeGridConnector (relates to TreeGrid)

Additional (most important):

  • JSONDataConnector/DataConnector (relates to touch-oriented libraries: DataTable, dhtmlXDataStore)
  • KeyGridConnector
  • MixedConnector
  • OptionsConnector
  • SelectOptionsConnector
  • TreeGroupConnector/TreeGridGroupConnector
  • TreeMultitableConnector/TreeGridMultitableConnector

Throughout the documentation you'll see examples in which 'GridConnector' is used. If your use a different component, just replace GridConnector with the appropriate connector type.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


JSONDataConnector/DataConnector DHTMLX Docs

Documentation
  • JSONDataConnector/DataConnector
    • Common
    • Adding tags/sections to data
    • Simple Data Transfer
  • KeyGridConnector
  • MixedConnector
  • OptionsConnector
  • SelectOptionsConnector
  • Tree(TreeGrid)GroupConnector
  • Tree(TreeGrid)MultitableConnector
Start Client-Server Communication PHP Connector General Idea of dhtmlxConnector

JSONDataConnector/DataConnector

Common

There are 2 connectors you can use for touch-oriented DHTMLX libraries (such as DataTable, DataStore):

  • DataConnector
  • JSONDataConnector

They both work the same way, but differ in type of returned data.

<?php
require_once("../../connector/data_connector.php");
require_once("../../connector/db_sqlite.php");

if (!$db = sqlite_open('db', 0777, $sqliteerror)) {
    die($sqliteerror);
}
$data = new JSONDataConnector($db,"SQLite");
$data->render_table("users", "id", "name,age,city");
?>

DataConnector

DataConnector generates 'XML' data feed as in:

<data>
   <item id="1" title="War and Peace"  author="Leo Tolstoy"/>
   <item id="2" title="Hamlet"         author="William Shakespeare"/>
   <item id="3" title="Madame Bovary"  author="Gustave Flaubert"/>
</data>

JSONDataConnector

JSONDataConnector generates 'JSON' data feed as in:

[
   { id:"1", title:"War and Peace",    author:"Leo Tolstoy" },
   { id:"2", title:"Hamlet",           author:"Shakespeare" },
   { id:"3", title:"Madame Bovary",    author:"Gustave Flaubert" }
]

Adding tags/sections to data

Starting from version 1.5, there is a possibility to add the first child tags, sections to data returned by the connector. To add a tag(section), use method add_section.

DataConnector

For example, if you call add_section as follows:

$data = new JSONDataConnector($db,"SQLite");
$data->add_section("config", "some_data");
$data->add_section("config2", "<column>data1</column><column>data2</column>");

DataConnector produces the next data:

<data>
    <config>some_data</config>
    <config2><column>data1</column><column>data2</column></config2>
    <item id="1" attr1="qwe" attr2="asd" />
    <item id="2" attr1="qwe" attr2="asd" />
</data>

JSONDataConnector

If you call add_section as follows:

$data = new JSONDataConnector($db,"SQLite");
$data->add_section("config", "'some_data'");
$data->add_section("config2", "{ column1: 'data1'}");

JSONDataConnector produces the next data:

{
    data: [
      { 'id': '1', 'attr1':'qwe', 'attr2':'asd'},
      { 'id': '2', 'attr1':'qwe', 'attr2':'asd'}
    ],
    config: 'some_data',
    config2: { 'column1':'data1' },
}

Simple Data Transfer

JSONDataConnector/DataConnector supports simplified protocol for CRUD requests.

  • get all data
 GET  data.php?action=get

server response - collection of json (xml) objects

  • get info for some specific record
 GET   data.php?action=get&id=123

response - json(xml) object

  • delete
 GET  data.php?action=delete
 POST id=123

server response - 'true'/'false'

  • insert
 GET  data.php?action=insert
 POST id=123&some=value&other=value

response on success

true
<new_id>

or

 false

on failed insert operation

  • update
 GET  data.php?action=delete
 POST id=123&some=value&other=value

response - 'true'/'false'

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


KeyGridConnector DHTMLX Docs

Documentation
  • JSONDataConnector/DataConnector
  • KeyGridConnector
  • MixedConnector
  • OptionsConnector
  • SelectOptionsConnector
  • Tree(TreeGrid)GroupConnector
  • Tree(TreeGrid)MultitableConnector
Start Client-Server Communication PHP Connector General Idea of dhtmlxConnector

KeyGridConnector

A normal grid connector expects that the target table has some autogenerated ID field, but in some cases data needs to be loaded and saved from a database table which doesn't have such an autofilled ID.

A normal grid connector can be used for data loading from such tables, but won't be able to save the data back. KeyGridConnector can resolve such a problem (use it instead of GridConnector):

$grid = new KeyGridConnector($res);
$grid->render_table("mytable","name","name,address,phone");

So, there are two differences from the normal GridConnector:

  • the name of the connector class (GridConnector->KeyGridConnector);
  • one of data fields is used as ID.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


MixedConnector DHTMLX Docs

Documentation
  • JSONDataConnector/DataConnector
  • KeyGridConnector
  • MixedConnector
  • OptionsConnector
  • SelectOptionsConnector
  • Tree(TreeGrid)GroupConnector
  • Tree(TreeGrid)MultitableConnector
Start Client-Server Communication PHP Connector General Idea of dhtmlxConnector

MixedConnector

Starting from version 2.0, the library has a new connector type - MixedConnector.

The connector allows you to combine data configured by several connectors in one dataset and load it in one request instead of sending several ones that can rather decrease the number of requests to the server.

$res= new PDO("mysql:dbname=$mysql_db;host=$mysql_server",$mysql_user,$mysql_pass);

$data1 = new JSONDataConnector($res);
$data1->configure("country_data", "country_id", "name,full_name,type");

$data2 = new JSONTreeDataConnector($res);
$data2->configure("tasks_data","taskId","taskName","","parentId");

$conn = new MixedConnector($res);
$conn->add("countries", $data1);
$conn->add("tasks", $data2);
$conn->render(); //retrieves configured data from the server

Look up API reference, to learn more about the parameters that the methods in the snippet above take.

The retrieved data will look as in:

{
    countries: [
        {
            id: "1",
            name: "Afghanistan",
            full_name: "Islamic State of Afghanistan",
            type: "Independent State"
        },
        {
            id: "2",
            name: "Albania",
            full_name: "Republic of Albania",
            type: "Independent State"
        }
    ],

    tasks: {
        parent: "0",
        data: [{
            id: "1000",
            taskName: "dhtmlXGrid",
            data: [{
                id: "1001",
                taskName: "Version 1.1",
            }]
       }]
    }
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


OptionsConnector DHTMLX Docs

Documentation
  • JSONDataConnector/DataConnector
  • KeyGridConnector
  • MixedConnector
  • OptionsConnector
    • Important Notification
  • SelectOptionsConnector
  • Tree(TreeGrid)GroupConnector
  • Tree(TreeGrid)MultitableConnector
Start Client-Server Communication PHP Connector General Idea of dhtmlxConnector

OptionsConnector

The OptionsConnector is used to retrieve 'value':'label' pairs based on the fields from the database. This connector can be useful, for example, to load sections to the Timeline, Units views of dhtmlxScheduler or the combo editor of dhtmlxGrid that require data to have 2 mandatory properties:

  • value - the item id;
  • label - the item label.

Note, OptionsConnector is used only in pair with schedulerConnector or gridConnector. To attach OptionsConnector, use the set_options() method that takes 2 parameters:

  1. The name of a collection
  2. The OptionsConnector object

For example, to load sections to the Units view of dhtmlxScheduler, use the code as in:

<?php
 include('connector-php/codebase/scheduler_connector.php'); // includes the file

 // connects to the server with DB named 'sampleDB'
 $res=new PDO("mysql:dbname=sampleDB;host=localhost","root","");

 $list = new OptionsConnector($res, $dbtype);//initializes OptionsConnector
 // retrieves data from the 'types' table
 $list->render_table("types","type_id","type_id(value),name(label)");

 $scheduler = new schedulerConnector($res, $dbtype); // initializes schedulerConnector

 // attaches OptionsConnector to schedulerConnector
 $scheduler->set_options("units", $list);
 // retrieves data from the 'events' table
 $scheduler->render_table("events","event_id","start_date,end_date,text,type");
?>
scheduler.createUnitsView({
    name:"unit",
    property:"type_id",
    list:scheduler.serverList("units")
});

Important Notification

Pay attention to the fact that you mustn't change the second param "value" and the third param "value,label" in "render_complex_sql" query, otherwise the OptionsConnector won't work correctly.

// generate your sql
$sql = "SELECT ".
            "option_id AS value, ".     //  field should be named "value"            "option_label AS label ".   //  field should be named "label"            "FROM ... ";

// init connector
$opts = new OptionsConnector($mysqli, "MySQLi");

// perform query
$opts->render_complex_sql(
        $sql,           // sql query from above
        "value",        //  id field, important        "value,label"   //  fields to select, both value,label are required);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


SelectOptionsConnector DHTMLX Docs

Documentation
  • JSONDataConnector/DataConnector
  • KeyGridConnector
  • MixedConnector
  • OptionsConnector
  • SelectOptionsConnector
  • Tree(TreeGrid)GroupConnector
  • Tree(TreeGrid)MultitableConnector
Start Client-Server Communication PHP Connector General Idea of dhtmlxConnector

SelectOptionsConnector

SelectOptionsConnector is used by the dhtmlxForm component to fill a list of options for the 'select' item.

Don't confuse SelectOptionsConnector with OptionsConnector. The second one is an auxiliary connector and used just in the context of dhtmlxGrid and dhtmlxScheduler components. SelectOptionsConnector is an independent connector able to generate output XML data.

So, to define options of the select form's item you should make the following:

1. On the client side you should specify the parameter 'connector':

var formData = [
    {type: "select", label: "Categories", connector:"options.php"},
    {type: "button", value: "Proceed"}
];
myForm = new dhtmlXForm("form_container", formData);

2. On the server side your code will look like this:

<?php
require_once("../codebase/connector/options_connector.php");
$res=new PDO("mysql:dbname=tasks;host=localhost","root","");

$data = new SelectOptionsConnector($res, "MySQL");
$data->render_table("categories","id","value, label");

?>

The render_table method takes the following parameters:

  • 'categories' - the name of table.
  • 'id' - the id column
  • 'value' - the column that will be used as values of options.
  • 'label' - the column that will be used as labels of options.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Tree(TreeGrid)GroupConnector DHTMLX Docs

Documentation
  • JSONDataConnector/DataConnector
  • KeyGridConnector
  • MixedConnector
  • OptionsConnector
  • SelectOptionsConnector
  • Tree(TreeGrid)GroupConnector
  • Tree(TreeGrid)MultitableConnector
Start Client-Server Communication PHP Connector General Idea of dhtmlxConnector

Tree(TreeGrid)GroupConnector

The default connector for Tree and TreeGrid expects that data in DB is stored with child-parent key relation. But in some cases, Tree or TreeGrid need to be shown from plain data (by grouping it). Such a task can be resolved with help of the TreeGroupConnector or TreeGridGroupConnector.

For example, a table 'products' is grouped by category. As a result, the top level is 'categories', the second level - 'products', related to the category.

//tree
require("./codebase/connector/tree_group_connector.php");

$tree = new TreeGroupConnector($res);
$tree->render_table("products2", "id", "product_name", "", "category");

//treeGrid
<code php>
require_once('../../codebase/treegridgroup_connector.php');

$treegrid = new TreeGridGroupConnector($res,"MySQL");
$treegrid->render_table("products2","id","product_name,scales,colour","","category");

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Tree(TreeGrid)MultitableConnector DHTMLX Docs

Documentation
  • JSONDataConnector/DataConnector
  • KeyGridConnector
  • MixedConnector
  • OptionsConnector
  • SelectOptionsConnector
  • Tree(TreeGrid)GroupConnector
  • Tree(TreeGrid)MultitableConnector
    • Tree
    • TreeGrid
Start Client-Server Communication PHP Connector General Idea of dhtmlxConnector

Tree(TreeGrid)MultitableConnector

Connectors will work only if the dynamic loading mode on the client side is enabled (use the setXMLAutoLoading() method for Tree, the enablePaging() or enableSmartRendering() methods for TreeGrid).

In many cases, Tree or TreeGrid need to be built from multiple tables (each table represents a separate level of Tree/TreeGrid). For this purpose TreeMultitableConnector/TreeGridMultitableConnector (instead of TreeConnector/TreeGridConector) should be used .

Tree

require("../../codebase/treemultitable_connector.php");

$tree = new TreeMultitableConnector($res);
$tree->setMaxLevel(3);
$level = $tree->get_level();

switch ($level) {
    case 0:
        $tree->render_table("projects2","project_id","project_name","","");
        break;
    case 1:
        $tree->render_sql(
        "SELECT teams2.team_id,teams2.team_name,project_team2.project_id
        FROM teams2 INNER JOIN project_team2 ON teams2.team_id=project_team2.team_id",
        "team_id","team_name","","pro_id");
        break;
    case 2:
        $tree->render_table("developers2","developer_id","developer_name","",
        "developer_team");
        break;
    case 3:
        $tree->render_table("phones2", "phone_id", "phone", "", "phone_developer");
        break;
}

TreeGrid

require("../../codebase/treegridmultitable_connector.php");

$treegrid = new TreeGridMultitableConnector($res);
$treegrid->setMaxLevel(3);
$level = $treegrid->get_level();
...

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing PHP Connector DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
    • Client side
    • Server side
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Initializing PHP Connector

To use the functionality of DHTMLX Connector, firstly you should initialize it.

Generally, both client and server sides are concerned in it.

Client side

If you need just to load data from database (with or without data preprocessing)

Specify connector file in the load method of a component.

//index.html
myGrid = new dhtmlXGridObject("someContainer");// initializes grid
...
myGrid.load("my_connector.php");

If you need to perform any update operations

  1. Specify the connector file in the load method of a component.
  2. Initialize dhtmlxDataProcessor on the client side (read more about it here).
//index.html
myGrid = new dhtmlXGridObject("someContainer");// initializes grid
...
myGrid.load("my_connector.php");
myDP = new dataProcessor("myconnector.php");// initializes dhtmlxDataProcessor
myDP.init(myGrid);

Samples of Client-Side Initialization

Server side
  1. Include an appropriate connector file into the page.
  2. Create Database connection.
  3. Specify the UTF-8 character encoding for database.
  4. Instantiate the connector object. Linking variable is a mandatory parameter in all constructors. The second parameter(database type) is optional. It's “MySQL” by default. Other possible variants you may see here.
  5. The last step is data configuration.
//my_connector.php
require("connector/grid_connector.php");// connector file
$res=new PDO("mysql:dbname=myDatabase;host=localhost","root","");// db connection
// connector object; parameters: db connection and the type of the used db
$gridConn = new GridConnector($res,"MySQL");
$gridConn->render_table("mytable","item_id","item_nm,item_cd");// data configuration

Samples of Server-Side Initialization

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Components Functionality DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
    • Chart
    • Combo
    • DataStore
    • DataView
    • Form
    • Grid
    • Tree
    • TreeGrid
    • Scheduler
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Components Functionality

  • Chart
  • Combo
  • DataStore
  • DataView
  • Form
  • Grid
  • Tree
  • TreeGrid
  • Scheduler
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Chart DHTMLX Docs

Documentation
  • Chart
  • Combo
  • DataStore
  • DataView
  • Form
  • Grid
  • Tree
  • TreeGrid
  • Scheduler
Start Client-Server Communication PHP Connector Components Functionality

Chart

Functionality supported by dhtmlxConnector

  • Data loading
  • Formatting/changing data before loading
  • Dynamic loading
  • Server-side logging
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Combo DHTMLX Docs

Documentation
  • Chart
  • Combo
  • DataStore
  • DataView
  • Form
  • Grid
  • Tree
  • TreeGrid
  • Scheduler
Start Client-Server Communication PHP Connector Components Functionality

Combo

Functionality supported by dhtmlxConnector:

  • Dynamic loading
  • Formatting/changing data before loading
  • Server-side filtering
  • Server-side logging
  • Server-side sorting
  • Static loading from database tables, File System, Excel files

Functionality supported by dhtmlxConnector & dataProcessor:

  • Client-side logging
  • Client-side validation
  • Elementary DB actions with dhtmlxConnector
  • Making complex queries
  • Making simple queries
  • Server-side validation
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataStore DHTMLX Docs

Documentation
  • Chart
  • Combo
  • DataStore
  • DataView
  • Form
  • Grid
  • Tree
  • TreeGrid
  • Scheduler
Start Client-Server Communication PHP Connector Components Functionality

DataStore

Functionality supported by dhtmlxConnector

  • Dynamic loading
  • Formatting/changing data before loading
  • Server-side filtering
  • Server-side logging
  • Server-side sorting
  • Static loading from database tables, File System, Excel files

Functionality supported by dhtmlxConnector & dataProcessor:

  • Client-side logging
  • Client-side validation
  • Elementary DB actions with dhtmlxConnector
  • Making complex queries
  • Making simple queries
  • Server-side validation
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataView DHTMLX Docs

Documentation
  • Chart
  • Combo
  • DataStore
  • DataView
  • Form
  • Grid
  • Tree
  • TreeGrid
  • Scheduler
Start Client-Server Communication PHP Connector Components Functionality

DataView

Functionality supported by dhtmlxConnector

  • Dynamic loading
  • Formatting/changing data before loading
  • Server-side filtering
  • Server-side logging
  • Server-side sorting
  • Static loading from database tables, File System, Excel files

Functionality supported by dhtmlxConnector & dataProcessor:

  • Client-side logging
  • Client-side validation
  • Elementary DB actions with dhtmlxConnector
  • Making complex queries
  • Making simple queries
  • Server-side validation
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Form DHTMLX Docs

Documentation
  • Chart
  • Combo
  • DataStore
  • DataView
  • Form
  • Grid
  • Tree
  • TreeGrid
  • Scheduler
Start Client-Server Communication PHP Connector Components Functionality

Form

Functionality supported by dhtmlxConnector

  • Dynamic loading
  • Formatting/changing data before loading
  • Server-side filtering
  • Server-side logging
  • Server-side sorting
  • Static loading from database tables, File System, Excel files

Functionality supported by dhtmlxConnector & dataProcessor:

  • Client-side logging
  • Client-side validation
  • Elementary DB actions with dhtmlxConnector
  • Making complex queries
  • Making simple queries
  • Server-side validation
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Grid DHTMLX Docs

Documentation
  • Chart
  • Combo
  • DataStore
  • DataView
  • Form
  • Grid
    • Defining Grid Structure on Server Side
    • Select/Combobox Columns in Grid
  • Tree
  • TreeGrid
  • Scheduler
Start Client-Server Communication PHP Connector Components Functionality

Grid

Functionality supported by dhtmlxConnector

  • Defining grid structure on server side
  • Dynamic loading
  • Formatting/changing data before loading
  • Loading from tables that don't contain identity field
  • Select/combo box columns in Grid
  • Server-side data export to PDF, Excel
  • Server-side filtering
  • Server-side logging
  • Server-side sorting
  • Static loading from database tables, File System, Excel files

Functionality supported by dhtmlxConnector & dataProcessor:

  • Client-side logging
  • Client-side validation
  • Elementary DB actions with dhtmlxConnector
  • Making complex queries
  • Making simple queries
  • Server-side validation
  • Transactions
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Defining Grid Structure on Server Side DHTMLX Docs

Documentation
  • Defining Grid Structure on Server Side
    • Automatic defining
    • Manual defining
    • Related samples
  • Select/Combobox Columns in Grid
Start Client-Server Communication PHP Connector Components Functionality Grid

Defining Grid Structure on Server Side

APPLICABLE TO: Grid

Starting from version 1.0, connectors can be used to define the header of Grid.

It can be done in 2 ways:

  • automatic
  • manual

Automatic defining

In case of automatic defining, Grid will use names of a table's fields as labels for the columns.

require("../../codebase/grid_connector.php");
$grid = new GridConnector($res);

$grid->set_config(new GridConfiguration());
$grid->render_table("grid50000","item_id","item_nm,item_cd");

If you want to apply an automatic server-side sorting and filtering for the specified columns, you should specify true inside of GridConfiguration:

$grid->set_config(new GridConfiguration(true));
$grid->render_table("grid50000","item_id","item_nm,item_cd");

Manual defining

In the manual mode the headers and their parameters are defined by php command. Names of commands mimic the names of the js commands with a similar functionality.

$config = new GridConfiguration();
$config->setHeader(array("column 1","column 2"));
$config->setColTypes(array("ro","ed"));

$grid->set_config($config);

$grid->render_table("grid50000","item_id","item_nm,item_cd");

Available commands

All commands below get as the input parameter an array of values or a comma-separated string, delimited by 'header delimiter' (default value - ',').

// column labels
$config->setHeader($names);
// column types
$config->setColTypes($typeStr);
// column IDs
$config->setColIds($idsStr);
// column width, int values, will be processed as size in pixels
$config->setInitWidths($widths);
// column width, int value, will be threated as size in percents
$config->setInitWidthsP($widths);
// column align
$config->setColAlign($alStr);
// column sorting type
$config->setColSorting($sortStr);
// column color
$config->setColColor($colorStr);
// visibility of a column
$config->setColHidden($hidStr);//'true' if a column must be hidden, 'false' otherwise.

Header and footer

To attach a header to the grid you should use the attachHeader() method:

$config->attachHeader($values, $styles = null);

Parameters:

  • array or string of header names. In case of a string, the names are delimited by 'header delimiter' (default value -',')
  • array or string of header styles. In case of a string, the styles are delimited by 'header delimiter' (default value - ',')

To attach a footer to the grid you should use the attachFooter() method:

$config->attachFooter($values, $styles = null);

Parameters:

  • array or string of footer names. In case of a string, the names are delimited by 'header delimiter' (default value - ',')
  • array or string of footer styles. In case of a string, the styles are delimited by 'header delimiter' (default value - ',')

Header delimiter

The header delimeter sets a symbol or several symbols which will be used as a delimiter in string arguments.

$config->setHeaderDelimiter($headerDelimiter);

Related samples
  • Defining Grid Structure on Server Side
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Select/Combobox Columns in Grid DHTMLX Docs

Documentation
  • Defining Grid Structure on Server Side
  • Select/Combobox Columns in Grid
Start Client-Server Communication PHP Connector Components Functionality Grid

Select/Combobox Columns in Grid

When on the client side you specify co/coro/combo columns (combo-box/select) in a grid, the grid will automatically request data for them in the same manner as for the filtering options.

Grid will use the DISTINCT select against the related field by default, and fetch all possible options.

If you need to define a custom list of options you can use one of 2 ways:

  • a hardcoded list
//value=>label
$grid->set_options("item_nm",array("1"=> "one", "2"=>"two","3"=> "three"));
$grid->render_table("grid50","item_id","item_nm,item_cd");
  • a list created on the base of a different table
$options = new OptionsConnector($res,"MySQL");
$options->render_table("countries","country_id","country_id(value),country_name(label)");
//or $options->render_sql("Select country_id as value,country_name as
//label from countries","country_id","country_id(value),country_name(label)");

$grid->set_options("item_nm",$options);

$grid->render_table("grid50","item_id","item_nm,item_cd");

co/combo type

  • when using a predefined list of data, both values and labels need to be provided
  • when using a connector, there must be two fields selected, one as (value), the second one as (label)

coro type:

  • only labels need to be provided
  • a connector may define only the label parameter
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Tree DHTMLX Docs

Documentation
  • Chart
  • Combo
  • DataStore
  • DataView
  • Form
  • Grid
  • Tree
  • TreeGrid
  • Scheduler
Start Client-Server Communication PHP Connector Components Functionality

Tree

Functionality supported by dhtmlxConnector

  • Dynamic loading
  • Formatting/changing data before loading
  • Loading tree data from multiple tables
  • Loading tree data from tables that don't contain relation field
  • Marking an item as a leaf or branch
  • Server-side filtering
  • Server-side logging
  • Server-side sorting
  • Static loading from database tables, File System, Excel files

Functionality supported by dhtmlxConnector & dataProcessor:

  • Client-side logging
  • Client-side validation
  • Elementary DB actions with dhtmlxConnector
  • Making complex queries
  • Making simple queries
  • Server-side validation
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


TreeGrid DHTMLX Docs

Documentation
  • Chart
  • Combo
  • DataStore
  • DataView
  • Form
  • Grid
  • Tree
  • TreeGrid
  • Scheduler
Start Client-Server Communication PHP Connector Components Functionality

TreeGrid

Functionality supported by dhtmlxConnector

  • Dynamic loading
  • Formatting/changing data before loading
  • Loading tree data from multiple tables
  • Loading tree data from tables that don't contain relation field
  • Marking an item as a leaf or branch
  • Server-side filtering
  • Server-side logging
  • Server-side sorting
  • Static loading from database tables, File System, Excel files

Functionality supported by dhtmlxConnector & dataProcessor:

  • Client-side logging
  • Client-side validation
  • Elementary DB actions with dhtmlxConnector
  • Making complex queries
  • Making simple queries
  • Server-side validation
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Scheduler DHTMLX Docs

Documentation
  • Chart
  • Combo
  • DataStore
  • DataView
  • Form
  • Grid
  • Tree
  • TreeGrid
  • Scheduler
    • Select-Box Columns in Scheduler
Start Client-Server Communication PHP Connector Components Functionality

Scheduler

Functionality supported by dhtmlxConnector

  • Select box columns
  • Dynamic loading
  • Formatting/changing data before loading
  • Server-side filtering
  • Server-side logging
  • Server-side sorting
  • Static loading from database tables, File System, Excel files

Functionality supported by dhtmlxConnector & dataProcessor:

  • Client-side logging
  • Client-side validation
  • Elementary DB actions with dhtmlxConnector
  • Making complex queries
  • Making simple queries
  • Server-side validation
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Select-Box Columns in Scheduler DHTMLX Docs

Documentation
  • Select-Box Columns in Scheduler
Start Client-Server Communication PHP Connector Components Functionality Scheduler

Select-Box Columns in Scheduler

When Scheduler has a select-like collections or unit/timeline view, it's possible to load a list of related options from a server. In such a case data loading needs to be defined on the client side as:

some_collection=scheduler.serverList("type");

On the server side, a list of options can be retrieved in 2 ways:

  • a hardcoded list
//both values and labels need to be provided
//value=>label
$scheduler->set_options("type",array("1"=> "one", "2"=>"two","3"=> "three"));
$scheduler->render_table("events","event_id","start_date,end_date,text,type_id");
  • a list created on the base of a different table
$options = new OptionsConnector($res);
//there must be two fields selected: one as (value), second as (label)
$options->render_table("types","type_id","type_id(value),type_name(label)");
$scheduler->set_options("type",$options);

$scheduler->render_table("events","event_id","start_date,end_date,text,type_id");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Basic Loading DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
    • Loading from Database
    • Loading from PHP array
    • Returning data as a string
    • Loading data configured by several connectors in one request
    • Loading from File System
    • Loading from Excel file
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Basic Loading

In this chapter you'll find basic information concerning static loading of data from:

  • database
  • File System
  • PHP array
  • Excel file

In order to load data correctly your 'id' field in the database must be autoincrement.

Loading from Database

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form, DataStore components

Loading characteristics are defined at the stage of component configuration.

There are 3 ways of specifying the desired data:

  • by the render_table() method when you work with one table
  • by the render_sql() method when you work with several tables
  • by the render_complex_sql() method when you use it to call stored procedures in the database + to implement complex queries

Work with one table

When all the necessary data is placed in one database table, you should use the render_table() method:

$grid->render_table("grid50","item_id","item_nm,item_cd", "extra1, extra2");

Parameters:

  • database table name
  • the name of the identity field (optional)
  • a list of fields which should be used as values of a component item (cells of grid, item label in tree, text of option in combo)
  • a list of extra fields (you may learn more about extra fields here)

If you want to render all fields from DB ( except for the key field ), you can use a simplified command:

$grid->render_table("grid50");

That's enough to make the connector implement the select, insert, update and delete operations.

Work with several tables

If your SQL statement contains more than one table, the connector won't be able to generate the insert/update/delete operations correctly and you will need to make one from the following actions:

  1. Define SQL for each operation manually
  2. Use server-side events to define your own processing logic
  3. Define different configs for select and update operations

The 3rd approach is shown in the code snippet below:

if ($grid->is_select_mode())//code for loading data
    $grid->render_sql("Select * from tableA, tableB  where  tableA.id=tableB.id",
        "a.id","name,price,other");
else //code for other operations - i.e. update/insert/delete
    $grid->render_table("tableA","id","name,price");

With such an init code a grid will be loaded with three columns of data from 2 tables, but during the saving only the data from the first table will be saved.

Complex queries

You are allowed to use any SQL statements to populate a dhtmlx component through dhtmlxConnector. For complex SQL queries we highly recommend you to use the render_complex_sql() method:

$grid->render_complex_sql("SELECT name from tableA WHERE dept =
    (SELECT dept FROM tableB where name 'John')",
        "contact_id","name,surname,age,address","extra1, extra2");

Parameters:

  • sql statement
  • name of identity field (optional)
  • a list of fields which should be used as values of component item (cells for grid, item label for tree, text of option for combo)
  • a list of extra fields (you may get more info about extra fields here)
  • parent ID field name for hierarchical structures (required for tree and treegrid)

In case your SQL query was against a single table, it is quite probable that the insert/update/delete operations do not require any additional code. dhtmlxConnector will parse your SQL and generate the insert/update/delete statements based on the used table and fields' names.

Joining tables

Starting from version 2.0 dhtmlxConnector allows querying data from 2 tables, based on a relationship between specific columns in these tables.

Let's assume that we have 2 relational tables: events and types.

To join these tables, follow the next steps:

1) Create and configure a connector object for the child table:

$details = new JSONDataConnector($res);
$details->configure("types","type_id","name, alarm");

2) Create a connector object for the parent (primary) table and call the method mix() to set the relationship between the parent and child tables:

$events = new JSONSchedulerConnector($res);
$events->mix("types", $details, array(
    "type_id" => "type"
));

3) Call the method render_table to retrieve the above configured data:

$events->render_table("events","event_id","text,start_date,end_date,type", "", "");

After completing these 3 steps, the server will return data as in:

{
    data:[
        {
            id:"1",
            text:"Energy and Environment Conference",
            start_date:"2012-03-02 10:00:00",
            end_date:"2012-03-04 18:00:00",
            type:"2",
            types:{
                id:"2",
                name:"appointment",
                alarm:"0"
            }
        },
        {
            id:"2",
            text:"Drinking beer with the guys",
            start_date:"2012-03-05 20:00:00",
            end_date:"2012-03-05 23:00:00",
            type:"3",
            types:{
                id:"3",
                name:"memo",
                alarm:"1"
                }

        }
    ]
}

Calling stored procedures

Starting from version 1.5, you can load data using stored procedures in SQL statements. The library provides a special method for this purpose - render_complex_sql.

$grid->render_complex_sql("exec usp_findusers 'John'","id","name,surname,age,
    address,phone");

Extra data

The last parameter of the render_array, render_sql, render_complex_sql, render_table methods allows you to define a list of fields which will be extracted from database table but won't be sent to the client side.

These fields can be used as attributes or flags, mapped to different properties of records ( userdata, row styles, images, etc. ).

$grid->render_table("tableA","id","name,price","extra1,extra2");
// or
$grid->render_sql("Select * from tableA, tableB  where  tableA.id=tableB.id",
    "table_a_id","name,price,other","extra1,extra2");

The extra1 and extra2 fields will be available in all the server-side events but won't be sent to the client side, and won't be included into update/insert operations.

Adding 'key:value' pairs to data items

Starting from version 2.0 you can add a custom key:value pair(s) to all items of the dataset at once. The adding is realized with the help of the method mix().

For example, the following script

$conn = new JSONDataConnector($res);
$conn->mix("active", "yes");
$conn->render_table("tasks","id","name,start_date,end_date");

produces data as in:

[
  {
       id: "1",
       name: "Project #599-57486AN",
       start_date: "2012-05-12 10:00:00",
       end_date: "2012-10-12 10:00:00",
       active: "yes"
  },
  {
       id: "2",
       name: "Project #600-64739GH",
       start_date: "2012-05-20 09:00:00",
       end_date: "2013-05-12 10:00:00",
       active: "yes"
  }
]

Tree and TreeGrid specificity

In case of Tree and TreeGrid, the render_array, render_sql, render_complex_sql and render_table accept one more parameter - the relation ID. For the default TreeGrid hierarchy it's the name of the field which will be used to link the parent and child records.

$treeGrid->render_table("tableA","id","name,price","","parent_id");
// or
$treeGrid->render_sql("Select * from tableA, tableB  where  tableA.id=tableB.id",
    "a.id","name,price,other","","parent_id");

Aliases

To make the usage of extracted data handier you can use aliases for DB field names (makes sense only if you use the server-side events):

$grid->render_table("tableA","id","name,price(product_price)");
// or
$grid->render_sql("Select *,tableA.id as aid from tableA, tableB  where
    tableA.id=tableB.id", "tableA.id(aid)","name,price(product_price),other");

Back to top

Loading from PHP array

Starting from version 1.5, instead of database you can load data from a PHP array which can be filled by any kind of external logic.

To load data from a PHP array, use the method render_array. Be careful, the method can't be used for storing data, but you still can use event handlers, or a custom model to intercept data saving commands and process them in some custom way.

Parameters:

  • name of a PHP array or the PHP array itself
  • name of the identity field (optional)
  • a list of fields which should be used as values of component item (cells for grid, item label for tree, text of option for combo)
  • a list of extra fields (learn more about extra fields from here)
  • parent ID field name for hierarchical structures (required for tree and treegrid)
$data = array(
    array("id"=> "1", "product" =>"Phone AB12",     price:"460"),
    array("id"=> "2", "product"=>"Tablet device",   price:"830")
);
$conn->render_array($data, "id", "product,price");

Back to top

Returning data as a string

Starting from version 2.0, dhtmlxConnector allows getting data as a string instead of loading it directly into the client.

To get data generated by dhtmlxConnector on the server side, call the asString command with the true parameter:

$conn->asString(true);

Once you've done it, the render-related methods stop to retrieve data on the client and start to give it up as a return value.

$res= new PDO("mysql:dbname=$mysql_db;host=$mysql_server",$mysql_user,$mysql_pass);

$conn = new GridConnector($res,"MySQL");
$conn->asString(true);

$result = $conn->render_table("tevents","event_id","text,start_date,end_date");
  • The $result variable will contain the generated data.
  • The client-side components won't be populated with data.

Loading data configured by several connectors in one request

Starting from version 2.0 there is a possibility to combine data configured by several connectors in one dataset and load it in one request. The feature is provided by the MixedConnector. Read the MixedConnector article to learn the details.

Loading from File System

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

Starting from version 1.0, dhtmlxConnector allows using FileSystem as datasource (please note, to start using this functionality you should include the db_filesystem.php file located in the connector's package).

require("./codebase/connector/db_filesystem.php");
require("./codebase/connector/grid_connector.php");

$grid = new GridConnector("", "FileSystem");
$grid->render_table("../","safe_name","filename,full_filename,
    size,name,extention,date,is_folder");

In the code snippet above, grid is filled with info about files located in the 'd:/www' folder.

Parameters of the 'render-table' method:

  • folder, for which data listing is required
  • field's id, leave it empty or use safe_name as ID of file
  • a list of fields, possible values are:
    • filename - name of the file
    • full_filename - full path to the file
    • size - size of file in bytes
    • name - name part of file name
    • extension - extension part of file name
    • date - timestamp of file
    • is_folder - file/folder flag

Limiting files in output

There are 3 ways to limit files in output:

  1. by extension type
  2. by regexp pattern
  3. by meta-type

by extension type:

$fileTypes = FileSystemTypes::getInstance();
$fileTypes->addExtention('png');

by regexp pattern:

$fileTypes = FileSystemTypes::getInstance();
$fileTypes->addPattern('/^.+ ..*$/');

by meta-type:

The following meta-types can be used:

  • image - image files
  • document - doc, xls, txt, rtf
  • web - php, html, js, css
  • audio - mp3, wav, ogg
  • video - avi, mpg, mpeg, mp4
  • only_dir - folders
$fileTypes = FileSystemTypes::getInstance();
$fileTypes->setType('web');

Back to top

Loading from Excel file

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

Starting from version 1.0, dhtmlxConnector allows using an Excel file as datasource.

To start using this functionlity you should:

1) Download phpExcel.

It isn't included in the connector's package. You can grab it from 2 sources:

  • http://support.dhtmlx.com/x-files/connector/phpExcel.zip
  • http://www.codeplex.com/PHPExcel.

2) Unzip library to the connector's folder.

3) Include related files:

  • 'lib/PHPExcel.php' (phpExcel package)
  • 'lib/PHPExcel/IOFactory.php' (phpExcel package)
  • 'db_excel.php' (standard connector's package)
//files from libExcel package
require_once('lib/PHPExcel.php');
require_once('lib/PHPExcel/IOFactory.php');

//connectors
require("../../codebase/db_excel.php");
require("../../codebase/grid_connector.php");

$grid = new GridConnector("../some.xls", "ExcelDBDataWrapper");
$grid->render_table("A18:F83", "id", "A,B,C,D,E,F");

Parameters:

1) constructor GridConnector()

  • name of an excel file, absolute path or path related to the php file
  • database type

2) render_table() method

  • first parameter can be:

a) a range of cells in the spreadsheet, for example A18:F83

$grid->render_table("A18:F83", "id", "A,B,C,D,E,F");

b) the number of the top row, from which output should be started, for example A4

$grid->render_table("A1", "id", "A,B,C,D,E,F");

c) '*', which means including all not empty rows

$grid->render_table("*", "id", "A,B,C,D,E,F");
  • name of the identity field. You can use 'id' value for auto generation of the id
  • a list of fields which will be used as columns in the grid

Loading both data and header

Applicable to: Grid

When you need to load both data and header from an excel file, you can make it through GridConfiguration:

$grid = new GridConnector($excel_file, "Excel");

$config=new GridConfiguration();
//array of cells, with labels for grid's header
$config->setHeader($grid->sql->excel_data(array("A3","B3","F13")));
$grid->set_config($config);

$grid->render_table("A18", "id", "A,B,F");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Dynamic Loading DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
    • Common
    • Tree/TreeGrid specific
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Dynamic Loading

Common

Dynamic Loading mode allows loading data partially, not all at once, by a client-side request. It decreases the initial loading time and loading of the server.

To work correctly, the related mode should be enabled on the client side:

  • grid - smart rendering and paging modes
  • treegrid - dynamic branch loading mode
  • tree - dynamic branch loading mode
  • combo - partial autocomplete ( you don't need it for normal autocomplete)
  • dataview - dynamiс scrolling or dynamic paging

To activate the mode you should use the method dynamic_loading():

$grid->dynamic_loading([$rowsNum]);

In the 'dynamic loading' mode you can't use GROUP BY within SQL query

Parameters:

  • none - for a tree,treegrid.
  • a number of rows which should be initially loaded (the value should be greater than the number of rows visible in the grid, or at least it should be a positive number) for a grid.
  • a maximum number of options which the server will send to a combo in the 'autocomplete mode' for a single data request.

Tree/TreeGrid specific

Normally, the connector makes all operations automatically and doesn't need any customization.

But in case of the dynamic loading into Tree/TreeGrid, a database can contain a field indicating if the current item is a branch or a leaf. In the beforeRender event handler you are allowed to mark an item as a leaf or a branch (it decreases the number of SQL queries and increases the performance).

function custom_define($item){
    if ($item->get_value("is_a_branch"))
        $item->set_kids(true);
    else
        $item->set_kids(false);
}
$tree->event->attach("beforeRender","custom_define");

The same approach can be used for the non-dynamic mode of Tree/TreeGrid as well. It's not obligatory but lets you increase the data generation performance.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Filtering DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
    • The filter() method
    • URL manipulation
    • In-header filter types
    • Custom filters (using the beforeRender event)
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Filtering

There are 4 ways to implement a server-side filtering:

  • by calling the filter() method
  • by specifying additional parameters in URL
  • by using in-header filter types during the component configuration
  • by means of the beforeRender event

Be careful, the server-side filtering of dhtmlxTreeGrid doesn't maintain open states.

The filter() method

It's probably the easiest way to implement the server-side filtering. All you need to do is to call the filter() method.

$grid->filter("item_nm", "member");
//or   $grid->filter("item_nm='member'");

$grid->render_table("grid50","item_id","item_nm,item_cd");

URL manipulation

APPLICABLE TO:Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form, DataStore components

You can control what data is loaded into the component by specifying additional parameters in URL.

Check the article Extending functionality for full URL parameters' description.

  • filtering by one field
mygrid.load("some.php?connector=true&dhx_filter[1]=mask");

With such a url data will be taken with an additional rule.

WHERE field_for_column_1 LIKE %mask%
  • filtering by multiple fields
mygrid.load("some.php?connector=true&dhx_filter[1]=mask&dhx_filter[3]=another");

For all the components, except for dhtmlxGrid you should provide the exact field's name instead of the column's index.

Remember that such filtering is non-secure and if you need to hide some data, make sure to define the appropriate limitation on the server side, not as a part of URL.

In-header filter types

APPLICABLE TO: Grid, TreeGrid, Combo

To enable the server-side filtering you can use one of the following in-header filter types while configuring dhtmlxGrid/dhtmlxTreeGrid on the client side:

  • #connector_text_filter - a text filter. Retrieves values which contain a mask defined through a text field
  • #connector_select_filter - a select filter. Retrieves values which contain a mask defined through a dropdown list of possible values
mygrid.setHeader("Column A, Column B");
mygrid.attachHeader("#connector_text_filter,#connector_select_filter")

Text filter

The use of the text filter doesn't require any additional configuration code. Grid/TreeGrid will automatically send data about a newly entered text and filter server-side data using the %mask% pattern.

If you need to change the filtering pattern or implement a more advanced logic - the beforeFilter event should be used.

  • default filtering logic
function custom_filter($filter_by){
    //WHERE some_field LIKE 'value'
    if (!sizeof($filter_by->rules))
        $filter_by->add("some_field","value","LIKE");
}
$conn->event->attach("beforeFilter","custom_filter");
  • redefined filtering logic
function custom_filter($filter_by){
    if (!sizeof($filter_by->rules))
        $filter_by->add("some_field","value","LIKE");
    //change WHERE some_field LIKE '%value%' to the WHERE some_field > 'value'
    $index = $filter_by->index("some_field");
    if ($index!==false)  //a client-side input for the filter
        $filter_by->rules[$index]["operation"]=">";
}
$conn->event->attach("beforeFilter","custom_filter");

Through rules[$index] you can refer to:

  • the name of a field (rules[$index]["name"]="age")
  • the value of a field (rules[$index]["value"]="30")
  • the type of an operation (rules[$index]["operation"]=">")

Select filter

By default, Grid/Treegrid will use DISTINCT select against the related field, and fetch all possible options.

If you need to define a custom list of options you can use one of 2 ways:

  • a hardcoded list
$grid->set_options("item_nm",array("1"=>"1","2"=>"two","3"=>"3"));
$grid->render_table("grid50","item_id","item_nm,item_cd");
  • a list created on the base of a different table
$filter1 = new OptionsConnector($res);
$filter1->render_table("countries","country_id","country_name(value)");
$grid->set_options("item_nm",$filter1);

$grid->render_table("grid50","item_id","item_nm,item_cd");

You can use both the render_table and render_sql methods for OptionsConnector object, the same as for any normal connector.

Remember that the name of the field used in the select filter needs having the (value) alias.

Custom filters (using the beforeRender event)

APPLICABLE TO: Grid, Combo

By using the beforeRender event it's possible to define filtering rules as PHP code (doesn't work for dyn. modes).

function custom_filter($data){
    if ($data->get_value("some")<0)
        $data->skip(); //not include into output
}
$conn->event->attach("beforeRender","custom_filter");
  • "some" - in this example is a name of a data property, i.e. the column listed in 'SELECT' part of sql statement: "SELECT event.userID, ...."

You can read about the methods that are used by different components in the DataItem Object API.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Formatting/Changing Data Before Loading DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
    • Basic formatting methods
    • Common usage
    • Data formatting
    • Using extra fields
    • Tree/Treegrid specificity
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Formatting/Changing Data Before Loading

Basic formatting methods

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form, DataStore components

When you need to update the values which were returned from a database table or set some specific formatting before sending data to the client side, you should use the beforeRender event handler.

Common usage

$res= new PDO("mysql:dbname=$mysql_db;host=$mysql_server",$mysql_user,$mysql_pass);
require("../../codebase/grid_connector.php");

function color_rows($row){
    if ($row->get_index()%2)
    $row->set_row_color("red");
}

$grid = new GridConnector($res);
$grid->event->attach("beforeRender","color_rows");
$grid->render_table("grid50000","item_id","item_nm,item_cd");
  • color_rows function sets colors for rows subject to their indices
  • during the data generation, for each record outputted for the client side the beforeRender event will be executed, i.e. the color_rows function will be called for each record
  • $row is an instance of GridDataItem object related to the current record

Data formatting

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form, DateStore components

function formatting($row){
    //render a field as details link
    $data = $row->get_value("some_field");
    $row->set_value("some_field","<a href='details.php?id={$data}'>Details</a>");

    //formatting a date field
    $data = $row->get_value("other_field");
    $row->set_value("other_field",date("m-d-Y",strtotime($data)));
}

$grid = new GridConnector($res);
$grid->event->attach("beforeRender","formatting");
  • The get_value and set_value methods allow you to get or set value for any field related to the record (it doesn't affect actual values in DB)
  • If an alias was used during the data configuration, you need to use it instead of the real db field name as the first parameter of the get/set command.

Using extra fields

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form, DataStore components

More complex formatting rules can be defined by using extra fields during the configuration.

function formatting($row){
    //set row color
    $row->set_row_color($row->get_value("color"));
    //save in userdata
    $row->set_userdata("some_data",$row->get_value("count"));
}

$grid = new GridConnector($res);
$grid->event->attach("beforeRender","formatting");
$grid->render_table("some_table","id","name,price","color,count");
  • field color isn't outputted to the client side, but is used to define the property of a row.
  • during the update/insert operation only the 'name' and 'price' columns can be changed, the 'color' one will stay untouched.
  • the 'count' field will be sent to the client side as userdata of the row, and it will be possible to access it on the client-side through the related data.

Tree/Treegrid specificity

APPLICABLE TO: Tree, TreeGrid

TreeGrid provides TreeGridDataItem and Tree provides TreeDataItem as the input parameter of the beforeRender event handler. Both of them support base operations and a few specific ones.

function custom_format($item){
    if ($item->get_value("complete")>75)
        $item->set_check_state(1);

    if ($item->get_value("duration")>10)
        $item->set_image("true.gif");
    else
        $item->set_image("false.gif");
}
$tree->event->attach("beforeRender","custom_format");
  • the set_image method allows setting an image of a tree element (for treegrid it accepts the only parameter, while for tree there can be 3 different images for 3 states of a tree's item)
  • the set_check method exists only in TreeDataItem object and allows setting the state of the related checkbox (tree needs to have checkboxes enabled in js. configuration code as well)
  • the beforeRender event can be used in dynamic Tree and TreeGrid to define which elements of hierarchy are branches and which ones are leafs (see details here).

While deleting items that have children you can face the problem that the parent item is deleted but its children are not. In this case you should use the beforeDelete event:

function beforeDeleteFunc( $data ) {
   // custom logic
};
$conn->event->attach("beforeDelete","beforeDeleteFunc");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Sorting DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
    • The sort() method
    • URL manipulation
    • The sorting type 'connector'
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Sorting

There are 3 ways to implement server-side sorting:

  • by calling the sort() method
  • by specifying additional parameters in URL
  • by using the sorting type 'connector' during the component configuration

The sort() method

It's the easiest way to implement the server-side sorting. All you need to do is to call the method sort().

$grid->sort("item_nm ASC");
$grid->sort("item_cd", "DESC");
$grid->render_table("grid50","item_id","item_nm,item_cd");

URL manipulation

APPLICABLE TO:Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form, DataStore, DHTMXL Touch components

You can control how data will be sorted inside of a column by specifying additional parameters in URL.

Check the article Extending functionality for full url parameters description.

//ORDER by field_2 ASC
grid.load("some.php?connector=true&dhx_sort[2]=asc");
//ORDER by field_2 ASC, field_3 DESC
grid.load("some.php?connector=true&dhx_sort[2]=asc&dhx_sort[3]esc");

The sorting type 'connector'

APPLICABLE TO:Grid, TreeGrid

To sort grid/treegrid content with connectors you need to use 'connector' as a sorting type during the grid initialization.

grid.setColSorting("connector,str,na");

In the above code snippet the first column will be sorted on the server side with connectors, the second one as a string on the client side, the third column will be non-sortable.

By assigning to sorting type 'connector' you just 'say' that sorting will be implemented on the server side.

To define the way, 'behaviour' of sorting, you should use the beforeSort event.

This event doesn't allow writing a custom sorting logic, but you can affect SORT BY clause of the generated SQL request.

Default sorting by one field

function custom_sort($sorted_by){
    //SORT BY some_field ASC
    if (!sizeof($sorted_by->rules))
        $sorted_by->add("some_field","ASC");
}
$conn->event->attach("beforeSort","custom_sort");

Default sorting by multiple fields

function custom_sort($sorted_by){
    //SORT BY some_field ASC, some_other ASC
    if (!sizeof($sorted_by->rules)){
        $sorted_by->add("some_field","ASC");
        $sorted_by->add("some_other","ASC");
    }
}

$conn->event->attach("beforeSort","custom_sort");

Custom sorting rule

function custom_sort($sorted_by){
    // SORT BY LENGTH(some_field)
    $sorted_by->rules[0]["name"]="LENGTH(some_field)";
}

$conn->event->attach("beforeSort","custom_sort");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Client-Side Requirement - DataProcessor DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
    • Files to include on the client side
    • Initializing and linking to connector
    • Validation
    • Changing default processing
    • Renaming the query status parameter
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Client-Side Requirement - DataProcessor

The connector itself lets just pass data from the server side to the client side.

When you need to pass data back (e.g. you've updated a record and want to save updates in the database) you should use dataProcessor additionally.

Shortly, data exchange with dataProcessor can be characterized as follows:

1) After you've made some changes the client sends a query with several parameters to server. The parameter we are mostly interested in is !nativeeditor_status (the parameter's name can be changed. Go here for details). It defines the status of operation and can have one of the following values:

  • updated
  • inserted
  • deleted

2) The server tries to implement the required query. If the operation has been performed successfully, the server returns the same status that it had got. Otherwise, the status "error" is returned.

3) While exchanging, data undergoes default processing both on the server side and client side, i.e. data will be updated/inserted/deleted automatically (just initialize dataProcessor and dhtmlxConnector), no additional code is needed. You can affect this default processing by means of events (see details below).

Files to include on the client side

If you use the 'dhtmlxSuite' package (dhtmlx.js, dhtmlx.css code files), you don't need to add any additional files.

But if you use the components standalone you should add one more file - dataprocessor.js.

Remember that dataprocessor.js should be included BEFORE connector.js.

Initializing and linking to connector

To initialize dataProcessor you should write 2 commands:

var dp = new dataProcessor(url);
dp.init(mygrid);

To link dataProcessor to the connector you should specify the connector file as a parameter of the constructor:

dp = new dataProcessor("myconnector.php");
dp.init(mygrid);

Validation

Client-side validation

Dataprocessor allows validating data before sending it to the server side (see details here).

Server-side validation

You may see the details of the server-side validation in the related chapter of this documentation.

Changing default processing

As it was mentioned above, to affect the default data processing either on the server side or on the client side, you should use events (they can be either dataProcessor or dhtmlxConnector events).

Changing default data processing on the server side

There are the following ways to affect the server-side processing:

1) To use handler functions of dhtmlxConnector events:

  • beforeUpdate Event
  • beforeInsert Event
  • beforeDelete Event
  • beforeProcessing Event

2) To create a data model (OOP style; available from version 1.5)

class EventModel{
    function get($request){
        return array_of_data();
    }
    function update($action){
        //call $action->success(); or $action->invalid();
        //to mark operation as completed or invalid
    }
    function insert($action){
        //call $action->success(); or $action->invalid();
        //to mark operation as completed or invalid
    }
    function delete($action){
        //call $action->success(); or $action->invalid();
        //to mark operation as completed or invalid
    }
}

$connector = new GridConnector($this->db);
$connector->configure("events", "event_id", "start_date, end_date, event_name");
$connector->useModel(new EventModel());
$connector->render();

Any of the methods in the model can be skipped, in such a case the connector will try to generate its own version of logic.

The methods update(), insert(), delete() take the DataAction object as a parameter (the same as the the beforeProcessing event does).

The method get() takes the request object and must return an array of a hash (the same as the render_array method does).

You can also combine 2 variants and use a data model and events at the same time. The handlers will be invoked in the following order:

  • 'before' events (beforeProcessing,...);
  • data model;
  • 'after' events (afterUpdate,...).

Changing default data processing on the client side

Changing default data processing on the client side can be done in one of the following ways:

1) On the server side through handler functions of dhtmlxConnector events:

  • afterUpdate Event
  • afterInsert Event
  • afterDelete Event
  • afterProcessing Event

2) On the client side through handler functions of dataProcessor events:

  • onBeforeUpdate
  • onAfterUpdate

3) On the client side through the dataProcessor's method defineAction().

The method allows defining a handler function of the specified status.

dp.defineAction("update",function(sid,response){
...
return true;// return false to cancel default data processing at all
})

  • meanwhile, you can change the status of server-side response through the dhtmlxConnector's method set_status() and assign the appropriate processing through the defineAction() method.

    The status can be changed in 2 ways:

    1. by setting another predefined status ('updated', 'inserted', 'deleted'). In this case you just change the default processing, write some additions to it.

    2. by setting a custom status on the server side. In this case you cancel the default processing at all and should define all actions on the client side by yourself.

    $data->set_status("my_status");

    For more details see the chapter 'Custom status'.

Renaming the query status parameter

Starting from version 1.5 you get the possibility to rename the query status parameter named by default as !nativeeditor_status.

When can you use this function?

The most obvious example - the case when you want to use dhtmlxConnector+dataProcessor with the CodeIgniter framework.

Here you face the following problem: dataProcessor protocol is incompatible with the framework as the framework blocks the default name of the parameter. The problem can be fixed by renaming the parameter on both server and client sides:

Client side:

var dp = new dataProcessor(./data);
dp.action_param = "dhx_editor_status";

Server side:

DataProcessor::$action_param ="dhx_editor_status";
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Making Queries DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
    • Simple queries
    • Complex queries
    • Transactions
    • INSERT operation in Oracle DB
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Making Queries

Simple queries

Applicable to: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form, DataStore сomponents

By default, the connector generates all INSERT/UPDATE/DELETE queries automatically, based on configuration.

For more details on this topic, see the 'Basic Loading' chapter.

In case of dnd, the connector will process an action as a sequence of 'insert' and 'delete' operations.

Complex queries

When you need to define your own logic you should use one of two ways:

  • defining custom SQL code for operation
  • using server-side events to customize operations

Custom queries for an action

Applicable to: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form, DataStore сomponents

You can define your own SQL code for a specific action (INSERT, UPDATE or DELETE) as follows:

$grid->sql->attach("Update","Update tableA set name='{name}',
    price={price} where id={id}");
//...
$grid->render_complex_sql(" .. ","id","price,name");

Parameters:

  • an action's name. Possible values are: 'Update', 'Insert', 'Delete'
  • SQL statement. It can use the fields(or their aliases) which were mentioned in the render_sql or render_table method while loading data.

Using server-side events

Applicable to: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form, DataStore сomponents

To customize operations you can use the following server-side events:

  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • beforeProcessing
//data preprocessing before update
function my_update($data){
    $price = $data->get_value("price");
    $price = intval($price);
    $data->set_value("price","10");
}
$conn->event->attach("beforeUpdate","my_update")
//including an additional field to request
function my_update($data){
    $data->add_field("userId",1); //will be included in update processing
}
$conn->event->attach("beforeUpdate","my_update")
//a fully custom code
function my_update($data){
    global $conn;
    $price=$data->get_value("price");
    $id=$data->get_value("id");
    $conn->sql->query("UPDATE some_table SET price='{$price}' where id={$id}");
    //success() marks operation as finished and stops any further action processing
    $data->success();
}
$conn->event->attach("beforeUpdate","my_update")

Transactions

Applicable to: Grid

Grid allows using transactions for data INSERT/UPDATE/DELETE operations (make sure that the used DB engine has the support of transactions).

They can be enabled in 2 modes:

1) global

$conn->sql->set_transaction_mode("global");
  • Component uses single transaction for all records inside of single request.
  • If any operation fails, all record operations will be rolled back, all updated rows will be returned with error status
  • If custom validation was assigned and has blocked any record - all the records inside of the request will be blocked

2) record

$conn->sql->set_transaction_mode("record");
  • Component uses separate transactions for each record in request
  • If any operation fails, it will not affect other operations

INSERT operation in Oracle DB

Applicable to: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form, DataStore сomponents

Oracle doesn't have auto ID generation functionality, so you need to provide some custom ID for each insert operation.

There are 2 ways to achieve this:

1) custom ID generation - id generated by PHP code

function pre_insert($data){
    $new_id = time()%10000; //any other ID generation logic can be used here
    $data->add_field("EMPLOYEE_ID",$new_id);
}
$grid->event->attach("beforeInsert","pre_insert");
$grid->render_table("EMPLOYEES","EMPLOYEE_ID","FIRST_NAME,LAST_NAME");

2) using sequence for ID generation

$grid->sql->sequence("EMPLOYEES_INC.nextVal"); //sequence name
$grid->render_table("EMPLOYEES","EMPLOYEE_ID","FIRST_NAME,LAST_NAME");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Saving Data Changes Made in Form DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Saving Data Changes Made in Form

You can use the connectors for simple form saving. The connectors will recognize and automatically execute CRUD operations for the following patterns:

  • Get data for some record in DB by id

    GET: connector.php?action=get&id={some}

    Returns: data in 'json'(if you use JSONDataConnector) or 'xml'(if you use DataConnector) format.

  • Delete data for some record in DB by id

    GET: connector.php?action=delete
POST: id={some}

    Returns: "true" as string, when an operation is executed correctly.

  • Update data for some record in DB by id

    GET: connector.php?action=delete
POST: id={some}&property_name={value}

    Returns: "true" as a string, when operation is executed correctly.

  • Insert data in DB

    GET: connector.php?action=insert
POST: property_name={value}

    Returns: "true\n{new id}" as a string when operation is executed correctly.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Security DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
    • Basic security
    • Protection from cross-site scripting (XSS)
    • Preventing CSRF and XSRF attacks
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Security

dhtmlxConnector is open to external access of other programs and any external user is allowed to change data in database.

Thus, adding some kind of session-based authentication is strongly recommended.

Basic security

The built-in security manager allows you to limit connector to certain operations.

$gridConn->access->deny("read"); //blocks Select action
$gridConn->access->deny("insert"); //blocks Insert action
$gridConn->access->deny("update"); //blocks Update action
$gridConn->access->deny("delete"); //blocks Delete action

By default, the connector allows all operations.

Protection from cross-site scripting (XSS)

Starting from version 1.5, dhtmlxConnector allows you to protect an app from XSS attacks.

To avoid XSS attacks, the library checks all data inputted by users and according to the set security level doesn't allow HTML or JS code to be inserted.

3 security levels are available:

  • DHX_SECURITY_SAFETEXT (default) - all HTML data is removed from the input field;
  • DHX_SECURITY_SAFEHTML - allows HTML data, but removes possible script tags and handlers;
  • DHX_SECURITY_TRUSTED - input fields are not filtered at all (similar to the previous version of connectors).

To set the necessary security level, use the next code:

ConnectorSecurity::$xss = DHX_SECURITY_SAFETEXT;
//ConnectorSecurity::$xss = DHX_SECURITY_SAFEHTML;
//ConnectorSecurity::$xss = DHX_SECURITY_TRUSTED;

If you want to enable the same behavior as the previous versions of connectors had, set the DHX_SECURITY_TRUSTED mode.

Preventing CSRF and XSRF attacks

The functionality requires 3.5 or later version of the DHTMLX Suite package

The protection is available starting from version 1.5 and can be activated by the following code line:

ConnectorSecurity::$security_key = true;

After calling such a command, connectors start to include additional security keys to all data loading operations and process data updating calls only if they contain the same keys. As a result of this processing, it's impossible to trigger a data updating operation from some third-party site, even if an attacker has access to the valid user session.

The technique is based on php sessions and it's assumed that any php session will be preserved between separate script calls (default php behavior).

Please make sure that you understand what CSRF attack is, as the stated technique won't prevent access to the connector from external urls, it will only prevent execution actions through someone else's session.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Validation DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
    • Common
    • Value checking
    • Processing in case of validation error
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Validation

Before saving data on the server you can validate it and assign a handler function for any gotten response.

Shortly, validation contains 2 key points:

  1. value checking
  2. processing in case of validation error

Common

To implement the server-side validation of incoming data you can use the following events:

  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • beforeProcessing

The beforeProcessing event fires for all types of operations while other events fire only for the related operations, i.e. you can set different validation rules for different operations or the same rule for all of them at once.

The event will receive DataAction object as the parameter. This object can be used to retrieve the related data and allow/deny operation (please note, it contains only the data which has been received from the client side, not all the data related to the record).

Value checking

To check the value of a field you should use the method get_value()

function validate($data){
    if ($data->get_value("some_field")=="")
    ...
}
$conn->event->attach("beforeProcessing","validate");

Processing in case of validation error

In case of error you can choose one of two ways:

1) Use the predefined methods for error processing on the client side, i.e. set:

  • $data->invalid() (invalid record will be highlighted by the bold font)
  • $data->error() (invalid record will be highlighted by the red bold font)

The difference between the methods in question consists just in the way of highlighting.

function validate($data){
    if ($data->get_value("some")=="")
        $data->invalid();
}
$conn->event->attach("beforeProcessing","validate");

2) Assign your own processing on the client side through the dataProcessor's method defineAction() (see the details here)

dp.defineAction("invalid",function(sid,response){
var message = response.getAttribute("message");
alert(message);
return true;// return false to cancel default data processing at all
})

Custom status

You can change the returned status and set your own one by means of the method set_status(). In this case any default processing (no matter, if the defineAction() method will return true or false) will be cancelled and you will specify data processing fully on the client side.

Server side:

function validate($data){
    if ($data->get_value("some")=="")
        $data->set_status("my_status")
}
$conn->event->attach("beforeProcessing","validate");

Client side:

dp.defineAction("my_status",function(sid,response){
...
})

Adding custom information to response

You can send some custom information to the client side through the following methods:

  • set_response_text
  • set_response_xml
  • set_response_attribute
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Data Export DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
    • Data preparation
    • Activating conversion service
    • Start exporting
    • Samples
    • Useful tips
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Data Export

APPLICABLE TO: Grid

External grid-to-pdf and grid-to-excel services allow converting grid's data to PDF or Excel format directly on the server side: from any table without actually rendering data in the grid. Shortly, you should perform the following steps:

  • Prepare data;
  • Activate conversion service;
  • Start exporting.

Data preparation
  • data to export is defined by the render_table() or the render_sql() methods.
  • to define the grid's structure (header, footer etc.) on the server side, see the chapter 'Defining Grid Structure on the Server Side'.

Activating conversion service
  • pdf
$convert = new ConvertService("http://dhtmlxgrid.appspot.com/export/pdf");
  • excel
$convert = new ConvertService("http://dhtmlxgrid.appspot.com/export/excel");

Start exporting
  • pdf
$convert->pdf("some.pdf",false);
  • excel
$convert->excel("some.xls",false);

Parameters:

  • (optional) name of the resulting file. The default value:data.pdf (data.xls)
  • (optional) the second parameter specifies the way of exporting the file:
    • true - as an inline content ( if browser has a related plugin - document will be opened automatically)
    • false - as an individual file. The default value - false.

The service automatically starts exporting data defined through GridConnector.

Samples
  • PDF
require("../../../codebase/grid_connector.php");
require("../../../codebase/convert.php");

//url to data conversion service
$convert = new ConvertService("http://dhtmlxgrid.appspot.com/export/pdf");
$convert->pdf(); //equal to calling pdf("data.pdf", false)

$grid = new GridConnector($res);
$grid->set_config(new GridConfiguration()); //mandatory
$grid->render_table("grid50");      //a table's name and an optional list of fields
  • Excel
require_once("../../config.php");
$res= new PDO("mysql:dbname=$mysql_db;host=$mysql_server",$mysql_user,$mysql_pass);

require("../../../codebase/grid_connector.php");
require("../../../codebase/convert.php");

//url to data conversion service
$convert = new ConvertService("http://dhtmlxgrid.appspot.com/export/excel");
$convert->excel(); //equal to calling excel("data.xls", false)

$grid = new GridConnector($res);
$grid->set_config(new GridConfiguration()); //mandatory
$grid->render_table("grid50");         //a table's name and an optional list of fields

Useful tips
  • In case of the dynamic Smart Rendering you can't use export from the client side and need to define header's data on the server side. See the details here.
  • For correct work of the render_sql method you should use the full header initialization (not empty GridConfiguration() call). Otherwise, the component will try to fetch the grid's structure from DB that is unallowable for the render_sql method.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Elementary DB Operations with Connector DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
    • SQL queries
    • INSERT query
    • UPDATE query
    • DELETE query
    • Creating a new connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Elementary DB Operations with Connector

dhtmlxConnector allows executing some actions against DB.

SQL queries

DBWrapper object can be accessed as:

$connector->sql

Then, it can be used in queries in the following way:

$connector->sql->query("DELETE FROM some_table WHERE ID=1");
//or
$res = $connector->sql->query("SELECT * FROM some_table WHERE ID=1");
$data =  $connector->sql->get_next($res);
//or
$connector->sql->query("INSERT INTO some_table(type) VALUES('simple')");
$id = $connector->sql->get_new_id();

INSERT query

$id = $connector->insert(array(
    "type" => "simple",
    ...
));

Parameters:

  • a hash of values

UPDATE query

$connector->update(array(
    "type_id" => '1'
    "type" => 'simple'
));

Parameters:

  • a hash of values. For a successful result it must contain the identity field.

DELETE query

$connector->delete($id);

Parameters:

  • ID of the record that should be deleted

Creating a new connector

You can create an extra connector object on the fly and use it for DB operations.

$temp = new Connector($db_connection);
$temp->configure("some_table");

$temp->insert(array(
    "some1" => "value 1",
    "some2" => "value 2"
));
$temp->delete("2");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Error Handling and Logging DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
    • Server-side logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Error Handling and Logging

While developing we strongly recommend using logs for errors detection.

Server-side logging

DHTMLX permits to control logging in two ways:

  • Basic
  • Detailed

Basic

If any error occurs during the data processing, the client-side data processor object will receive the "error" action containing short info about the problem (full info will be written to the log).

$conn->enable_log("path");
  • path - an absolute or relative path to the text file where a log will be written.

Detailed

When a critical error occurs all log records for the current session (full error info) will be sent to the client and shown in the browser (useful for debugging, not recommended for production):

$conn->enable_log("path",true);
  • path - an absolute or relative path to the text file where a log will be written.
  • The second parameter enables the detailed mode.

Adding custom records to the log

During the development process you may need to write some custom data to the log (can be useful for custom server-side events).

To add a custom text or data to the log file:

  • Activate logging (basic or detailed).
  • Call the log() function with your data inside.
$conn->enable_log("temp.log");
LogMaster::log("any text here");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
    • Common use
    • Data behavior models
    • SortInterface Object
    • FilterInterface Object
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Handling Events

Common use

DHTMLX Connector uses events to manage Insert/Update/Delete operations.

The code below shows how to attach an event:

$conn->event->attach(event_name,handlerFunc);

Parameters:

  • event_name - a name of the event.
  • handlerFunc - a handler function.

Handler functions get one input parameter and this parameter depends on the attached event.

In the following table you'll see a full list of events and the appropriate input parameters of handler functions.

Event | Input parameter of handler function
beforeSort SortInterface Object
beforeFilter FilterInterface Object
beforeRender DataItem Object
  • beforeProcessing
  • afterProcessing
  • beforeInsert
  • beforeUpdate
  • beforeDelete
  • afterInsert
  • afterUpdate
  • afterDelete

 DataAction Object
beforeOutput | none

Data behavior models

Starting from version 1.5, the library 'extends' OOP support and allows creating a separate class for events processing. You get the possibility to work with one class that will control all processing instead of working with separate handler functions.

class SomeBehavior{
    public function beforeRender($data){
        //some logic
    }
    ... any other handlers ...
}
$conn->event->attach(new SomeBehavior());

The handlers of the model class take the same parameters as the ordinary events do

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


SortInterface Object DHTMLX Docs

Documentation
  • SortInterface Object
    • add
    • clear
    • index
    • rules
  • FilterInterface Object
Start Client-Server Communication PHP Connector Handling Events

SortInterface Object

add

adds a new sorting rule to collection

$coll->add("name","type");

Parameters:

  • name - name of the field.

  • type - sorting type: ASC or DESC See also:

  • Sorting

clear

clears collection (deletes all specified sorting rules)

$coll->clear();

Parameters:

  • none.

index

checks if there are some rules in collection for the specified field and returns the related hash.

$index = $coll->index("name");

Parameters:

  • name - name of the field

Returns:

  • true - if collection contains rule(s) for the specified field.
  • false - if collection doesn't contain any rules for the field.

rules

an array of all specified sorting rules

$name = $coll->rules[0]["name"];
$coll->rules[0]["direction"]="DESC";

Properties:

  • name - name of related field
  • direction - direction of sorting

See also:

  • Sorting
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


FilterInterface Object DHTMLX Docs

Documentation
  • SortInterface Object
  • FilterInterface Object
    • add
    • clear
    • index
    • rules
Start Client-Server Communication PHP Connector Handling Events

FilterInterface Object

add

adds a new filtering rule to collection

$coll->add("name","value");  _$name LIKE $value
_or
$coll->add("name","value","comp_oper"); //name < value

Parameters:

  • name - name of the field.
  • value - comparison value (filtering criteria).
  • comp_oper - comparison operator: '>' or '<'.

See also:

  • Filtering

clear

clears collection (deletes all specified filtering rules)

$coll->clear();

Parameters:

  • none.

index

checks if there are some rules in collection for the specified field and returns a related hash

$index = $coll->index("name");

Parameters:

  • name - name of the field

Returns:

  • true - if collection contains rule(s) for the specified field.
  • false - if collection doesn't contain any rules for the field.

See also:

  • Filtering

rules

an array of all specified sorting rules

$name = $coll->rules[0]["name"]
$coll->rules[0]["value"]="cde";

Properties:

  • name - name of related field.
  • value - comparison value (filtering criteria).
  • operation - comparison operator. If empty, the default LIKE instruction is used.

See also:

  • Filtering
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Extending Functionality DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
    • Protocol details
    • Porting connectors to another platforms
    • XML format used by connector
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Extending Functionality

Protocol details

Data fetching

POST

Command parameters:

  • none

GET

Command parameters:

  • connector=true - flag of the connector-based request. The flag is set automatically, once you include the connector.js file on the page (note that if you use dhtmlxSuite package, connector.js is already included into the package and there's no need to include it additionally)

  • dhx_colls=field1,field2...fieldN - optional, can contain a list of fields for which collections will be requested. dhtmlxGrid uses such parameters to request data for combo columns and select filter (such requests are executed just once for initial data loading)

some.php?connector=true&dhx_colls=2,3
  • dhx_sort[field]=directon - instruct the server-side connector to sort dataset by the defined field
some.php?connector=true&dhx_sort[2]=asc
  • dhx_filter[field]=mask - instruct the server-side connector to filter dataset by the defined field
//filter by %test%
some.php?connector=true&dhx_filter[2]=test

Grid specific

Requesting a part of data (Dynamic Smart Rendering or Dynamic Paging)

GET

  • posStart - position from which data is requested
  • count - count of requested rows

Combo specific

Requsting a part of data

GET

  • pos - position from which data is requested

Filter by the label field

GET

  • mask - filtering mask for the label field

Tree/TreeGrid specific

Requesting a branch of tree

GET

  • id - parent id for the requested branch

Data updating (using dataProcessor)

GET

  • editing=true - mark of the dataprocessor-based call

POST

  • ids - a list of updated records
  • [id]_[property] - for each field inside of the updated record the related field in POST is generated
  • [id]_!nativeeditor_status - the action type

Back to top

Porting connectors to another platforms

When should you use it?

The existing version of connectors supports a limited set of server platforms. In case the database/framework/scripting language you'd like to use is not supported, you can port an existing solution on your platform.

When shouldn't you use it?

Connectors are just wrappers around the existing grid's functionality, that's why if you need to use this solution once, you'd better use grid API directly instead of creating your own server connector.

Implementation levels

The connector supports many operations that implement data processing. There is an opportunity to provide support for basic operations and ignore the higher-level ones, if they are not used in your project.

Basic support

Data assignment is a basic connector operation which proceeds in the following way: the connector connects to database, selects data and outputs it in stdout using XML format of the current component.

Key points:

  1. XML-data input must occur only after sending the appropriate http-header
  2. XML must start with XML declaration containing the appropriate data coding
  3. No other content must be sent to stdout (neither before, nor after sending data by connector)
header("Content-type:text/xml");
print("<?xml version='1.0' encoding='utf-8' ?>");
print(xml_formatted_data);
  • incoming parameters - there aren't any;
  • restriction for output data - there's no restriction.

XML Format used by connector

Basic implementation allows using the resulting script as the input parameter for the load() method.

Technically, there is an opportunity to use JSON or any other format supported by component, but you should bear in mind that complex scenarios are XML-oriented and it's better to use XML.

Filtering and sorting

At this stage, the number of supported operations is considerably extended: you are allowed to use #connector_text_filter, sorting type 'connector' and filter/sort data through URL manipulations.

Key points:

  • An obvious advantage of this functionality can be estimated only for operating with grid, for other components such functionality doesn't seem to be necessary (it can be used only to filter/sort data through URL manipulations).
  • The level 'uses' code from the previous one. Note that now before using XML data is sorted/filtered according to the incoming data.

GET

Command parameters:

  • dhx_filter - a hash of filtering rules
    • filtering pattern - any entry( like %x% )
    • in case you have a few parameters, you should link them by AND logic
    • the parameter is available only for the fields with an active filter
    • an empty filter value means that filter hasn't been set and it must be ignored
// where field1 like %some% AND field2 like %other%
dhx_filter[1]=some&dhx_filter[2]=other
  • dhx_sort - a hash of sorting rules
    • possible values for asc and dsc parameters
    • in case you have a few parameters, you should link them by AND logic
    • order of filtering implementation - not defined, at the moment none of the components is able to create multi-field sorting
// order by field1 ASC, field2 DESC
dhx_sort[1]=asc&dhx_filter[2]=dsc

Hashes of rules in question use the name of fields (where filtering is enabled) or columns' indices (in case of grid).

Restriction for output data: order and structure are defined through the filtering/sorting parameters.

Combo specific:

dhtmlxCombo has an additional filtering GET parameter:

  • mask - sets filtering in text label columns using “like x%” rule.
some.php?mask=abc

Dynamic loading

After data output implementation goes dynamic loading. Dynamic loading has some particular features while working with hierarchical (tree/treegrid) and simple (grid/combo) components.

For hierarchical components loading of data branch occurs at once.

some.php?id=123

Command parameters:

  • id - 'parent id' which defines the appropriate branch (note, all filtering/sorting rules set during the previous stage are applied to the component).

For other components, data will be output according to the incoming parameters.

//grid
some.php?posStart=20&count=50
//combo
some.php?pos=50

Command parameters:

Grid:

  • posStart - index of the initial string
  • count - number of strings to output

Combo:

  • pos - index of the initial string
  • number of strings is defined by the server settings

While working with Grid, the initial request (grid doesn't know yet how many strings are expected) doesn't contain any additional parameters ( 'posStart' and 'count' are not defined)

Back to top

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


XML format used by connector DHTMLX Docs

Documentation
  • XML format used by connector
    • Grid
    • TreeGrid
    • Tree
    • Combo
Start Client-Server Communication PHP Connector Extending Functionality

XML format used by connector

Grid

<rows>
    <row id="some1"><cell>value 1,1</cell><cell>value 1,2</cell></row>
    <row id="some2"><cell>value 2,1</cell><cell>value 2,2</cell></row>
</rows>
  • row - the tag represents row in the grid
  • cell - the tag represents cell in the grid

row@id - the mandatory attribute, must be unique for each row; the row and cell tags may contain additional attributes which will be processed in the default way.

In the dynamic loading mode

<rows total_count="50000" pos="1230">
    <row id="some1230"><cell>value 1,1</cell><cell>value 1,2</cell></row>
    <row id="some1231"><cell>value 2,1</cell><cell>value 2,2</cell></row>
</rows>
  • rows@total_count - the count of rows in grid, needs to be sent only for the first data request (when the posStart parameter is not defined )
  • rows@pos - equal to posStart parameters, defines where grid data will be added to

TreeGrid

<rows>
    <row id="some1">
        <cell image="some.gif">value 1,1</cell><cell>value 1,2</cell>
        <row id="some11"><cell>child value 1</cell><cell>child value 2</cell></row>
    </row>
    <row id="some2"><cell>value 2,1</cell><cell>value 2,2</cell></row>
</rows>
  • row - the tag represents a row in the grid, one row tag can contain other row tags inside (parent - child relation in the hierarchy )
  • cell - the tag represents a cell in the grid
  • row@id - the mandatory attribute, must be unique for each row
  • cell@image - can define an image for a tree cell in grid (optional)

Dynamic loading

<rows parent="id">
    <row id="some1" xmlkids="1">
        <cell image="some.gif">value 1,1</cell><cell>value 1,2</cell>
    </row>
    <row id="some2"><cell>value 2,1</cell><cell>value 2,2</cell></row>
</rows>
  • row@xmlkids - defines that a row can contain child nodes
  • rows@parent - the name of parent ID (equal to the incoming "id" parameter), the ID of virtual root - 0

Tree

<tree>
    <item id="some" text="name">
        <item id="child1" text="name 1"/>
        <item id="child2" text="name 2"/>
    </item>
</tree>
  • item tag - an item in a tree, can nest other item tags to represent the parent-child relation
  • item@id - ID, unique for each item
  • item@text - a label

In case of dynamic loading

<tree id="id">
    <item id="some" text="name" childs="1">
    </item>
</tree>
  • item@childs - defines that a row can contain child nodes
  • tree@id - the name of the parent ID (equal to the incoming "id" parameter), the ID of virtual root - 0

Combo

<data>
    <option value="some">Some label</option>
    <option value="other">Other label</option>
</data>
  • option - represents an option in combo

In case of dynamic loading:

<data add="true">
    <option value="some">Some label</option>
    <option value="other">Other label</option>
</data>

If the "pos" parameter has been provided, the response must contain the data@add attribute to mark that it's not a new set of values, but an addition to the existing one.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Using Connector with Popular Frameworks DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
    • Tips common for all frameworks
    • Common tips on configuring controller for Yii, CakePHP and Laravel
    • Specific tips on configuring controller for CodeIgniter
    • Using Connector with Frameworks (version 1.5)
  • Samples
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Using Connector with Popular Frameworks

Since version 2.2, dhtmlxConnector has been updated to work with latest versions of frameworks (CodeIgniter, Yii and CakePHP) and started supporting integration with the Laravel framework. You can built web applications with your favorite frameworks and still use dhtmlxConnector.

In case you need information on integration of dhtmlxConnector with the earlier versions of frameworks, you can read the chapter Using Connector with Frameworks (version 1.5).

In this article you will find useful tips on the usage of dhtmlxConnector in your apps created with one of the listed frameworks. The detailed information is given in the related tutorials:

  1. Using dhtmlxConnector with the CodeIgniter framework;
  2. Using dhtmlxConnector with the Yii framework;
  3. Using dhtmlxConnector with the CakePHP framework;
  4. Using dhtmlxConnector with the Laravel framework.

For example, let's consider creating an app that presents a grid loaded with data from db. The app is built with one of the frameworks and uses dhtmlxConnector to load data in.

Tips common for all frameworks

Model:

Doesn't have any specificity and created as usual.

View:

  • View contains a standard JavaScript code of the component and defines the client side logic;
  • To load data use standard 'loading' methods of the components but as the URL parameter specify the relative path to an action that answers for loading logic. If you use dataProcessor, specify in its constructor this relative path to the action as well;
mygrid = new dhtmlXGridObject('grid_here');
...
mygrid.init();
mygrid.load("./data"); //refers to the 'data' action

var dp = new dataProcessor("./data"); //refers to the 'data' action as well
dp.init(mygrid);

Common tips on configuring controller for Yii, CakePHP and Laravel
  • Controller defines the server side logic and contains at least 2 actions: one loads the view, the other one loads the data;
  • SQL query to database is configured with the help of the configure() method that takes as parameters:
    • new $modelName - the method creating a model for working with a database
      (for CakePHP use TableRegistry::get($modelName) - this method will return a model);
    • $id - the name of the id field;
    • $text - a comma-separated list of rendered data fields;
    • $extra - (optional) a comma-separated list of extra fields;
    • relation_id - (optional) used for building hierarchy in case of Tree and TreeGrid.
  • GridConnector (or any other connector) takes as parameters:
    • null to specify that a model is used for working with a database;
    • the hardcoded value specifying the framework ( "PHPYii", "PHPCake" or "PHPLaravel").
//sample code for the Laravel framework
<?php
namespace App\Http\Controllers;
use App\SchedulerEvent;
use Dhtmlx\Connector\GridConnector;

class GridController extends Controller
{
    public function data() {
        $connector = new GridConnector(null, "PHPLaravel");
        // the SchedulerEvent() method is used to create the model
        $connector->configure(
            new SchedulerEvent(),
            "event_id",
            "start_date, end_date, event_name"
        );
        $connector->render();
    }
}

Specific tips on configuring controller for CodeIgniter
  • To handle an event, add a function of the corresponding event name (e.g. to handle the beforeRender event, add public function beforeRender($action){...}) and define the handling logic as usual. The functions will take the same parameters as the ordinary events do;
  • SQL query to database is configured with the help of the configure() method that takes as parameters:
    • $table - the name of the table;
    • $id - the name of the id field;
    • $text - a comma-separated list of rendered data fields;
    • $extra - (optional) a comma-separated list of extra fields;
    • relation_id - (optional) used for building hierarchy in case of Tree and TreeGrid.
  • GridConnector (or any other connector) takes as parameters:
    • the DB connection variable that refers to the model used in the app;
    • the hardcoded value specifying the framework ( "PHPCI").
//sample code for the CodeIgniter framework
<?php
use Dhtmlx\Connector\GridConnector;

class Grid extends CI_Controller {
    public function index(){
        $this->load->view("GridView");
    }
    public function data(){
        $this->load->database(); // data feed

        $connector = new GridConnector($this->db, "PHPCI");
        $connector->configure(
            "scheduler_events",
            "event_id",
            "start_date, end_date, event_name"
        );
        $connector->render();
    }
};
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Using Connector with Frameworks (version 1.5) DHTMLX Docs

Documentation
  • Using Connector with Frameworks (version 1.5)
    • Tips common for all frameworks
    • Framework-specific tips
Start Client-Server Communication PHP Connector Using Connector with Popular Frameworks

Using Connector with Frameworks (version 1.5)

Starting from version 1.5 dhtmlxConnector can be used with popular PHP frameworks. You can built web applications with your favorite frameworks and still use dhtmlxConnector.

In this article we will give you brief tips referring to such a use-case of dhtmlxConnector. You can get detailed information in the related tutorials:

  1. Using dhtmlxConnector with the CodeIgniter framework;
  2. Using dhtmlxConnector with the Yii framework;
  3. Using dhtmlxConnector with the CakePHP framework.

For example, let's consider creating an app that presents a grid loaded with data from db. The app is built with one of the frameworks and uses dhtmlxConnector to load data in.

Tips common for all frameworks

Model:

Doesn't have any specificity and created as usual.

View:

  • View contains a standard JavaScript code of the component and defines the client side logic;
  • To load data use standard 'loading' methods of the components but as the URL parameter specify the relative path to an action that answers for loading logic. If you use dataProcessor, specify in its constructor this relative path to the action as well;
mygrid = new dhtmlXGridObject('grid_here');
...
mygrid.init();
mygrid.load("./data"); //refers to the 'data' action

var dp = new dataProcessor("./data"); //refers to the 'data' action as well
dp.init(mygrid);

Controller:

  • Controller defines the server side logic and contains at least 2 actions: one loads the view, the other one loads the data;
  • To handle an event, add a function of the corresponding event name (e.g. to handle the beforeRender event, add public function beforeRender($action){...}) and define the handling logic as usual. The functions will take the same parameters as the ordinary events do;
  • SQL query to database is configured with the help of the configure() method that takes as parameters:
    • $sql - any sql code that will be used as the base for data selection (for the Yii framework the hardcoded value - '-');
    • $id - the name of the id field;
    • $text - a comma-separated list of rendered data fields;
    • $extra - (optional) a comma-separated list of extra fields;
    • relation_id - (optional) used for building hierarchy in case of Tree and TreeGrid.
  • GridConnector (or any other connector) takes as parameters:
    • the DB connection variable that refers to the model used in the app)
    • the hardcoded value specifying the framework ( "phpCI", "PHPYii" or "PHPCake").
//sample code for the YII framework
<?php
require_once(dirname(FILE)."/../../../dhtmlx/connector/grid_connector.php");
require_once(dirname(FILE)."/../../../dhtmlx/connector/db_phpyii.php");

class EventController extends Controller
{
    public function actionIndex(){ $this->render('index');}
    public function actionGrid() { $this->render('grid'); }

    public function actionGrid_data()
{
        $grid = new GridConnector(Events::model(), "PHPYii");
        $grid->configure("-", "event_id", "start_date, end_date, event_name");
        $grid->render();
}

    public function beforeProcessing($action){
        //validation before saving
        if ($action->get_value("event_name") == ""){
            $action->invalid();// if data isn't validated  - call $action->invalid();
            $action->set_response_attribute("details", "Empty data not allowed");
        }
    }
}

Framework-specific tips

CodeIgniter

View

  • While working with CodeIgniter you should rename the query status parameter !nativeeditor_status cause the default name of the parameter is blocked by the framework. Renaming must be repeated on the server side.
var dp = new dataProcessor("./data"); //refers to the 'data' action
dp.action_param = "dhx_editor_status";
dp.init(mygrid);

Controller

  • The required connector file is db_phpci.php (and of course, you should also include the connector files related to the components used in the app, e.g. if you use dhtmlxGrid - you also include grid_connector.php);
  • The query status parameter !nativeeditor_status must be renamed on the server side as well.
require_once("./dhtmlx/connector/grid_connector.php");
require_once("./dhtmlx/connector/db_phpci.php");
DataProcessor::$action_param ="dhx_editor_status";

class Grid extends CI_Controller {
    public function index()
    {
        $this->load->view('grid'); //grid's view
    }
    public function data()
    {
        $this->load->database();

        $connector = new GridConnector($this->db, "phpCI");
        $connector->configure("events", "event_id", "start_date, end_date, event_name");
        $connector->render();
    }
}

Yii

Controller

  • The required connector file is db_phpyii.php.
<?php
    require_once(dirname(FILE)."/../../../dhtmlx/connector/grid_connector.php");
    require_once(dirname(FILE)."/../../../dhtmlx/connector/db_phpyii.php");

        class EventController extends Controller {
            public function actionIndex() { $this->render('index'); }
            public function actionGrid()  { $this->render('grid');  }
            public function actionGrid_data()
            {
                $grid = new GridConnector(Events::model(), "PHPYii");
                $grid->configure("-", "event_id", "start_date, end_date, event_name");
                $grid->render();
            }
       }
?>

CakePHP

Controller

  • The required connector file is db_phpcake.php.
<?php
 require_once("../Vendor/connector/grid_connector.php");
 require_once("../Vendor/connector/db_phpcake.php");

  class EventController extends AppController{
    public function grid(){}
    public function index(){}
    public function grid_data()
    {
      $this->autoRender = false;

      $connector = new GridConnector($this->Event, "PHPCake");
      $connector->configure("events", "event_id", "start_date, end_date, event_name");
      $connector->render();
    }
  }
?>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Samples DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
    • Samples of Client-Side Initialization
    • Samples of Server-Side Initialization
    • Defining Grid Structure on Server Side
    • dhtmlxConnector for Grid
    • dhtmlxConnector for Form
  • Migration and New Functions
  • HowTos
Start Client-Server Communication PHP Connector

Samples

  • Client-side initialization of components
  • Server-side initialization of components
  • Defining grid structure on server-side
  • dhtmlxConnector for grid (including filtering, sorting, formatting)
  • dhtmlxConnector for form
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Samples of Client-Side Initialization DHTMLX Docs

Documentation
  • Samples of Client-Side Initialization
    • Grid
    • TreeGrid
    • Tree
    • Combo
    • Scheduler
    • Form
    • DataView
    • Chart
    • DataStore
  • Samples of Server-Side Initialization
  • Defining Grid Structure on Server Side
  • dhtmlxConnector for Grid
  • dhtmlxConnector for Form
Start Client-Server Communication PHP Connector Samples

Samples of Client-Side Initialization

Grid

myGrid = new dhtmlXGridObject("myContainer");
//... grid configuration commands
myGrid.load("myconnector.php");

TreeGrid

Static mode

myGrid = new dhtmlXGridObject("myContainer");
myGrid.setColTypes("tree,...");
//...grid configuration commands
myGrid.load("myconnector.php");

Dynamic mode

myGrid = new dhtmlXGridObject('myContainer');
myGrid.setColTypes("tree,...");
//...
myGrid.kidsXmlFile="connector.php";
myGrid.load("connector.php");

Tree

Static mode

tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
//...
tree.load("connector.php");

Dynamic mode

tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
//...
tree.setXMLAutoLoading("connector.php");
tree.load("connector.php");

Combo

Static mode

var combo=new dhtmlXCombo("combo_zone2","alfa2",200);
combo.load("connector.php");

Auto-complete mode

var combo=new dhtmlXCombo("combo_zone2","alfa2",200);
combo.enableFilteringMode(true,"connector.php",true);
combo.load("connector.php");

Scheduler

scheduler.init(some_obj)
scheduler.load("connector.php");

Form

var form = new dhtmlXForm(someId);
form.load("connector.php");

DataView

var view = new dhtmlXDataView({...});
view.load("connector.php");

Chart

var mychart = new dhtmlXChart({...});
mychart.load("connector.php");

DataStore

var myDataStore = new dhtmlXDataStore();
myDataStore.load("connector.php");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Samples of Server-Side Initialization DHTMLX Docs

Documentation
  • Samples of Client-Side Initialization
  • Samples of Server-Side Initialization
    • DB types
    • Component types
  • Defining Grid Structure on Server Side
  • dhtmlxConnector for Grid
  • dhtmlxConnector for Form
Start Client-Server Communication PHP Connector Samples

Samples of Server-Side Initialization

DB types

PDO ( php_pdo )

require("connector/grid_connector.php");
require("connector/db_pdo.php");

$res=new PDO('mysql:hostocalhost;dbname=test', $user, $pass);

$gridConn = new GridConnector($res,"PDO");

MySQLi ( php_mysqli )

require("connector/grid_connector.php");
require("connector/db_mysqli.php");

$mysqli = new mysqli($server, $user, $pass, $mysql_db);
$gridConn = new GridConnector($mysqli,"MySQLi");

SQLite ( php_sqlite )

require("connector/grid_connector.php");
require("connector/db_sqlite.php");
if (!$db = sqlite_open('db', 0777, $sqliteerror)) {
    die($sqliteerror);
}

$gridConn = new GridConnector($db,"SQLite");

PostgreSQL ( php_pg )

require("connector/grid_connector.php");
require("connector/db_postgre.php");

$res=pg_connect("hostocalhost port=5432 dbname=mary");

$gridConn = new GridConnector($res,"Postgre");

Oracle ( php_oci )

require("connector/grid_connector.php");
require("connector/db_oracle.php");

$res = oci_connect("scott", "tiger", $db);

$gridConn = new GridConnector($res,"Oracle");

MSSQL ( php_mssql )

require("connector/grid_connector.php");
require("connector/db_mssql.php");

$res=mssql_connect('.SQLEXPRESS',"sa","1",false);
mssql_select_db("sampleDB");

$gridConn = new GridConnector($res,"MsSQL");

MSSQL ( php_sqlsrv )

require("connector/grid_connector.php");
require("connector/db_sqlsrv.php");

$conn = sqlsrv_connect( $serverName, $connectionInfo);

$gridConn = new GridConnector($conn,"SQLSrv");

MySQL ( php_mysql ) (deprecated)

require("connector/grid_connector.php");

$res=mysql_connect("localhost","root","");
mysql_select_db("myDatabase");

$gridConn = new GridConnector($res,"MySQL");

File System

require("connector/grid_connector.php");
require("connector/db_pdo.php");

$gridConn = new GridConnector("/var/www/test","FileSystem");
$grid->render_table("./", "id", "A,B,C,D,E,F");

Excel file

require("connector/grid_connector.php");
require("connector/db_excel.php");

$res=new PDO('mysql:hostocalhost;dbname=test', $user, $pass);

$grid = new GridConnector("some.xls", "ExcelDBDataWrapper");
$grid->render_table("A18:F83", "id", "A,B,C,D,E,F");

Component types

For other components the syntax of constructor is exactly the same, except that "Grid" in the object name is replaced with the component's name.

Grid

require("connector/grid_connector.php");
//...
$gridConn = new GridConnector($res,"MySQL");

TreeGrid

require("connector/treegrid_connector.php");
//...
$treeGridConn = new TreeGridConnector($res,"MySQL");

Tree

require("connector/tree_connector.php");
//...
$treeConn = new TreeConnector($res,"MySQL");

Combo

require("connector/combo_connector.php");
//...
$comboConn = new ComboConnector($res,"MySQL");

Scheduler

require("connector/scheduler_connector.php");
//...
$schedulerConn = new SchedulerConnector($res,"MySQL");

Form

require("connector/form_connector.php");
//...
$formConn = new FormConnector($res,"MySQL");

DataView

require("connector/dataview_connector.php");
//...
$dataConn = new DataViewConnector($res,"MySQL");

Chart

require("connector/chart_connector.php");
//...
$chartConn = new ChartConnector($res,"MySQL");

DataStore

require_once("../../connector/data_connector.php");
require_once("../../connector/db_sqlite.php");

if (!$db = sqlite_open('db', 0777, $sqliteerror)) {
    die($sqliteerror);
}
$storeConn = new JSONDataConnector($db,"SQLite");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Defining Grid Structure on Server Side DHTMLX Docs

Documentation
  • Samples of Client-Side Initialization
  • Samples of Server-Side Initialization
  • Defining Grid Structure on Server Side
    • Client side
    • Server side
  • dhtmlxConnector for Grid
  • dhtmlxConnector for Form
Start Client-Server Communication PHP Connector Samples

Defining Grid Structure on Server Side

Client side

index.html

<!DOCTYPE HTML>
<html>
   <head>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
    <div id="gridbox" style="width:350px;height:250px";border:1px solid #A4BED4;></div>

    <script type="text/javascript">

     function doOnLoad(){
         var mygrid = new dhtmlXGridObject('gridbox');
         mygrid.setImagePath("codebase/imgs/");
         mygrid.setSkin("dhx_skyblue");
         mygrid.load("griddata.php");
     }
    </script>
   </head>
   <body onload="doOnLoad()">
   </body>
</html>

Server side

griddata.php

<?php
require_once("../codebase/connector/grid_config.php");
require_once("../codebase/connector/grid_connector.php");

$res=new PDO("mysql:dbname=tasks;host=localhost","root","");
$conn = new GridConnector($res);
    $config = new GridConfiguration();

    $config->setHeader("Item Name,Item CD");
    $config->attachHeader("Item Name Test,#rspan");
    $config->attachFooter("Item Name,Item CD",
        Array("background: #ff0000;", "background: #00ff00;"));
    $config->attachFooter("Item Name Test,#rspan", "background: #0000ff;color:white;");
    $config->setColIds("col1,col2");
    $config->setInitWidths('120,*');
    $config->setColSorting("connector,connector");
    $config->setColColor("null,#dddddd");
    $config->setColHidden("false,false");
    $config->setColTypes("ro,ed");
    $config->setColAlign('center,center');

$conn->set_config($config);
$conn->render_table("grid50000","id","item_nm,item_cd");

?>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxConnector for Grid DHTMLX Docs

Documentation
  • Samples of Client-Side Initialization
  • Samples of Server-Side Initialization
  • Defining Grid Structure on Server Side
  • dhtmlxConnector for Grid
    • Client side
    • Server side
  • dhtmlxConnector for Form
Start Client-Server Communication PHP Connector Samples

dhtmlxConnector for Grid

Client side

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="codebase/dhtmlx.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
    <div id="gridbox" style="width:450px;height:250px";border:1px solid #A4BED4;></div>

    <script type="text/javascript">

    var mygrid,myDP;
    function doOnLoad(){
        mygrid = new dhtmlXGridObject('gridbox');
        mygrid.setImagePath("codebase/imgs/");
        mygrid.setHeader("Name,Category,Ingredients");
        mygrid.attachHeader("#connector_text_filter,#connector_select_filter,
            #connector_select_filter");
        mygrid.setInitWidths("200,80,*");
        mygrid.setColTypes("ro,ed,ed");
        mygrid.setColSorting("str,connector,str");
        mygrid.init();
        mygrid.load("xml/griddata.php");

        myDP = new dataProcessor("xml/griddata.php");
        myDP.init(mygrid);

    }
    </script>
   </head>
   <body onload="doOnLoad()" >
   </body>
</html>

Server side

griddata.php

<?php
require_once("../codebase/connector/grid_connector.php");

$res=new PDO("mysql:dbname=tasks;host=localhost","root","");
$conn = new GridConnector($res);
$conn->enable_log("temp.log");

function custom_sort($sorted_by){
    if (!sizeof($sorted_by->rules))
        $sorted_by->add("group","DESC");
}
function formatting($row){
    //render field as details link
    if ($row->get_value("vegetarian")==1&$row->get_value("group")!'Drinks')
        $row->set_value(
            "name",
            "<font color=#FF0066> Vegetarian!  </font>".$row->get_value("name").""
        );
}
function validate($data){
    if ($data->get_value("group")=="")
        $data->error();
}
$conn->event->attach("beforeProcessing","validate");
$conn->event->attach("beforeSort","custom_sort");
$conn->event->attach("beforeRender","formatting");

$conn->render_table("meals","id","name,group, ingredients", "vegetarian");

?>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxConnector for Form DHTMLX Docs

Documentation
  • Samples of Client-Side Initialization
  • Samples of Server-Side Initialization
  • Defining Grid Structure on Server Side
  • dhtmlxConnector for Grid
  • dhtmlxConnector for Form
Start Client-Server Communication PHP Connector Samples

dhtmlxConnector for Form

Don't forget to include the 'connector.js' file on the page.

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
    <script  src="../codebase/dhtmlx.js"></script>
    <script type="text/javascript" src="../codebase/connector.js"></script>
    <div id="box" style="width:250px; height:160px; background-color:white;"></div>
</head>

<body>
<script type="text/javascript">
//---form configuration. Defining controls
 formData = [
  {type: "block", list:[
  {type: "fieldset", name:"mydata", label:"Customer details", width:235, list:[
    {type:"input", name:"name", label:"Name", labelWidth:50, inputWidth:130},
    {type:"input", name:"address", label:"Address", labelWidth:50, inputWidth:130},
    {type:"input", name:"email", label:"Email", labelWidth:50, inputWidth:130},
    {type:"button",name:"save", offsetTop:10, value:"Submit"}
  ]}]},
  {type:"block", list:[
    {type:"button", name:"button1", value:"Customer 1",offsetTop:10,width:80},
    {type:"newcolumn"},
    {type:"button", name:"button2", value:"Customer 2",offsetTop:10,width:80}]}
 ];
 var myForm = new dhtmlXForm("box",formData);   //initializes a form
 myForm.load('formdata.php?id=1');              //loads data from db
 var mydp = new dataProcessor ("formdata.php"); //initializes dataProcessor
 mydp.init(myForm);                      //attaches dataProcessor object to the form

 myForm.attachEvent("onButtonClick", function(id){
    if (id=='button1'){
        myForm.load('formdata.php?id=1'); //loads data of 1st customer(record id=1)
    }
    else if (id=='button2'){
        myForm.load('formdata.php?id=2'); //loads data of 2nd customer(record id=2)
    }
    else if (id=='save'){
        myForm.save();                    //saves data to db
    }
 });
</script>
</body>
</html>

formdata.php

<?php
  require_once("../codebase/connector/form_connector.php");
  $res=new PDO("mysql:dbname=tasks;host=localhost","root","");
  $conn = new FormConnector($res,"MySQL");
  $conn->render_table("customers","id","name, address, email");
?>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration and New Functions DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
    • New in version 2.0
    • New in version 1.5
    • New in version 1.2
    • Migration from older versions
  • HowTos
Start Client-Server Communication PHP Connector

Migration and New Functions

New in version 2.0

  • New methods for filtering and sorting (filter(), sort());

  • The possibility to combine data configured by several connectors in one dataset and load it in one request

  • New methods for data configuration: add(), render(), configure()
  • Joining tables (the mix method)
  • Adding custom 'key:value' pairs to all data items at once
  • Returning data as a string

New in version 1.5

Security:

  • Protection from XSS attacks;
  • Preventing CSRF and XSRF attacks.

Flexibility:

  • New methods for rendering data (support for stored procedures calls, loading from data arrays);
  • The possibility to set userdata with all types of connectors;
  • The possibility to rename the query status parameter '!nativeeditor_status';
  • Better OOP support (support for data model and data behavior classes);
  • Better Touch Support (improved data formats, adding extra tags/sections to data);
  • Support for PHP frameworks (CodeIgniter, YII, CakePHP).

New in version 1.2
  • SQLite support
  • JSONDataConnector/DataConnector
  • onDBError event

Migration from older versions

0.9 -> 0.96

  • beforeFilter and beforeSorting events provide object as parameter instead of plain data
  • Order of parameters for render_* methods of TreeGrid and Tree connectors was changed.
//0.9
render_table("table","id","fields","parent id")
//1.0
render_table("table","id","fields","extra fields","parent id")

0.96 -> 1.0

  • beforeOutput event has different parameters

1.0 -> 1.5

  • new version of filtering out HTML content before saving, use the next code if you want to revert logic of connector to the previous behavior
ConnectorSecurity::$xss = DHX_SECURITY_TRUSTED;
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


HowTos DHTMLX Docs

Documentation
  • PHP Connector API
  • General Idea of dhtmlxConnector
  • Initializing PHP Connector
  • Components Functionality
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Client-Side Requirement - DataProcessor
  • Making Queries
  • Saving Data Changes Made in Form
  • Security
  • Validation
  • Data Export
  • Elementary DB Operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Using Connector with Popular Frameworks
  • Samples
  • Migration and New Functions
  • HowTos
    • General HowTos
    • Data Loading HowTos
    • Data Updating HowTos
    • Combo Specific HowTos
    • Form Specific HowTos
    • Grid Specific HowTos
    • Tree/TreeGrid Specific HowTos
    • DataStore Specific HowTos
Start Client-Server Communication PHP Connector

HowTos

General:

  • ... assign aliases to DB fields?
  • ... attach event?
  • ... check value of an item?
  • ... create custom database error message?
  • ... customize content of a cell?
  • ... filter data on server-side?
  • ... handle errors and log them?
  • ... secure data exchange?
  • ... set value of an item?
  • ... sort data on server-side?
  • ... validate data on client-side?
  • ... validate data on server-side?

Loading data:

  • ... call a stored procedure?
  • ... enable dynamic loading?
  • ... format/change data before loading?
  • ... get loaded data?
  • ... join tables?
  • ... load data from database table?
  • ... load data from Excel file?
  • ... load data from File System?
  • ... load data from PHP array?
  • ... load data from several connectors in one request?
  • ... send additional information to client-side?
  • ... set userdata?

Updating data:

  • ... alter the default styles set for responses?
  • ... avoid updating certain field(s) on server-side?
  • ... change default data processing while updating?
  • ... set custom status of operation?
  • ... terminate any further processing?
  • ... change values before saving?
  • ... implement transactions?
  • ... link dataProcessor with connector?
  • ... realize multi-user sync?
  • ... save data changes made in form?
  • ... update data on server-side?

Components-specific:

Combo:

  • ... populate combo with data from db?

Form:

  • ... populate 'select' item with data from db?
  • ... populate 'combo' item with data from db?
  • ... load data from db?
  • ... save changes made in a form to db?

Grid:

  • ... define grid configuration on server-side?
  • ... export grid's data from server to Excel file?
  • ... export grid's data from server to pdf file?
  • ... load data from a table that doesn't contain identity field?
  • ... populate select/combo columns with data?
  • ... set a custom style for a row or a cell?

Tree and TreeGrid:

  • ... load data from multiple tables?
  • ... load data from table that doesn't contain relation field?
  • ... mark an item as a leaf or branch?

DataStore:

  • ... use connector functionality for dhtmlXDataStore objects?
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


General HowTos DHTMLX Docs

Documentation
  • General HowTos
    • How can I assign aliases to DB columns?
    • How can I attach event?
    • How can I check the value of an item?
    • How can I create a custom database error message?
    • How can I customize the content of a cell?
    • How can I filter data on the server side?
    • How can I handle errors and log them?
    • How can I secure data exchange?
    • How can I set value to an item?
    • How can I sort data on the server side?
    • How can I validate data on client-side?
    • How can I validate data on server-side?
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
  • Form Specific HowTos
  • Grid Specific HowTos
  • Tree/TreeGrid Specific HowTos
  • DataStore Specific HowTos
Start Client-Server Communication PHP Connector HowTos

General HowTos

How can I assign aliases to DB columns?

By means of using the render_sql() or render_table() methods you can assign aliases to required tables or columns. For this purpose, in sql statement you should use the word 'as' (as in any usual sql statement), in other parameters - parentheses.

$grid->render_table("tableA","id","name,price(product_price)");
//or
$grid->render_sql("Select *,tableA.id as aid from tableA,tableB where tableA.id=tableB.id",
"tableA.id(aid)","name,price(product_price)");

How can I attach event?

To attach event you should use event->attach(). For more details on this topic, see the 'Handling Events' guide.

$conn->event->attach(event_name,handlerFunc);

How can I check the value of an item?

The value of any item can be checked by the get_value() method.

$grid->get_value($name);

How can I create a custom database error message?

To add a custom error message you can use the event onDBError and write the desired message in the appropriate handler.

function doOnDBError($action, $exception){
    $action->set_response_text("Some details about error")
}
$conn->event->attach("onDBError",doOnDBError);

How can I customize the content of a cell?

You can use the beforeRender event to define how the content of a cell must be formatted.

function custom_data($row){
    $data = $row_get_value("some_column");
    $row->set_value("some_column", "$data <input type='text' />")
}

$grid->event->attach("beforeRender","custom_data");

In the sample above the grid will have a custom content - html input 'text'.

How can I filter data on the server side?

You have 3 ways to filter data on the server backend:

  • by specifying additional parameters in URL (on the client side)
grid.load("some.php?connector=true&dhx_filter[1]=mask");
  • by using in-header filter types during the component configuration (on the client side)
mygrid.setHeader("Column A, Column B");
mygrid.attachHeader("#connector_text_filter,#connector_select_filter")
  • by means of the beforeRender event (on the server side)
function custom_filter($data){
  ...
}
$conn->event->attach("beforeRender","custom_filter");

See the guide 'Filtering' for more information.

How can I handle errors and log them?

You can enable logging with the help of the enable_log() method. For more details see the 'Error handling and logging' guide.

$conn->enable_log("path to log file");//to show short info on the client side
_or
$conn->enable_log("path to log file", true);// to show full info on the client side

How can I secure data exchange?

You can secure your app from XSS, CSRF and XSRF attacks and deny access to certain groups of users. For more details, see the guide 'Security'.

How can I set value to an item?

By using the set_value() method, you can set value to any item of a component.

$dataItem->set_value($name,$value)

How can I sort data on the server side?

You have 2 ways to sort data on the server backend:

  • by specifying additional parameters in URL (on the client side)
grid.load("some.php?connector=true&dhx_sort[2]=asc");
  • by using the sorting type 'connector' during the component configuration (on the client side)
grid.setColSorting("connector,str,na);

For more information, see the 'Sorting' guide.

How can I validate data on client-side?

dataProcessor lets you validate data on the client side. Use the setVerificator(index,method) method to define the appropriate columns and validators. See details in the related chapter of dataProcessor' documentation.

dp.setVerificator(column_index,verification_func)

How can I validate data on server-side?

To perform server-side validation you should use one of the dhtmlxConnector events stated below and specify the needed validation rules in the appropriate events' handlers functions:

  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • beforeProcessing
function validate($data){
...
}
$conn->event->attach("beforeProcessing","validate");

For more details on the server-side validation, see the 'Validation' guide.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Data Loading HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
    • How can I call a stored procedure?
    • How can I enable dynamic loading?
    • How can I format/change data before loading?
    • How can I get the loaded data?
    • How can I join tables?
    • How can I load data from a database table?
    • How can I load data from Excel file?
    • How can I load data from File System?
    • How can I load data from PHP array?
    • How can I load data from several connectors in one request?
    • How can I send additional information to the client side?
    • How can I set userdata?
  • Data Updating HowTos
  • Combo Specific HowTos
  • Form Specific HowTos
  • Grid Specific HowTos
  • Tree/TreeGrid Specific HowTos
  • DataStore Specific HowTos
Start Client-Server Communication PHP Connector HowTos

Data Loading HowTos

How can I call a stored procedure?

To load data with a stored procedure, you should use the render_complex_sql method.

$grid->render_complex_sql("exec usp_findusers 'John'","id",
"name,surname,age,address,phone");

How can I enable dynamic loading?

To enable dynamic loading you should:

  • on the client side enable the related mode (e.g. smart rendering or paging for grid)
grid.enableSmartRendering(mode,buffer);
  • on the server side call the method dynamic_loading()
$grid->dynamic_loading([$rowsNum]);

See the guide 'Dynamic loading' for more information.

How can I format/change data before loading?

To set some specific formatting or change data before sending to the client side, you should use the beforeRender event handler. For more details on this topic, see the 'Formatting/Changing Data before Loading' chapter.

function color_rows($row){
    if ($row->get_index()%2)
    $row->set_row_color("red");
}

$grid->event->attach("beforeRender","color_rows");

How can I get the loaded data?

To get the data generated by dhtmlxConnector on the server side, call the asString command with the true parameter and the related 'render' method:

$conn = new GridConnector($res,"MySQL");
$conn->asString(true);

$result = $conn->render_table("tevents","event_id","text,start_date,end_date");

For more info on this topic, read the chapter 'Returning data as a string' in 'Basic loading' guide.

How can I join tables?

See the details in the related chapter of documentation: "Joining tables".

How can I load data from a database table?

To load data from a database table you should use one of two methods:

  • render_table() (for loading from single table)
$grid->render_table("tableA","item_id","column1,column2", "extra_column3");
  • render_sql() (for loading from several tables)
$grid->render_sql(
    "Select * from tableA, tableB  where  tableA.id=tableB.id",
    "tableA.id","column1,column2"
);

How can I load data from Excel file?

To load data from Excel file you should download phpExcel library from http://support.dhtmlx.com/x-files/connector/phpExcel.zip and include additional files:

  • 'lib/PHPExcel.php' (phpExcel package)
  • 'lib/PHPExcel/IOFactory.php' (phpExcel package)
  • 'db_excel.php' (standard connector's package)

Then, call the render_table() method where as parameters you should specify the cell range and Excel columns. Set the second parameter to 'id' for auto id generation.

//files from phpExcel package
require_once('lib/PHPExcel.php');
require_once('lib/PHPExcel/IOFactory.php');
//connectors
require("../../codebase/db_excel.php");
require("../../codebase/grid_connector.php");

$grid = new GridConnector("../some.xls", "ExcelDBDataWrapper");
$grid->render_table("A18:F83", "id", "A,B,C,D,E,F");

For more details see the chapter 'Loading from Excel file' in 'Basic loading' guide.

How can I load data from File System?

To load data from File System you should include an additional file - db_filesystem.php and call the render_table() method where as parameters you should specify folder (that requires data listing), field's id (leave it empty or use safe_name as ID of file) and lists of fields.

require("./codebase/connector/db_filesystem.php");
require("./codebase/connector/grid_connector.php");

$grid = new GridConnector("", "FileSystem");
$grid->render_table(
    "../",
    "safe_name",
    "filename,full_filename,size,name,extention,date,is_folder"
);

For more details, see the guide chapter 'Loading from File System' in 'Basic loading' guide.

How can I load data from PHP array?

To load data from a PHP array you should use the method render_array

$data = array(
    array("id" => "1", "product" => "Phone AB12",    price => "460"),
    array("id" => "2", "product" => "Tablet device", price => "830")
);
$conn->render_array($data, "id", "product,price");

For more details, see the chapter 'Loading from PHP array' in the 'Basic loading' guide.

How can I load data from several connectors in one request?

To combine data configured by several connectors and return it in one request you should use MixedConnector.

$data1 = new JSONDataConnector($res);
$data1->configure("country_data", "country_id", "name,full_name,type");

$data2 = new JSONTreeDataConnector($res);
$data2->configure("tasks_data","taskId","taskName","","parentId");

$conn = new MixedConnector($res);
$conn->add("countries", $data1);
$conn->add("tasks", $data2);
$conn->render(); //retrieves configured data from the server

See details in the article 'Mixed connector'.

How can I send additional information to the client side?

In order to send to the client side additional information that won't be outputted but you'll have access to, use the fourth(optional) parameter of the render_table() method. There you should specify columns that contain the desired additional information.

$grid->render_table("some_table","id","name,price","color,count");

For more information see the chapter 'Using extra fields' in the 'Formatting/Changing Data before Loading' guide.

How can I set userdata?

To set userdata you should use the set_userdata method:

function formatting($row){
    $row->set_row_color($row->get_value("color"));
    $row->set_userdata("some_data",$row->get_value("count"));
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Data Updating HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
    • How can I alter the default styles set for responses?
    • How can I avoid updating certain field(s)?
    • How can I change default data processing while updating?
    • How can I set a custom status of the operation?
    • How can I terminate any further processing?
    • How can I change values before saving?
    • How can I implement transactions?
    • How can I link dataProcessor with connector?
    • How can I update data on the server side?
    • How can I save data changes made in form (simple way)?
  • Combo Specific HowTos
  • Form Specific HowTos
  • Grid Specific HowTos
  • Tree/TreeGrid Specific HowTos
  • DataStore Specific HowTos
Start Client-Server Communication PHP Connector HowTos

Data Updating HowTos

How can I alter the default styles set for responses?

You can alter the default styles for each state, like:

dp.styles.error = ""; //avoids a special style for the 'error' response
//you should write it on the client side (in your HTML file)
//dp - dataProcessor object

How can I avoid updating certain field(s)?

To remove some field from updating you can use the following technique:

//write it before '$grid->render_table'
function filter_set($action){
   $action->remove_field("id"); //the named field won't be included in CRUD operations
}
$grid->event->attach("beforeProcessing", filter_set);

How can I change default data processing while updating?

To affect the default data processing either on the server- or client-side you should use either dataProcessor or dhtmlxConnector events. For more details, see the chapter 'Changing default processing' in 'Client-side requirement - dataProcessor'.

How can I set a custom status of the operation?

By using the set_status() method you can set status (custom or another predefined) of operation. Using the defineAction() method of dataProcessor you can assign the appropriate processing for this status.

//server-side
$data->set_status("my_status");
//client-side
dp.defineAction("my_status",function(sid,response){
...
return true;// return false to cancel default data processing at all
})

How can I terminate any further processing?

Calling the success() method you terminate any further action processing, i.e. data updating will be stopped and considered as finished.

function my_update($data){
   ...
   $data->success(); // marks an operation as finished
}
$conn->event->attach("beforeUpdate","my_update")

How can I change values before saving?

To customize values before saving you should use the server-side events stated below:

  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • beforeProcessing
function my_update($data){
   ...
}
$conn->event->attach("beforeUpdate","my_update")

For more information, see the 'Using server-side events' chapter in 'Making queries' guide.

How can I implement transactions?

The connector allows using transactions for INSERT/UPDATE/DELETE operations (make sure that the used DB engine has support for transactions).

To activate transaction mode use the set_transaction_mode() method. For more details see the chapter 'Transactions' in 'Making queries' guide.

$conn->sql->set_transaction_mode("global"); //for all records inside of single request
_or
$conn->sql->set_transaction_mode("record");// for each record in request

How can I link dataProcessor with connector?

To link dataProcessor with connector you should specify the connector file as a parameter of dataProcessor constructor:

dp = new dataProcessor("myconnector.php");
dp.init("mygrid");

How can I update data on the server side?

To update data on the server side, you should initialize dataProcessor on the client side and link dhtmlxConnector to it. The default updating will be done automatically. For more details, see the guide 'Client-side requirement - dataProcessor'.

How can I save data changes made in form (simple way)?

dhtmlxConnector automatically executes CRUD operations for next patterns:

//to get data of a DB record
   GET: connector.php?action=get&id={some}
//to delete data of a DB record
   GET: connector.php?action=delete
//to update data of a DB record
   GET: connector.php?action=delete
   POST: id={some}&property_name={value}
//to insert a new record to DB
   GET: connector.php?action=insert
   POST: property_name={value}

For more details see the guide 'Saving data changes made in form'.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Combo Specific HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
    • How can I populate combo with data from db?
  • Form Specific HowTos
  • Grid Specific HowTos
  • Tree/TreeGrid Specific HowTos
  • DataStore Specific HowTos
Start Client-Server Communication PHP Connector HowTos

Combo Specific HowTos

How can I populate combo with data from db?

To define options of combo you should use ComboConnector on the server side and specify the connector file in the load method on the client side:

client side:

var combo=new dhtmlXCombo("combo_zone2","alfa2",200);
combo.load("connector.php");

server side:

<?php
require_once("../codebase/connector/combo_connector.php");
$res=new PDO("mysql:dbname=mydb;host=localhost","root","");

$data = new ComboConnector($res, "MySQL");
$data->render_table("categories","id","valueColumn, labelColumn");
?>
  • Names of the fields can have aliases (value or label) to identify the appropriate attribute.
$data->render_sql(
    "SELECT *, CONCAT(FirstName, LastName) as label FROM table1",
    "id",
    "id,FirstName(label)"
);

Note, in the filtering mode Combo filters data by the "label" field.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Form Specific HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
  • Form Specific HowTos
    • How can I populate the 'select' item with data from db?
    • How can I populate 'combo' item with data from db?
    • How can I load data from db?
    • How can I save changes made in a form to db?
  • Grid Specific HowTos
  • Tree/TreeGrid Specific HowTos
  • DataStore Specific HowTos
Start Client-Server Communication PHP Connector HowTos

Form Specific HowTos

How can I populate the 'select' item with data from db?

To define options of the select item you should use SelectOptionsConnector on the server side and specify the connector parameter for the appropriate item on the client side:

client side:

var formData = [{type: "select", label: "Categories", connector:"selectOptions.php"}];

server side:

<?php
require_once("../codebase/connector/options_connector.php");
$res=new PDO("mysql:dbname=myDB;host=localhost","root","");

$data = new SelectOptionsConnector($res, "MySQL");
$data->render_table("categories","id","valueColumn, labelColumn");

?>

For more information on this topic, see 'SelectOptionsConnector' article.

How can I populate 'combo' item with data from db?

To define options of the 'combo' item you should use ComboConnector on the server side and specify the connector parameter for the appropriate item on the client side:

client side:

var formData = [{
    type: "combo",
    name: "myCombo",
    label: "Select type",
    connector:"comboOptions.php"
}];

server side:

<?php
require_once("../codebase/connector/combo_connector.php");
$res=new PDO("mysql:dbname=myDB;host=localhost","root","");

$data = new ComboConnector($res, "MySQL");
$data->render_table("categories","id","valueColumn, labelColumn");
?>
  • Names of the fields can have aliases (value or label) to identify the appropriate attribute.
$data->render_sql(
    "SELECT *, CONCAT(FirstName, LastName) as label FROM table1",
    "id",
    "id,FirstName(label)"
);

Note, in the filtering mode Combo filters data by the "label" field.

How can I load data from db?

To load data to a form you should use FormConnector on the server side and the method load (id) on the client side:

client side

myForm.load('formdata.php?id=1');

where a connector file with the id of loading record must be specified as the parameter.

The values of the record's columns will be used as the values of form's controls.

server side

<?php
require_once("../codebase/connector/form_connector.php");//includes needed connector
// connects to the "tasks" database
$res=new PDO("mysql:dbname=tasks;host=localhost","root","");
$conn = new FormConnector($res,"MySQL"); // connector initialization
$conn->render_table("customers","id","name, address, email"); // data configuration
?>

For more information on this topic, see 'dhtmlxForm.Work with the Server Side' tutorial.

How can I save changes made in a form to db?

To save form changes to DB, you should use the method save() on the client side.

You can call this method, for example, on clicking some button.

myForm.attachEvent("onButtonClick", function(id){
    if (id=='saveButton'){
        myForm.save();
    }
}

For more information on this topic, see 'dhtmlxForm.Work with the Server Side' tutorial.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Grid Specific HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
  • Form Specific HowTos
  • Grid Specific HowTos
    • How can I define grid structure on the server side?
    • How can I export grid's data from server to Excel file?
    • How can I export grid's data from server to pdf file?
    • How can I populate select/combo columns with data?
    • How can I load data from a table that doesn't contain the identity field?
    • How can I set a custom style for a row or a cell?
  • Tree/TreeGrid Specific HowTos
  • DataStore Specific HowTos
Start Client-Server Communication PHP Connector HowTos

Grid Specific HowTos

How can I define grid structure on the server side?

To define grid structure on the server side you can use one of the two modes:

  • automatic
  • manual

In both modes you should use the set_config() method where GridConfiguration object must be specified as the input parameter.

In automatic mode grid will use the names of a table's fields as the labels for the columns.

$config = new GridConfiguration();
$grid->set_config($config);
$grid->render_table("grid50000","item_id","item_nm,item_cd");

In manual mode the structure is defined by php command. The names of commands mimic the names of js commands with a similar functionality.

$config = new GridConfiguration();
$config->setHeader(array("column 1","column 2"));
$config->setColTypes(array("ro","ed"));
$grid->set_config($config);
$grid->render_table("grid50000","item_id","item_nm,item_cd");

For more information on the topics covered here, see the 'Defining grid structure on server side' guide.

How can I export grid's data from server to Excel file?

To export data to Excel file you should:

1) Include one additional file

require("../../../codebase/convert.php");

2) Activate the conversion service

$convert = new ConvertService(
"http://dhtmlx.com/docs/products/devExchange/samples/grid2excel_02/server/generate.php"
);

3) Start exporting

$convert->excel("some.xls",false);

Both method's parameters are optional. The first parameter is the name of an output file. The second parameter specifies how the file will be exported: true - as an inline content, false - as an individual file.

After you've called the method excel(), the service automatically starts exporting the data defined through GridConnector.

For more information on this topic see 'Data export' guide.

How can I export grid's data from server to pdf file?

To export data to pdf file you should:

1) Include one additional file

require("../../../codebase/convert.php");

2) Activate the conversion service

$convert = new ConvertService(
"http://dhtmlx.com/docs/products/devExchange/samples/grid2pdf_02/server/generate.php
");

3) Start exporting

$convert->pdf("some.pdf",false);

Both method's parameters are optional. The first parameter is the name of an output file. The second parameter specifies how the file will be exported: true - as an inline content, false - as an individual file.

After you call the method pdf(), the service automatically starts exporting the data defined through GridConnector.

For more information on this topic see 'Data export' guide.

How can I populate select/combo columns with data?

To define options of select/combo columns you have 2 ways:

1) to load data from the same table the grid is populated with data from

// value  label
$grid->set_options("item_nm",array("1" => "one", "2" => "two","3" => "three"));
$grid->render_table("grid50","item_id","item_nm,item_cd");

2) to load data from another table

$options = new OptionsConnector($res, "MySQL");
$options->render_table("countries","country_id","country_id(value),country_name(label)");
$grid->set_options("item_nm",$options);

$grid->render_table("grid50","item_id","item_nm,item_cd");

For more information oN this topic see 'Select/combobox columns in grid' article.

How can I load data from a table that doesn't contain the identity field?

By using KeyGridConnector instead of GridConnector you can load data from a table without the identity field. In this case any data field will serve as the identity one.

$grid = new KeyGridConnector($res);
$grid->render_table("mytable","name","name,address,phone");

For more details see 'KeyGridConnector' guide.

How can I set a custom style for a row or a cell?

dhtmlxConnector contains a bit of methods that allow setting the appearance of a grid.

These methods can be divided into 2 groups:

for a cell customization:

  • set_cell_attribute
  • set_cell_class
  • set_cell_style

for a row customization:

  • set_row_attribute
  • set_row_color
  • set_row_style
function color_rows($row){
    if ($row->get_index()%2)
    $row->set_row_color("red");
}

$grid = new GridConnector($res);
$grid->event->attach("beforeRender","color_rows");
$grid->render_table("records","item_id","item_nm,item_cd");

Tips:

  • to overwrite the background you should use the 'background' attribute, not the 'background-color' one.
  • skin's css can overwrite a number of css attributes. To avoid it, use the !important flag.
$row->set_row_attribute("class","backgroundclass");

.backrgroundclass{
   background:red !important;
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Tree/TreeGrid Specific HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
  • Form Specific HowTos
  • Grid Specific HowTos
  • Tree/TreeGrid Specific HowTos
    • How can I load data from multiple tables?
    • How can I load data from table that doesn't contain the relation field?
    • How can I mark an item as a leaf or a branch of tree?
  • DataStore Specific HowTos
Start Client-Server Communication PHP Connector HowTos

Tree/TreeGrid Specific HowTos

How can I load data from multiple tables?

By using TreeMultitableConnector/TreeGridMultitableConnector instead of TreeConnector/TreeGridConector you can load data from multiple tables.

require("../../codebase/treemultitable_connector.php");

$tree = new TreeMultitableConnector($res);
$tree->setMaxLevel(3);
$level = $tree->get_level();

For more details see 'TreeMultitableConnector/TreeGridMultitableConnector' guide.

How can I load data from table that doesn't contain the relation field?

By using TreeGroupConnector/TreeGridGroupConnector instead of TreeConnector/TreeGridConector you can load data from a table that doesn't contain therelation field.

require("./codebase/connector/tree_group_connector.php");

$tree = new TreeGroupConnector($res);
$tree->render_table("products2", "id", "product_name", "", "category");

For more details see 'TreeGroupConnector/TreeGridGroupConnector' guide.

How can I mark an item as a leaf or a branch of tree?

In the beforeRender event handler you are allowed to mark an item as a leaf or a branch. For this purpose you should use the set_kids() method. As the input parameter true or false must be specified. true marks an item as a branch, false - as a leaf.

$item->set_kids(false);

For more details see 'Tree/TreeGrid Specificity' chapter in 'Dynamic loading' guide.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataStore Specific HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
  • Form Specific HowTos
  • Grid Specific HowTos
  • Tree/TreeGrid Specific HowTos
  • DataStore Specific HowTos
    • How can I use the connector functionality for dhtmlXDataStore objects?
Start Client-Server Communication PHP Connector HowTos

DataStore Specific HowTos

How can I use the connector functionality for dhtmlXDataStore objects?

There are 2 connector types you can use for dhtmlXDataStore objects:

  • JSONDataConnector

  • DataConnector

    For more details, see the related chapter of this documentation.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Java Connector DHTMLX Docs

Documentation
  • DataProcessor
  • PHP Connector
  • Java Connector
    • Java Connector API
    • General Idea of dhtmlxConnector
    • Initializing Java Connector
    • Basic Loading
    • Dynamic Loading
    • Filtering
    • Formatting/Changing Data Before Loading
    • Sorting
    • Select/Combobox Columns in Grid
    • Client-Side Requirement - dataProcessor
    • Making Queries
    • Transactions
    • Security
    • Validation
    • Error Handling and Logging
    • Handling Events
    • Data Protocol
    • New Functions
    • HowTos
  • .Net Connector
  • ColdFusion Connector
Start Client-Server Communication

Java Connector

DHTMLX connector is a helper server-side library that enables access to external datasources and backend systems.

It supports all DHTMLX components which operate with data.

The library itself provides a wide server-side functionality, such as data loading (static or dynamic), saving, filtering, validation, etc. Integration with DHTMLX Dataprocessor allows managing the insert/delete/update operations as well.

Server-side requirements

  • Supported script languages:

    • Java ( JRE 1.5 or 1.6 )

  • Supported databases:

    • MySQL (JDBC);
    • PostgreSQL (JDBC);
    • Oracle (JDBC);
    • MSSQL (JDBC)
    • Any other SQL compliant DB (JDBC)

Supported functionality

  • Data loading for Grid, TreeGrid, Tree, Combo, Gantt, Scheduler, Form
  • Data saving for Grid, TreeGrid, Tree, Gantt, Scheduler, Form
  • Server-side sorting and filtering for Grid, Treegrid
  • Dynamic loading (paging) for Grid, Treegrid, Tree, Gantt, Scheduler, Combo
API reference
  • Java Connector API
Guides

Java Connector Basics

  • General Idea of dhtmlxConnector
  • Initializing Java Connector
 Discusses the definition of dhtmlxConnector and the way of initializing Java Connector.

Loading Data

  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
 Describes the ways of loading data using Java Connector as well as the operations connected with it: filtering, formatting and sorting data.

Managing Create/Update/Delete Operations

  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
 Tells about executing main operations with data using Java Connector.

Auxiliary Resources

  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
 Covers common information you may need while working with Java Connector, incliding answers to the questions about connector's work.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Java Connector API DHTMLX Docs

Documentation
  • Java Connector API
    • Events
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Java Connector API

  • Events
  • Full API reference
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • Events
    • Events List
    • Order of execution
    • beforeSort
    • beforeFilter
    • beforeOutput
    • afterUpdate
    • afterInsert
    • afterDelete
    • afterProcessing
    • beforeProcessing
    • beforeRender
    • beforeUpdate
    • beforeInsert
    • beforeDelete
Start Client-Server Communication Java Connector Java Connector API

Events

Events List
  • beforeSort Event
  • beforeFilter Event
  • beforeRender Event

  • beforeOutput Event

  • beforeUpdate Event

  • beforeInsert Event

  • beforeDelete Event

  • afterUpdate Event

  • afterInsert Event

  • afterDelete Event

  • beforeProcessing Event

  • afterProcessing Event

Order of execution

data loading

  • incoming request parsed
  • beforeSort
  • beforeFilter
  • sql select executed
  • for each selected record
    • beforeRender
    • generate xml for record
  • output data to client

data updating

  • incoming request parsed
  • global transaction started ( if enabled )
  • beforeProcessing
  • for each record
    • record level transaction if started ( if enabled )
    • beforeInsert / beforeDelete / beforeUpdate
    • record level transaction commited ( if enabled )
  • afterProcessing
  • global transaction commited ( if enabled )
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeSort DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeOutput
  • afterUpdate
  • afterInsert
  • afterDelete
  • afterProcessing
  • beforeProcessing
  • beforeRender
  • beforeUpdate
  • beforeInsert
  • beforeDelete
Start Client-Server Communication Java Connector Java Connector API Events

beforeSort

This event occurs before data loading and allows to customize sorting of dataset

class CustomBehavior extends ConnectorBehavior{
    @Override
    public void beforeSort(ArrayList<SortingRule> sorters) {
        //any custom code
    }
}
component.event.attach(new CustomBehavior());

handlerFunc gets the following arguments:

  • sorters - set of sorting rules

Sample of usage:

class CustomBehavior extends ConnectorBehavior{
    @Override
    public void beforeSort(ArrayList<SortingRule> sorters) {
        sorters.get[0].name = "LENGTH(some_field)";
    }
}
component.event.attach(CustomBehavior);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeFilter DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeOutput
  • afterUpdate
  • afterInsert
  • afterDelete
  • afterProcessing
  • beforeProcessing
  • beforeRender
  • beforeUpdate
  • beforeInsert
  • beforeDelete
Start Client-Server Communication Java Connector Java Connector API Events

beforeFilter

This event occurs before data loading and allows to customize filtering of dataset

class CustomBehavior extends ConnectorBehavior{
    @Override
    public void beforeFilter(ArrayList<FilteringRule> filters) {
        //any custom code
    }
}
component.event.attach(new CustomBehavior());

In this event handlerFunc gets the following arguments:

  • filters - set of filtering rules

Sample of usage:

class CustomBehavior extends ConnectorBehavior{
    @Override
    public void beforeFilter(ArrayList<FilteringRule> filters) {
        Int index = filters.index("some_field");
        if (index!=-1)
             filters.get(index).operation = ">";
        }
    }
component.event.attach(new CustomBehavior());
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeOutput DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeOutput
  • afterUpdate
  • afterInsert
  • afterDelete
  • afterProcessing
  • beforeProcessing
  • beforeRender
  • beforeUpdate
  • beforeInsert
  • beforeDelete
Start Client-Server Communication Java Connector Java Connector API Events

beforeOutput

The beforeOutput event occurs after data has been selected from the database and ready to be sent to client side

class CustomBehavior extends ConnectorBehavior{
    @Override
    public void beforeOutput(ConnectorOutputWriter out, HttpServletRequest http_request, HttpServletResponse http_response) {
        //any custom code
    }
}
component.event.attach(new CustomBehavior());

beforeOutput method receives output writer object and request , response objects Event can be used to mix some custom data in XML output.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


afterUpdate DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeOutput
  • afterUpdate
  • afterInsert
  • afterDelete
  • afterProcessing
  • beforeProcessing
  • beforeRender
  • beforeUpdate
  • beforeInsert
  • beforeDelete
Start Client-Server Communication Java Connector Java Connector API Events

afterUpdate

The same as afterProcessing , but occurs only for insert operations

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


afterInsert DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeOutput
  • afterUpdate
  • afterInsert
  • afterDelete
  • afterProcessing
  • beforeProcessing
  • beforeRender
  • beforeUpdate
  • beforeInsert
  • beforeDelete
Start Client-Server Communication Java Connector Java Connector API Events

afterInsert

The same as afterProcessing , but occurs only for insert operations.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


afterDelete DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeOutput
  • afterUpdate
  • afterInsert
  • afterDelete
  • afterProcessing
  • beforeProcessing
  • beforeRender
  • beforeUpdate
  • beforeInsert
  • beforeDelete
Start Client-Server Communication Java Connector Java Connector API Events

afterDelete

The same as afterProcessing , but occurs only for insert operations.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


afterProcessing DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeOutput
  • afterUpdate
  • afterInsert
  • afterDelete
  • afterProcessing
  • beforeProcessing
  • beforeRender
  • beforeUpdate
  • beforeInsert
  • beforeDelete
Start Client-Server Communication Java Connector Java Connector API Events

afterProcessing

This event occurs after insert, update, delete actions. It can be used to pass additional values to client side.

Example of usage:

//adds new xml as a child of default <action> tag which is passed to client side as response
class CustomBehavior extends ConnectorBehavior{
    @Override
    public void beforeProcessing(DataAction data) {
        data.set_response_xml("<guid>some value</guid>");
    }
}
component.event.attach(new CustomBehavior());
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeProcessing DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeOutput
  • afterUpdate
  • afterInsert
  • afterDelete
  • afterProcessing
  • beforeProcessing
  • beforeRender
  • beforeUpdate
  • beforeInsert
  • beforeDelete
Start Client-Server Communication Java Connector Java Connector API Events

beforeProcessing

This event occurs before beforeInsert, beforeUpdate, beforeDelete events occur. The beforeProcessing method occurs for all these operations. It can be cancelled in the same way as the aforementioned events. For more details see beforeUpdate event description .

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeRender DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeOutput
  • afterUpdate
  • afterInsert
  • afterDelete
  • afterProcessing
  • beforeProcessing
  • beforeRender
  • beforeUpdate
  • beforeInsert
  • beforeDelete
Start Client-Server Communication Java Connector Java Connector API Events

beforeRender

The beforeRender event occurs after data has been selected from the database but before its outputting to client.

class CustomBehavior extends ConnectorBehavior{
    @Override
    public void beforeRender(DataItem data) {
         //any custom code
    }
}
component.event.attach(new CustomBehavior());

In this event beforeRender method gets data item object as incoming argument. This object has methods to set properties of data, it can be used to format data in custom way before outputting to client side.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeUpdate DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeOutput
  • afterUpdate
  • afterInsert
  • afterDelete
  • afterProcessing
  • beforeProcessing
  • beforeRender
  • beforeUpdate
  • beforeInsert
  • beforeDelete
Start Client-Server Communication Java Connector Java Connector API Events

beforeUpdate

This event occurs before updating values in database and can cancel default update statement (see error, invalid and success methods below). It can be used also to validate incoming values (see invalid() method below).

class CustomBehavior extends ConnectorBehavior{
    @Override
    public void beforeUpdate(DataAction data) {
        //any custom code
    }
}
component.event.attach(new CustomBehavior());

Samples of usage:

//creates and runs own update statement using values came in request, cancels default update
class updateBehavior extends ConnectorBehavior{
    private GridConnector conn;
    public updateBehavior(GridConnector conn){
        this.conn = conn;
    }

    @Override
    public void beforeUpdate(DataAction action) {
        String price = data.get_value("price");
        String id = data.get_value("id");
        conn.sql.query("UPDATE some_table SET price='"+price+"' where id="+id);
        data.success(); //if you have made custom update - mark operation as finished
    }
}
conn.event.attach(new updateBehavior(conn));
//checks if value of name is empty, then cancel update. Otherwise proceeds with default update.
class CustomBehavior extends ConnectorBehavior{
    @Override
    public void beforeUpdate(DataAction data) {
        if (data.get_value("name").equals(""))
             data.invalid();
    }
}
component.event.attach(new CustomBehavior());
//sets new value for name and proceeds with default update.
class CustomBehavior extends ConnectorBehavior{
    @Override
    public void beforeUpdate(DataAction data) {
         data.set_value("name","some new value");
    }
}
component.event.attach(new CustomBehavior());
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeInsert DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeOutput
  • afterUpdate
  • afterInsert
  • afterDelete
  • afterProcessing
  • beforeProcessing
  • beforeRender
  • beforeUpdate
  • beforeInsert
  • beforeDelete
Start Client-Server Communication Java Connector Java Connector API Events

beforeInsert

This event occurs before inserting values in database and can cancel default insert statement. It can be used also to validate incoming values. For more details see beforeUpdate event description.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeDelete DHTMLX Docs

Documentation
  • beforeSort
  • beforeFilter
  • beforeOutput
  • afterUpdate
  • afterInsert
  • afterDelete
  • afterProcessing
  • beforeProcessing
  • beforeRender
  • beforeUpdate
  • beforeInsert
  • beforeDelete
Start Client-Server Communication Java Connector Java Connector API Events

beforeDelete

The beforeDelete event occurs before deleting record in database and can cancel default delete statement. For more details see beforeUpdate event description .

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


General Idea of dhtmlxConnector DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
    • General List of Connectors
    • JSONCommonConnector and CommonConnector
    • KeyGridConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

General Idea of dhtmlxConnector

dhtmlxConnector is a server-side library that lets you access data sources. It consists of individual component-specific connectors and a set of additional ones that provide advanced functionality.

A dhtmlxConnector's job is to provide necessary data exchange conditions so that you do not have to deal with the technical details of working with various data stores, systems or services. As such, each type of dhtmlxConnector is designed to use a specific API.

As the library is server-side, it provides different manipulations just on the server backend:

  • loading data (statically or dynamically) from database, File System, Excel file.
  • server-side filtering, sorting and validation.

When you need to deal with the client side as well, i.e. pass data back to the server, you should use DataProcessor additionally (for more details on this topic, read the chapter 'Client-side requirement - dataProcessor').

General List of Connectors

Component-specific:

  • ComboConnector (relates to dhtmlxCombo)
  • FormConnector (relates to dhtmlxForm)
  • GridConnector (relates to dhtmlxGrid)
  • SchedulerConnector (relates to dhtmlxScheduler)
  • TreeConnector (relates to dhtmlxTree)
  • TreeGridConnector (relates to dhtmlxTreeGrid)

Additional (most important):

  • JSONDataConnector/DataConnector ( relates to touch-oriented libraries: DataTable, dhtmlXDataStore)
  • KeyGridConnector

Throughout the documentation you'll see examples in which 'GridConnector' is used. If your use a different component, just replace GridConnector with the appropriate connector type.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


JSONCommonConnector and CommonConnector DHTMLX Docs

Documentation
  • JSONCommonConnector and CommonConnector
    • Common
    • Adding tags/sections to data
    • Simple Data Transfer
  • KeyGridConnector
Start Client-Server Communication Java Connector General Idea of dhtmlxConnector

JSONCommonConnector and CommonConnector

Common

There are 2 connectors you can use for touch-oriented DHTMLX libraries (such as DataTable, DataStore):

  • CommonConnector
  • JSONCommonConnector They both work the same way, but differ in type of returned data.
import java.sql.Connection;
import com.dhtmlx.connector.ConnectorServlet;
import com.dhtmlx.connector.JSONCommonConnector;

public class basic_connector extends ConnectorServlet {

   @Override
   protected void configure() {
       Connection conn= ( new DataBaseConnection()).getConnection();

       JSONCommonConnector c = new JSONCommonConnector(conn);
       c.dynamic_loading(100);
       c.render_table("grid50000", "item_id", "item_nm,item_cd");
   }
}

CommonConnector

CommonConnector generates 'XML' data feed as in:

<data>
   <item id="1" title="War and Peace"  author="Leo Tolstoy"/>
   <item id="2" title="Hamlet"         author="William Shakespeare"/>
   <item id="3" title="Madame Bovary"  author="Gustave Flaubert"/>
</data>

JSONCommonConnector

JSONCommonConnector generates 'JSON' data feed as in:

[
   { id:"1", title:"War and Peace",    author:"Leo Tolstoy" },
   { id:"2", title:"Hamlet",           author:"Shakespeare" },
   { id:"3", title:"Madame Bovary",    author:"Gustave Flaubert" }
]

Adding tags/sections to data

Starting from version 1.5, there is a possibility to add the first child tags, sections to data returned by the connector. To add the tag(section), use method add_section:

CommonConnector

For example, if you call add_section as follows:

CommonConnector c = new CommonConnector(conn);
c.add_section("config", "some_data");
c.add_section("config2", "<column>value1</column><column>value2</column>");

CommonConnector produces the next data:

<data>
    <config>some_data</config>
    <config2><column>value1</column><column>value2</column></config2>
    <item id="1" attr1="qwe" attr2="asd" />
    <item id="2" attr1="qwe" attr2="asd" />
</data>

JSONCommonConnector

If you call add_section as follows:

JSONCommonConnector c = new JSONCommonConnector(conn);
c.add_section("config", "'some_data'");
...
JSONObject data = new JSONObject();
data.put("column1", "value");
c.add_section("config2", data);

JSONCommonConnector produces the next data:

{
    data: [
      { 'id': '1', 'attr1':'qwe', 'attr2':'asd'},
      { 'id': '2', 'attr1':'qwe', 'attr2':'asd'}
    ],
    config: { 'some_data' },
    config2: { 'column1':'value' }
}

Simple Data Transfer

dhtmlxDataJsonConnector/dhtmlxDataConnector supports simplified protocol for CRUD requests

  • get all data
 GET  data?action=get

server response - collection of json (xml) objects

  • get info for some specific record
 GET  data?action=get&id=123

response - json(xml) object

  • delete
 GET  data?action=delete
 POST id=123

server response - 'true'/'false'

  • insert
 GET  data?action=insert
 POST id=123&some=value&other=value

response on success

true
<new_id>

or

 false

on failed insert operation

  • update
 GET  data?action=delete
 POST id=123&some=value&other=value

response - 'true'/'false'

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


KeyGridConnector DHTMLX Docs

Documentation
  • JSONCommonConnector and CommonConnector
  • KeyGridConnector
Start Client-Server Communication Java Connector General Idea of dhtmlxConnector

KeyGridConnector

Normal grid connector expects that target table has some autogenerated ID field, but, in some cases, data needs to be loaded and saved from database table which doesn't have such autofilled ID.

Normal grid connector can be used for data loading from such tables, but won't be able to save data back. KeyGridConnector can resolve such problem (use it instead of GridConnector):

Connection conn = ( new DataBaseConnection()).getConnection();
KeyGridConnector data = new KeyGridConnector(conn);
data.render_table("mytable","name","name,address,phone");

So, there are two differences from the normal GridConnector:

  • name of connector class (GridConnector->KeyGridConnector).
  • one of data fields is used as ID
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing Java Connector DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
    • Client side
    • Server side
    • Thread-safe code initialization
    • Samples client-side initialization
    • Samples server-side initialization
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Initializing Java Connector

To use the functionality of DHTMLX Connector, first you should initialize it.

Generally, both client- and server-sides are concerned in it.

Client side

If you need just load data from database (with or without data preprocessing)

Specify connector file in the load method of a component.

//index.html
myGrid = new dhtmlXGridObject("someContainer");// initializes grid
...
myGrid.load("myconnector.do");

If you need to perform any update operations

1) Specify connector file in the load method of a component;

2) Initialize dhtmlxDataProcessor on the client side (read more about it here).

//index.html
myGrid = new dhtmlXGridObject("someContainer");// initializes grid
...
myGrid.load("myconnector.do");
myDP = new dataProcessor("myconnector.do");// initializes dhtmlxDataProcessor
myDP.init(myGrid);

Samples client-side initialization

Server side
  1. Import the appropriate connector files into the page.
  2. Create Database connection.
  3. Instantiate the connector object. Linking variable is a mandatory parameter in all constructors. The second parameter(database type)- optional. By default, “MySQL”. Another possible is “Postgre”
  4. The last step is data configuration.
import java.sql.Connection;
import java.sql.DriverManager;

import com.dhtmlx.connector.*;

/**
 * The Class BasicConnector.
*/
public class BasicConnector extends ConnectorServlet {
    @Override
    protected void configure() {
        //obtain DB connection
        Connection conn=null;
        try {
          Class.forName ("com.mysql.jdbc.Driver").newInstance ();
          conn = DriverManager.getConnection("jdbc:mysql://localhost/sampleDB","root","");
        } catch (Throwable e) {
            e.printStackTrace();
        }

        //Initializes connector
        GridConnector c = new GridConnector(conn);
        //configures the used table and fields
        c.render_table("grid50000", "item_id", "item_nm,item_cd");
    }
}

Samples server-side initialization

Thread-safe code initialization

The code above has been used starting from the initial version, but it has one disadvantage - it is not thread safe. Starting from the version 1.0 you can create a thread safe connector. Its init code will look as:

public class BasicConnector extends ThreadSafeConnectorServlet{
    @Override
        protected void configure(HttpServletRequest req, HttpServletResponse res) {
        //obtain DB connection
        Connection conn=null;
        try {
          Class.forName ("com.mysql.jdbc.Driver").newInstance ();
          conn = DriverManager.getConnection("jdbc:mysql://localhost/sampleDB","root","");
        } catch (Throwable e) {
            e.printStackTrace();
        }

        //Initialize connector
        GridConnector c = new GridConnector(conn);
            c.servlet(req, res);
        //configure used table and fields
        c.render_table("grid50000", "item_id", "item_nm,item_cd");
    }
}

There are two main differences:

  1. The class extends ThreadSafeConnectorServlet.
  2. During configuration, the servlet method of the connector class must be called.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Samples client-side initialization DHTMLX Docs

Documentation
  • Samples client-side initialization
    • grid
    • treeGrid
    • tree
    • combo
    • scheduler
  • Samples server-side initialization
Start Client-Server Communication Java Connector Initializing Java Connector

Samples client-side initialization

grid

myGrid = new dhtmlXGridObject("myContainer");
//... grid configuration commands
myGrid.load("myconnector.php");

treeGrid

static mode

myGrid = new dhtmlXGridObject("myContainer");
myGrid.setColTypes("tree,...");
//...grid configuration commands
myGrid.load("myconnector.php");

dynamic mode

myGrid = new dhtmlXGridObject('myContainer');
myGrid.setColTypes("tree,...");
//...
myGrid.kidsXmlFile="connector.php";
myGrid.load("connector.php");

tree

static mode

tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
//...
tree.load("connector.php");

dynamic mode

tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
//...
tree.setXMLAutoLoading("connector.php");
tree.load("connector.php");

combo

static mode

var combo=new dhtmlXCombo("combo_zone2","alfa2",200);
combo.load("connector.php");

auto-complete mode

var combo=new dhtmlXCombo("combo_zone2","alfa2",200);
combo.enableFilteringMode(true,"connector.php",true);
combo.load("connector.php");

scheduler

scheduler.init(some_obj)
scheduler.load("connector.php");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Samples server-side initialization DHTMLX Docs

Documentation
  • Samples client-side initialization
  • Samples server-side initialization
    • db types
Start Client-Server Communication Java Connector Initializing Java Connector

Samples server-side initialization

db types

MySQL

GridConnector c = new GridConnector(conn,DBType.MySQL);

PostgreSQL

GridConnector c = new GridConnector(conn,DBType.PostgreSQL);

Oracle

GridConnector c = new GridConnector(conn,DBType.Oracle);

MSSQL

GridConnector c = new GridConnector(conn,DBType.MSSQL);

Component types

For other components syntax of constructor exactly the same, except, the "Grid" in object name replaced with component's name

Grid

GridConnector c = new GridConnector(conn,DBType.MySQL);

TreeGrid

TreeGridConnector c = new TreeGridConnector(conn,DBType.MySQL);

Tree

TreeConnector c = new TreeConnector(conn,DBType.MySQL);

Combo

ComboConnector c = new ComboConnector(conn,DBType.MySQL);

Scheduler

SchedulerConnector c = new SchedulerConnector(conn,DBType.MySQL);
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Basic Loading DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
    • Loading from database table
    • Loading from data array
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Basic Loading

In this chapter you'll learn how to load data from:

  • database table
  • data array

In order to load data correctly, your 'id' field in the database must be auto-increment.

Loading from database table

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler

Loading characteristics are defined at the stage of component configuration.

There are 2 ways to specify the desired data:

  • by the render_table() method when you work with one table
  • by the render_sql() method when you work with several tables
  • by the render_complex_sql() method when you use it to call stored procedures in the database

Work with one table

When all the necessary data is placed in one database table, you should use the render_table() method:

grid.render_table("grid50","item_id","item_nm,item_cd", "extra1, extra2");

Parameters:

  • database table name
  • name of the identity field (optional)
  • a list of fields which should be used as values of the component item (cells of grid, item label in tree, text of option in combo)
  • a list of extra fields (you may learn more about extra fields here)

If you want to render all fields from DB (except for the key field), you can use a simplified command:

grid.render_table("grid50");

That's enough to make connector implement select, insert, update and delete operations.

Work with several tables

If your SQL statement contains more than one table, connector won't be able to generate insert/update/delete operations correctly and you will need to make one of the following actions:

  1. Define sql for each operation manually
  2. Use server-side events to define your own processing logic
  3. Define different configs for select and update operations

The 3rd approach is shown in the code snippet below:

if(gridConn.is_select_mode()){//code for loading data
    gridConn.render_sql(
        "Select * from tableA, tableB  where  tableA.id=tableB.id",
        "a.id",
        "name,price,other"
    );
}else{//code for other operations - i.e. update/insert/delete
    gridConn.render_table("tableA","id","name,price");
}

With such init code grid will be loaded with three columns of data from 2 tables, but during saving only data from the first table will be saved.

Complex queries

You are allowed to use any SQL statements to populate a dhtmlx component through dhtmlxConnector. For complex SQL queries we strongly encourage you to use the render_complex_sql() method:

grid.render_complex_sql(
    "SELECT name from tableA WHERE dept= (SELECT dept FROM tableB where name 'John')",
    "contact_id",
    "name,surname,age,address",
    "extra1, extra2"
);

Parameters:

  • sql statement
  • name of the identity field (optional)
  • a list of fields which should be used as values of the component item (cells for grid, item label for tree, text of option for combo)
  • a list of extra fields (you may learn more about extra fields here)
  • parent ID field name for hierarchical structures (required for tree and treegrid)

In case your SQL query was against a single table, it is quite probable that insert/update/delete operations do not require any additional code. dhtmlxConnector will parse your SQL and generate insert/update/delete statements based on the used table and fields' names.

Calling stored procedures

Starting from version 1.5, you can load data using in SQL statements stored procedures. The library provides a special method for this need - render_complex_sql.

grid.render_complex_sql(
    "exec usp_findusers 'John'",
    "id",
    "name,surname,age,address,phone"
);

Extra data

The last parameter of the render_array, render_sql, render_complex_sql and render_table methods allows defining a list of fields which will be extracted from database table but won't be sent to the client side.

These fields can be used as attributes or flags, mapped to different properties of records (userdata, row styles, images, etc.).

grid.render_table("tableA","id","name,price","extra1,extra2");
// or
grid.render_sql(
    "Select * from tableA, tableB  where  tableA.id=tableB.id",
    "table_a_id",
    "name,price,other",
    "extra1,extra2"
);

extra1 and extra2 fields will be available in all server-side events but won't be sent to client side, and won't be included in update/insert operations.

Tree and TreeGrid specificity

In case of Tree and TreeGrid, the render_array, render_sql, render_complex_sql methods accept one more parameter - relation ID. For default treegrid hierarchy - it's the name of the field which will be used to link parent and child records.

treeGrid.render_table("tableA","id","name,price","","parent_id");
// or
treeGrid.render_sql(
    "Select * from tableA, tableB  where  tableA.id=tableB.id",
    "a.id",
    "name,price,other",
    "",
    "parent_id"
);

Aliases

To make the usage of extracted data handier you can use aliases for DB field names (makes sense only if you use server-side events):

grid.render_table("tableA","id","name,price(product_price)");
// or
grid.render_sql(
    "Select *,tableA.id as aid from tableA, tableB  where  tableA.id=tableB.id",
    "tableA.id(aid)",
    "name,price(product_price),other"
);

Loading from data array

Starting from version 1.5, instead of database you can load data from an array which can be filled with any kind of external logic.

To load data from an array, create public object(s) of any class implementing the Iterable Interface and call the method render_array.

Beware, the method can't be used for storing data but you still can use event handlers to intercept data saving command and process them in some custom way.

Parameters:

  • name of an array or an array itself
  • name of the identity field (optional)
  • a list of fields which should be used as values of the component item (cells for grid, item label for tree, text of option for combo)
  • a list of extra fields (you may learn more about extra fields here)
  • parent ID field name for hierarchical structures (required for tree and treegrid)
public class SchedulerEvent {

 public int event_id;
 public String start_date;
 public String end_date;
 public String event_name;

 public SchedulerEvent(int id, String start, String end, String text) {
    event_id = id;
    start_date = start;
    end_date = end;
    event_name = text;
 }

}

protected void configure() {
    ArrayList<Object> data = new ArrayList<Object>();
    data.add(new SchedulerEvent(
                    1,
                    "2012-05-24 00:00",
                    "2012-05-25 00:00",
                    "creation time"
            ));
    data.add(new SchedulerEvent(2, "2010-02-16", "2084-06-08", "second part"));

    SchedulerConnector c = new SchedulerConnector(null);
    c.render_array(data, "event_id","start_date,end_date,event_name");
}

Back to top

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Dynamic Loading DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
    • Common
    • Tree/TreeGrid specific
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Dynamic Loading

Common

Dynamic Loading mode allows loading data partially, not all at once, by a client-side request. It decreases initial loading time and loading of the server.

To work correctly, the related mode should be enabled on the client side:

  • grid - smart rendering and paging modes
  • treegrid - dynamic branch loading mode
  • tree - dynamic branch loading mode
  • combo - partial autocomplete ( you don't need it for normal autocomplete)

To activate the mode you should use the method dynamic_loading():

conn.dynamic_loading(true); //tree/treegrid
//or
conn.dynamic_loading(50); //combo/grid

Parameters:

  • true/false for a tree,treegrid.
  • number of rows which should be initially loaded (the value should be greater than a number of rows visible in a grid, or at least any positive number) for a grid.
  • maximum number of options which the server will send to a combo in the 'autocomplete mode' for a single data request.

In the 'dynamic loading' mode you can't use GROUP BY within SQL query

Tree/TreeGrid specific

Normally, the connector makes all operations automatically and doesn't need customization.

But in case of dynamic loading in tree/treeGrid, a database can contain a field a field indicating if the current item is a branch or a leaf. In beforeRender event handler you are allowed to mark an item as a leaf or a branch (it decreases the number of SQL queries and increases the performance).

class ChildBehavior extends ConnectorBehavior{
            public void beforeRender(DataItem data){
                  if (data.get_value("is_a_branch").equals("1"))
                         data.set_kids(1);
                  else
                         data.set_kids(0);
            }
}
tree.event.attach(new ChildBehavior());

The same approach can be used for the non-dynamic mode of tree/treeGrid as well. It's not obligatory but lets you increase data generation performance.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Filtering DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
    • In-header filter types
    • Custom filters (using the beforeRender event)
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Filtering

There are 2 ways to implement server-side filtering:

  • by using in-header filter types during the component configuration
  • by means of the beforeRender event

Note, the server-side filtering of dhtmlxTreeGrid doesn't maintain open states.

In-header filter types

APPLICABLE TO: Grid, TreeGrid, Combo

To enable server-side filtering you can use one of the following in-header filter types while configuring dhtmlxGrid/dhtmlxTreeGrid on the client side:

  • #connector_text_filter - a text filter. Retrieves values which contain a mask defined through a text field
  • #connector_select_filter - a select filter. Retrieves values which contain a mask defined through a dropdown list of possible values
mygrid.setHeader("Column A, Column B");
mygrid.attachHeader("#connector_text_filter,#connector_select_filter")

Text filter

The use of the text filter doesn't require any additional configuration code. Grid/TreeGrid will automatically send data about a newly entered text and filter server-side data using the %mask% pattern.

If you need to change the filtering pattern or implement a more advanced logic - the beforeFilter event should be used.

  • default filtering logic
class FilterBehavior extends ConnectorBehavior{
        @Overrride
    public void beforeFilter(ArrayList<FilteringRule> filters){
        //WHERE some_field LIKE 'value'
        filters.add( new FilteringRule("some_field","value","LIKE"));
    }
}
conn.attach.event(new FilterBehavior());
  • redefined filtering logic
class FilterBehavior extends ConnectorBehavior{
        @Overrride
    public void beforeFilter(ArrayList<FilteringRule> filters){
        //change WHERE some_field LIKE '%value%' to the WHERE some_field > 'value'
        Integer index = filters.index("some_field");
        if (index!=-1)
            filters.get(index).operation=">";
    }
}
conn.attach.event(new FilterBehavior());

Select filter

By default, grid/treegrid will use DISTINCT select against the related field, and fetch all possible options.

If you need to define a custom list of options you can use one of 2 ways:

  • a hardcoded list
ArrayList<String> c1 = new ArrayList<String>();
c1.add("1");
c1.add("two");
c1.add("3");

grid.set_options("item_nm",c1);
grid.render_table("grid50","item_id","item_nm,item_cd");
  • a list created on the base of a different table
filter1 = new OptionsConnector(conn);
filter1.render_table("countries","country_id","country_name(value)");

grid.set_options("item_nm",filter1);
grid.render_table("grid50","item_id","item_nm,item_cd");

You can use both the render_table and render_sql methods for OptionsConnector object, the same as for any normal connector.

Pay attention that the name of the field used in the select filter needs having the (value) alias.

Custom filters (using the beforeRender event)

APPLICABLE TO: Grid, Combo

By using the beforeRender event it's possible to define filtering rules as PHP code (doesn't work for dyn. modes).

class FilterBehavior extends ConnectorBehavior{
        @Overrride
    public void beforeRender(DataItem data){
        if (data.get_value("some") < 0 )
            data.skip();
    }
}
conn.attach.event(new FilterBehavior());
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Formatting/Changing Data Before Loading DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
    • Basic formatting methods
    • Common usage
    • Data formatting
    • Using extra fields
    • Tree/TreeGrid specificity
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Formatting/Changing Data Before Loading

Basic formatting methods

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler

When you need to update values which were returned from a database table or set some specific formatting before sending data to the client side, you should use the beforeRender event handler.

Common usage

class RenderBehavior extends ConnectorBehavior{
    public void beforeRender(DataItem data) {
        if (data->get_index() % 2 == 1 )
            data.set_row_color("red");
    }
}
Connection res = ( new DataBaseConnection()).getConnection();
GridConnector grid = new GridConnector(res);
grid.event.attach(new RenderBehavior());
grid.render_table("grid50000","item_id","item_nm,item_cd");
  • The code snippet above sets colors for rows subject to their indices
  • during data generation, for each record outputted for the client side the beforeRender event will be executed, i.e. the handler function will be called for each record
  • data is an instance of GridDataItem object related to the current record

Data formatting

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler

class RenderBehavior extends ConnectorBehavior{
    public void beforeRender(DataItem data) {
        String field = data.get_value("some");
        data.set_value("some","<a href='details.php?id="+field+"'>"+Details+"</a>");
    }
}

Connection res = ( new DataBaseConnection()).getConnection();
GridConnector grid = new GridConnector(res);
grid.event.attach(new RenderBehavior());
  • the get_value and set_value methods allow getting or setting the value of any field related to the record (it doesn't affect actual values in DB)
  • If an alias was used during data configuration, you need to use it instead of real db field name as the first parameter of the get/set command.

Using extra fields

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler

More complex formatting rules can be defined by using extra fields during the configuration.

class RenderBehavior extends ConnectorBehavior{
    public void beforeRender(DataItem data) {
        //set row color
        data.set_row_color(data.get_value("color"));
        //save in userdata
        data.set_userdata("some_data",data.get_value("count"));
    }
}

Connection res = ( new DataBaseConnection()).getConnection();
GridConnector grid = new GridConnector(res);
grid.event.attach(new RenderBehavior());
grid.render_table("some_table","id","name,price","color,count");
  • field color isn't outputted to the client side but used to define the property of a row.
  • during the update/insert operation only the 'name' and 'price' columns may be changed,the 'color' one will stay untouched.
  • the 'count' field will be sent to the client side as userdata of the row and it will be possible to access it on the client side through the related data.

Tree/TreeGrid specificity

APPLICABLE TO: Tree, TreeGrid

TreeGrid provides TreeGridDataItem and Tree provides TreeDataItem as the input parameter of the beforeRender event handler. Both of them support base operations and a few specific ones.

class RenderBehavior extends ConnectorBehavior{
    public void beforeRender(DataItem data) {
        TreeDataItem item = (TreeDataItem)data;
        if (item.get_value("complete").equals("75"))
            item.set_check_state(true);

        if (item.get_value("duration").equals("10"))
            item.set_image("true.gif");
        else
            item.set_image("false.gif");
    }
}

tree.event.attach(new RenderBehavior());
  • the set_image method allows setting an image of a tree element (for treegrid it accepts the only parameter, while for tree it can be 3 different images for 3 states of a tree's item)
  • the set_check method exists only in TreeDataItem object and allows setting the state of the related checkbox (tree needs having checkboxes enabled in js. configuration code as well)
  • the beforeRender event can be used in dynamic Tree and TreeGrid to define which elements of hierarchy are branches and which are leafs (see details here).
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Sorting DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
    • URL manipulation
    • The sorting type 'connector'
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Sorting

There are 2 ways to implement server-side sorting:

  • by specifying additional parameters in URL
  • by using the sorting type 'connector' during the component configuration

URL manipulation

APPLICABLE TO:Grid, TreeGrid, Tree, Combo, Scheduler

You can control how data will be sorted inside of a column by specifying additional parameters in URL.

//ORDER by field_2 ASC
grid.load("some.do?connector=true&dhx_sort[2]=asc");
//ORDER by field_2 ASC, field_3 DESC
grid.load("some.do?connector=true&dhx_sort[2]=asc&dhx_sort[3]esc");

The sorting type 'connector'

APPLICABLE TO:Grid, TreeGrid

To sort grid/treegrid content with connectors you need to use 'connector' as a sorting type during the grid initialization.

grid.setColSorting("connector,str,na");

In the code snippet above, the first column will be sorted on the server side with connectors, the second one as a string on the client side, the third column will be non-sortable.

By assigning to sorting type 'connector' you just 'say' that sorting will be implemented on the server side.

To define the way, 'behaviour' of sorting, you should use the beforeSort event.

This event doesn't allow writing a custom sorting logic, but you can affect SORT BY clause of the generated SQL request.

Default sorting by one field

class SortingBehavior extends ConnectorBehavior{
        @Overrride
    public void beforeSort(ArrayList<SortingRule> sorters){
        sorters.add(new SortingRule("some_field","ASC"));
    }
}
conn.attach.event(new SortingBehavior());

Default sorting by multiple fields

class SortingBehavior extends ConnectorBehavior{
        @Overrride
    public void beforeSort(ArrayList<SortingRule> sorters){
        sorters.add(new SortingRule("some_field","ASC"));
        sorters.add(new SortingRule("some_other","ASC"));
    }
}
conn.attach.event(new SortingBehavior());

Custom sorting rule

class SortingBehavior extends ConnectorBehavior{
        @Overrride
    public void beforeSort(ArrayList<SortingRule> sorters){
        sorters.get(0).name = "LENGTH(some_field)";
    }
}
conn.attach.event(new SortingBehavior());
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Select/Combobox Columns in Grid DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Select/Combobox Columns in Grid

When on the client side you specify co/coro/combo columns (combo-box/select) in the grid, the grid will automatically request data for them in the same manner as for filtering options.

By default, the grid will use DISTINCT select against the related field, and fetch all possible options.

If you need to define a custom list of options, you can use one of 2 ways:

  • a hardcoded list
HashMap<String,String> c2 = new HashMap<String,String>();
c2.put("91", "one");
c2.put("75", "two");
grid.set_options("item_nm",c2);
  • a list created on the base of a different table
BaseConnector options = new OptionsConnector(conn);
options.render_table("countries","item_id","item_id(value),item_nm(label)");

grid.set_options("item_nm",options);

co/combo type

  • when using the predefined list of data, both values and labels need to be provided
  • when using the connector, there must be two fields selected, one as (value), second as (label)

coro type:

  • only labels need to be provided
  • the connector may define only the label parameter
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Client-Side Requirement - dataProcessor DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
    • Files to include on the client side
    • Initializing and linking to connector
    • Validation
    • Changing default processing
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Client-Side Requirement - dataProcessor

The connector itself lets just pass data from the server side to the client side.

When you need to pass data back (e.g. you've updated a record and want to save updates in the database) you should use dataProcessor additionally.

Shortly, data exchange with dataProcessor can be characterized as follows:

1) After you've made some changes the client sends a query to the server. The query is passed with one of the following statuses:

  • updated
  • inserted
  • deleted

2) The server tries to implement the required query. If the operation has been performed successfully, the server returns the same status it had got. Otherwise, the "error" status is returned.

3) While exchanging, data undergoes default processing both on the server side and on the client side, i.e. data will be updated/inserted/deleted automatically (just initialize dataProcessor and dhtmlxConnector), no additional code needs to be added. You can affect this default processing by means of events (see details below).

Files to include on the client side

If you use the 'dhtmlxSuite' package (dhtmlx.js, dhtmlx.css code files) - you don't need to add any additional files.

But if you use the components standalone you should add one more additional file - dataprocessor.js.

Beware, dataprocessor.js should be included BEFORE connector.js.

Initializing and linking to connector

To initialize dataProcessor you should write 2 commands:

var dp = new dataProcessor(url)
dp.init(mygrid)

To link dataProcessor with connector you should specify the connector file as a parameter of the constructor:

dp = new dataProcessor("myconnector.php");
dp.init(mygrid);

Validation

Client-side validation

Dataprocessor allows validating data before sending it to the server side (see details here).

Server-side validation

You may see the details of the server-side validation in the related chapter of this documentation.

Changing default processing

As it was mentioned before, to affect the default data processing either on the server side or on the client side, you should use events (they can be either dataProcessor or dhtmlxConnector events).

Changing default data processing on the server side

To affect the server-side processing, you should use one of the following events of dhtmlxConnector:

  • beforeUpdate Event
  • beforeInsert Event
  • beforeDelete Event
  • beforeProcessing Event

Changing default data processing on client-side

Changing on the client side can be done in one of the following ways:

1) On the server side through handler functions of the dhtmlxConnector events:

  • afterUpdate Event
  • afterInsert Event
  • afterDelete Event
  • afterProcessing Event

2) On the client side through handler functions of the dataProcessor events:

  • onBeforeUpdate
  • onAfterUpdate

3) On the client side through the dataProcessor's method defineAction().

The method allows defining a handler function of the specified status.

dp.defineAction("update",function(sid,response){
...
return true;// return false to cancel default data processing at all
})

  • meanwhile, you can change the status of server-side response through the dhtmlxConnector's method set_status() and assign the appropriate processing through defineAction().

    Status can be changed in 2 ways:

    1. by setting another predefined status ('updated', 'inserted', 'deleted'). In this case you just change default processing, write some additions to it.
    2. by setting a custom status on the server side. In this case you cancel default processing at all and should define all actions on the client side by yourself.
    data.set_status("my_status");

    For more details see the chapter 'Custom status'

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Making Queries DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
    • Simple queries
    • Complex queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Making Queries

Simple queries

Applicable: Grid, TreeGrid, Tree, Combo, Scheduler

By default, the connector generates all INSERT/UPDATE/DELETE queries automatically, based on configuration.

For more details of this topic, see the Basic Loading chapter.

In case of dnd, connector will process an action as a sequence of 'insert' and 'delete' operations.

Complex queries

When you need to define your own logic you should use one of two ways:

  • defining custom SQL code for operation
  • using server-side events to customize operations

Custom queries for an action

Applicable to: Grid, TreeGrid, Tree, Combo, Scheduler

You can define your own SQL code for a specific action (INSERT, UPDATE or DELETE) as follows:

gridConn.sql.attach(OperationType.UPDATE,"Update tableA set name='{name}', price={price} where id={id}");
//...
gridConn.render_sql(" .. ","id","price,name");

Parameters:

  • an action's name. Possible values are: 'Update', 'Insert', 'Delete'
  • SQL statement. It can use fields(or their aliases) which were mentioned in the render_sql or render_table method while loading data.

Using server-side events

Applicable to: Grid, TreeGrid, Tree, Combo, Scheduler

To customize operations you can use the following server-side events:

  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • beforeProcessing
//data preprocessing before update
class updateBehavior extends ConnectorBehavior{
        @Override
    public void beforeUpdate(DataAction action) {
      String price = data.get_value("price");
      data.set_value("price","$"+price); //modifies data before saving in DB
    }
}
conn.event.attach(new updateBehavior());

//including additional field to request
class updateBehavior extends ConnectorBehavior{
        @Override
    public void beforeInsert(DataAction action) {
          //include additional data in DB operation
          data.add_field("userId",1); //will be saved as part of new record
    }
}
conn.event.attach(new updateBehavior());

//fully custom code
class updateBehavior extends ConnectorBehavior{
        private GridConnector conn;
        public updateBehavior(GridConnector conn){
            this.conn = conn;
        }

        @Override
    public void beforeUpdate(DataAction action) {
        String price = data.get_value("price");
        String id = data.get_value("id");
        DBDataWrapper db = (DBDataWrapper)conn.sql;
        db.query("UPDATE some_table SET price='"+price+"' where id="+id);
        data.success(); //if you have made custom update - mark operation as finished
    }
}
conn.event.attach(new updateBehavior(conn));
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Transactions DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Transactions

APPLICABLE TO: Grid

Grid allows using transactions for data INSERT/UPDATE/DELETE operations (make sure that the used DB engine has support for transactions).

They can be enabled in 2 modes:

1) global

conn.sql.set_transaction_mode(TransactionType.GLOBAL);
  • The component uses single transaction for all records inside of single request.
  • If any operation fails, all record operations will be rolled back, all updated rows will be returned with error status
  • If custom validation was assigned and has blocked any record, all records inside of the request will be blocked

2) record

conn.sql.set_transaction_mode(TransactionType.OPERATION);
  • Component uses separate transactions for each record in request
  • If any operation fails, it will not affect other operations
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Security DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
    • Basic security
    • Protection from cross-site scripting (XSS)
    • Preventing CSRF and XSRF attacks
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Security

dhtmlxConnector is open to external access of another programs and any external user is allowed to change data in database.

Thus, adding some kind of session-based authentication is strongly recommended.

Basic security

The built-in security manager allows limiting connector to certain operations.

grid.access.deny(OperationType.Read); //blocks Select action
grid.access.deny(OperationType.Insert); //blocks Insert action
grid.access.deny(OperationType.Update); //blocks Update action
grid.access.deny(OperationType.Delete); //blocks Delete action

By default, connector allows all operations.

Protection from cross-site scripting (XSS)

Starting from version 1.5, dhtmlxConnector allows you to protect an app from XSS attacks.

To avoid XSS attacks, the library checks all data inputted by users and according to the set security level doesn't allow html or javascript code to be inserted.

3 security levels are available:

  • DHX_SECURITY_SAFETEXT (default) - all html data is removed from the input field;
  • DHX_SECURITY_SAFEHTML - allows html data, but removes possible script tags and handlers;
  • DHX_SECURITY_TRUSTED - input fields are not filtered at all (similar to the previous version of connectors).

To set the necessary security level, use the next code:

ConnectorSecurity.xss = ConnectorXSSMode.DHX_SECURITY_TRUSTED
//ConnectorSecurity.xss = ConnectorXSSMode.DHX_SECURITY_SAFEHTML
//ConnectorSecurity.xss = ConnectorXSSMode.DHX_SECURITY_SAFETEXT

If you want to enable the same behavior as the previous versions of connectors had, set the DHX_SECURITY_TRUSTED mode.

Preventing CSRF and XSRF attacks

The functionality requires 3.5 or later version of the DHTMLX Suite package

The protection is available starting from version 1.5 and can be activated by the following code line:

ConnectorSecurity.security_key = true;

After calling such a command, connectors start to include additional security keys to all data loading operations and process data updating calls only if they contain the same keys. As a result of this processing, it's impossible to trigger a data updating operation from some third-party site, even if an attacker has access to the valid user session.

Please be sure that you understand what CSRF attack is, cause the stated technique won't prevent access to the connector from external urls, it will only prevent execution actions through someone else's session.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Validation DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
    • Common
    • Value checking
    • Processing in case of validation error
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Validation

Before saving data on the server you can validate it and assign a handler function for any gotten response.

Shortly, validation contains 2 key points:

  1. value checking
  2. processing in case of validation error

Common

To implement the server-side validation of incoming data you can use the following events:

  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • beforeProcessing

The beforeProcessing event occurs for all types of operations while other events occur only for related operations, i.e. you can set different validation rules for different operations or for all of them at once.

The event will receive DataAction object as the parameter. This object can be used to retrieve related data and allow/deny an operation (please note, it contains only the data which was received from the client side, not all the data related to the record).

Value checking

To check the value of a field you should use the method get_value()

class validateBehavior extends ConnectorBehavior{
    @Override
    public void beforeProcessing(DataAction action) {
        if (data.get_value("some").equals(""))
        ...
    }
}

conn.event.attach(new validateBehavior());

Processing in case of validation error

In case of error you can choose one of two ways:

1) Use the predefined methods for error processing on the client side, i.e. set:

  • data.invalid() (invalid record will be highlighted in bold font)
  • data.error() (invalid record will be highlighted in red bold font)

The difference between methods in question consists just in the way of highlighting.

class validateBehavior extends ConnectorBehavior{
    @Override
    public void beforeProcessing(DataAction action) {
        if (data.get_value("some").equals(""))
            data.invalid();
    }
}

conn.event.attach(new validateBehavior());

2) Assign your own processing on the client side through the dataProcessor's method defineAction() (see details here)

dp.defineAction("invalid",function(sid,response){
var message = response.getAttribute("message");
alert(message);
return true;// return false to cancel default data processing at all
})

Custom status

You can change the returned status and set you own by means of the method set_status(). In this case any default processing (doesn't matter if the defineAction() method will return true or false) will be cancelled and you will specify data processing fully on the client side.

Server side:

class validateBehavior extends ConnectorBehavior{
    @Override
    public void beforeProcessing(DataAction action) {
        if (data.get_value("some").equals(""))
            data.set_status("my_status");
    }
}

conn.event.attach(new validateBehavior());

Client side:

dp.defineAction("my_status",function(sid,response){
...
})
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Error Handling and Logging DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
    • Server-side logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Error Handling and Logging

While developing we strongly recommend using logs for errors detection.

Server-side logging

DHTMLX permits to control logging in two ways:

  • Basic
  • Detailed

Basic

If any error occurs during data processing, the client-side data processor object will receive the "error" action containing short info about the problem (full info will be written to the log).

gridConn.enable_log("path");
  • path - an absolute or relative path to the text file where a log will be written.

Detailed

When a critical error occurs, all log records for current session (full error info) will be sent to the client and shown in a browser (useful for debugging, not recommended for production):

gridConn.enable_log("path",true);
  • path - an absolute or relative path to the text file where a log will be written.
  • The second parameter enables detailed mode.

Adding custom records to the log

During the development process you may need to write some custom data to the log (can be useful for custom server-side events).

To add a custom text or data to the log file:

  • Activate logging (basic or detailed).
  • Call the log() function with your data inside.
gridConn.enable_log("temp.log",true);
LogManager.getInstance().log("any text here");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Handling Events

DHTMLX Connector uses events to manage Insert/Update/Delete operations.

The code snippet below shows how to attach the beforeUpdate event:

class CustomBehavior extends ConnectorBehavior{
        @Override
    public void beforeUpdate(DataAction data) {
        //any custom code
    }
}
component.event.attach(new CustomBehavior());

Handler functions get one input parameter and this parameter depends on the attached event.

In the following table you'll see a full list of events and the appropriate input parameters of handler functions.

Event | Input parameter of handler function
beforeSort | SortInterface Object
beforeFilter | FilterInterface Object
beforeRender | DataItem Object
  • beforeProcessing
  • afterProcessing
  • beforeInsert
  • beforeUpdate
  • beforeDelete
  • afterInsert
  • afterUpdate
  • afterDelete

 DataAction Object
beforeOutput | none

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Data Protocol DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
    • Data fetching
    • Data updating (using dataProcessor)
  • New Functions
  • HowTos
Start Client-Server Communication Java Connector

Data Protocol

Data fetching

POST

Command parameters:

  • none

GET

Command parameters:

  • connector=true - flag of connector based request. The flag is set automatically, once you include the connector.js file on the page (note that if you use dhtmlxSuite package, connector.js is already included into the package and there's no need to include it additionally)

  • dhx_colls=field1,field2...fieldN - optional, can contain a list of fields for which collections will be requested. dhtmlxGrid uses such parameters to request data for combo columns and select filter (such requests are executed just once , for initial data loading)

data?connector=true&dhx_colls=2,3
  • dhx_sort[field]=directon - instruct server-side connector to sort dataset by the defined field
data?connector=true&dhx_sort[2]=asc
  • dhx_filter[field]=mask - instruct server-side connector to filter dataset by the defined field
//filter by %test%
data?connector=true&dhx_filter[2]=test

Grid specific

Requesting part of data (Dynamic Smart Rendering or Dynamic Paging)

GET

  • posStart - the position from which data is requested
  • count - the count of requested rows

Combo specific

Requesting part of data

GET

  • pos - the position from which data is requested

Filter by label field

GET

  • mask - the filtering mask for the label field

Tree/TreeGrid specific

Requesting branch of tree

GET

  • id - the parent id for the requested branch

Data updating (using dataProcessor)

GET

  • editing=true - the mark of dataprocessor-based call POST

  • ids - a list of updated records

  • [id]_[property] - for each field inside of the updated record the related field in POST is generated
  • [id]_!nativeeditor_status - the action type
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


New Functions DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
    • New in version 1.5
  • HowTos
Start Client-Server Communication Java Connector

New Functions

New in version 1.5

Security:

  • Protection from XSS attacks;
  • Preventing CSRF and XSRF attacks.

Flexibility:

  • New methods for rendering data (support for stored procedures calls, loading from data arrays);
  • The possibility to set userdata with all types of connectors;
  • Better Touch Support (new data formats, adding extra tags/sections to data).
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


HowTos DHTMLX Docs

Documentation
  • Java Connector API
  • General Idea of dhtmlxConnector
  • Initializing Java Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
  • Select/Combobox Columns in Grid
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validation
  • Error Handling and Logging
  • Handling Events
  • Data Protocol
  • New Functions
  • HowTos
    • General HowTos
    • Data Loading HowTos
    • Data Updating HowTos
    • Combo Specific HowTos
    • Form Specific HowTos
    • Grid Specific HowTos
    • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication Java Connector

HowTos

General:

  • assign aliases to DB fields?
  • attach event?
  • check value of an item?
  • customize content of a cell?
  • deny access to a certain operation?
  • filter data on server-side?
  • handle errors and log them?
  • set value of an item?
  • sort data on server-side?
  • validate data on client-side?
  • validate data on server-side?

Loading data:

  • enable dynamic loading?
  • format/change data before loading?
  • load data from database table?
  • send additional information to client-side?

Updating data:

  • alter the default styles set for responses?
  • avoid updating certain field(s) on server-side?
  • change default data processing while updating?
  • set custom status of operation?
  • terminate any further processing?
  • change values before saving?
  • implement transactions?
  • link dataProcessor with connector?
  • update data on server-side?

Component-specific:

Combo:

  • populate combo with data from db?

Form:

  • populate 'combo' item with data from db?
  • load data from db?
  • save changes made in a form to db?

Grid:

  • define grid configuration on server-side?
  • load data from a table that doesn't contain identity field?
  • set a custom style for a row or a cell?

Tree and TreeGrid:

  • mark an item as a leaf or branch?
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


General HowTos DHTMLX Docs

Documentation
  • General HowTos
    • How can I assign aliases to DB columns?
    • How can I attach event?
    • How can I check the value of an item?
    • How can I deny access to a certain operation?
    • How can I customize the content of a cell?
    • How can I filter data on the server side?
    • How can I handle errors and log them?
    • How can I set a value to an item?
    • How can I sort data on the server side?
    • How can I validate data on the client side?
    • How can I validate data on the server side?
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
  • Form Specific HowTos
  • Grid Specific HowTos
  • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication Java Connector HowTos

General HowTos

How can I assign aliases to DB columns?

By using the render_sql() or render_table() methods you can assign aliases to the required tables or columns. For this purpose, in sql statement you should use word 'as' (as in any usual sql statement), in other parameters - parentheses.

grid.render_table("tableA","id","name,price(product_price)");
//or
grid.render_sql(
    "Select *,tableA.id as aid from tableA, tableB  where  tableA.id=tableB.id",
    "tableA.id(aid)",
    "name,price(product_price),other"
);

How can I attach event?

To attach event you should use component.event.attach(). For more details on this topic, see the 'Handling Events' guide.

class CustomBehavior extends ConnectorBehavior{
        @Override
    public void beforeUpdate(DataAction data) {
        //any custom code
    }
}
component.event.attach(new CustomBehavior());

How can I check the value of an item?

With the help of the get_value() method you can check the value of any item.

grid.get_value(name);

How can I deny access to a certain operation?

By default, the connector allows all operations. To deny some operation use the deny(name_of_operation) method that can get one of the following params:read/update/insert/delete. For more details see the 'Security' guide.

grid.access.deny(OperationType.Read);

How can I customize the content of a cell?

You can use the beforeRender event to define how the content of a cell must be formatted.

class RenderBehavior extends ConnectorBehavior{
    public void beforeRender(DataItem data) {
        String field = data.get_value("some");
        data.set_value("some","<a href='details.php?id="+field+"'>"+Details+"</a>");
    }
}

grid = new GridConnector(res);
grid.event.attach(new RenderBehavior());

In the sample above, the grid will have a custom content.

How can I filter data on the server side?

You have 2 ways to filter data on the server backend:

  • by using in-header filter types during the component configuration (on the client side)
mygrid.setHeader("Column A, Column B");
mygrid.attachHeader("#connector_text_filter,#connector_select_filter");
  • by means of the beforeRender event (on the server side)
class FilterBehavior extends ConnectorBehavior{
    @Overrride
    public void beforeRender(DataItem data){
        if (data.get_value("some") < 0 )
        data.skip();
    }
}
conn.attach.event(new FilterBehavior());

See the guide 'Filtration' for more information.

How can I handle errors and log them?

You can enable logging using the enable_log() method. For more details see the 'Error handling and logging' guide.

gridConn.enable_log("path");//to show short info on the client side
//or
gridConn.enable_log("path",true);// to show full info on the client side

How can I set a value to an item?

By means of using the set_value() method, you can set a value to any item of component.

dataItem.set_value(name,value)

How can I sort data on the server side?

You have 2 ways to sort data on the server backend:

  • by specifying additional parameters in URL (on the client side)
grid.load("some.php?connector=true&dhx_sort[2]=asc");
  • by using the sorting type 'connector' during the component configuration (on the client side)
grid.setColSorting("connector,str,na);

See the guide 'Sorting' for more information.

How can I validate data on the client side?

dataProcessor lets you validate data on the client side. Use the setVerificator(index,method) method to define the appropriate columns and validators. See details in the related chapter of dataProcessor' documentation.

dp.setVerificator(column_index,verification_func)

How can I validate data on the server side?

To perform server-side validation you should use one of the dhtmlxConnector events stated below and specify the needed validation rules in the appropriate events' handlers functions:

  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • beforeProcessing
class validateBehavior extends ConnectorBehavior{
    ...
}

conn.event.attach(new validateBehavior());

For more details on the server-side validation, see the 'Validation' guide.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Data Loading HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
    • How can I enable dynamic loading?
    • How can I format/change data before loading?
    • How can I load data from a database table?
    • How can I send additional information to the client side?
  • Data Updating HowTos
  • Combo Specific HowTos
  • Form Specific HowTos
  • Grid Specific HowTos
  • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication Java Connector HowTos

Data Loading HowTos

How can I enable dynamic loading?

To enable dynamic loading you should:

  • enable the related mode on the client side (e.g. smart rendering or paging for grid)
grid.enableSmartRendering(mode,buffer);
  • call the method dynamic_loading() on the server side
conn.dynamic_loading(rowsNum);

See the guide 'Dynamic loading' for more information.

How can I format/change data before loading?

To set some specific formatting or change data before sending to the client side, you should use the beforeRender event handler. For more details on this topic, see the 'Formatting/Changing Data before Loading' chapter.

class RenderBehavior extends ConnectorBehavior{
    public void beforeRender(DataItem data) {
        if (data->get_index() % 2 == 1 )
            data.set_row_color("red");
    }
}

grid.event.attach(new RenderBehavior());

How can I load data from a database table?

To load data from a database table you should use one of two methods:

  • render_table() (for loading from a single table)
grid.render_table("grid50","item_id","item_nm,item_cd", "extra1, extra2");
  • render_sql() (for loading from several tables)
grid.render_sql(
    "SELECT * from tableA INNER JOIN tableB  ON tableA.id=tableB.id",
    "",
    "name,price",
    "extra1, extra2"
);

How can I send additional information to the client side?

To send to the client side additional information that won't be outputted, but you'll have access to, use the fourth(optional) parameter of the render_table() method. There you should specify columns that contain the desired additional information.

grid.render_table("some_table","id","name,price","color,count");

For more information, see the chapter 'Using extra fields' in the 'Formatting/Changing Data before Loading' guide.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Data Updating HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
    • How can I alter the default styles set for responses?
    • How can I avoid updating certain field(s)?
    • How can I change default data processing while updating?
    • How can I set a custom status of the operation?
    • How can I terminate any further processing?
    • How can I change values before saving?
    • How can I implement transactions?
    • How can I link dataProcessor with connector?
  • Combo Specific HowTos
  • Form Specific HowTos
  • Grid Specific HowTos
  • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication Java Connector HowTos

Data Updating HowTos

How can I alter the default styles set for responses?

You can alter the default styles for each state, like:

dp.styles.error = ""; //avoids a special style for the 'error' response
//you should write it on the client side (in your HTML file)
//dp - dataProcessor object

How can I avoid updating certain field(s)?

To remove some field from updating, you can use the following technique:

//write it before 'grid.render_table'

class CustomBehavior extends ConnectorBehavior{
    @Override
    public void beforeProcessing(DataAction data) {
        data.remove_field("id"); //the named field won't be included in CRUD operations
    }
}
grid.event.attach(new CustomBehavior());

How can I change default data processing while updating?

To affect the default data processing either on the server side or on the client side you should use either the events of dataProcessor or dhtmlxConnector. For more details, see the chapter 'changing default precessing' in the 'Client-side requirement - dataProcessor' chapter.

How can I set a custom status of the operation?

To set the status (custom or another predefined) of operation use the set_status() method.
By means of using the defineAction() method of dataProcessor you can assign the appropriate processing for this status.

//server side
data.set_status("my_status");
//client side
dp.defineAction("my_status",function(sid,response){
...
return true;// return false to cancel default data processing at all
})

How can I terminate any further processing?

By calling the success() method you terminate any further action processing, i.e. data updating will be stopped and considered as finished.

class CustomBehavior extends ConnectorBehavior{
    @Override
    public void beforeUpdate(DataAction data) {
        ...
        data.success(); // marks operation as finished
    }
}
component.event.attach(new CustomBehavior());

How can I change values before saving?

To customize values before saving, you should use the server-side events stated below:

  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • beforeProcessing
class MyUpdate extends ConnectorBehavior{
    @Override
    public void beforeUpdate(DataAction data) {
        ...
    }
}
component.event.attach(new MyUpdate());

For more information, see the 'Using server-side events' chapter in the 'Making queries' guide.

How can I implement transactions?

The connector allows using transactions for INSERT/UPDATE/DELETE operations (be sure that used DB engine has support for transactions ).

To activate the transaction mode - use the set_transaction_mode() method. For more details see the chapter 'Transactions' in 'Making queries' guide.

conn.sql.set_transaction_mode(TransactionType.GLOBAL); //for all records in one request
//or
conn.sql.set_transaction_mode(TransactionType.OPERATION);// for each record in request

How can I link dataProcessor with connector?

To link dataProcessor with connector you should specify the connector file as a parameter of dataProcessor constructor:

dp = new dataProcessor("myconnector.php");
dp.init("mygrid");

How can I update data on the server side?

To update data on the server side, you should initialize dataProcessor on the client side and link dhtmlxConnector to it. The default updating will be done automatically. For more details, see the guide 'Client-side requirement - dataProcessor'.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Combo Specific HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
    • How can I populate combo with data from db?
  • Form Specific HowTos
  • Grid Specific HowTos
  • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication Java Connector HowTos

Combo Specific HowTos

How can I populate combo with data from db?

To define options of combo you should use ComboConnector on the server side and specify the connector file in the load() method on the client side:

client side:

var combo=new dhtmlXCombo("combo_zone2","alfa2",200);
combo.load("http://localhost:8080/connector");

server side:

public class DataBaseConnection {
 Connection getConnection(){
  Connection conn=null;
  try {
   Class.forName ("com.mysql.jdbc.Driver").newInstance ();
   conn = DriverManager.getConnection(
        "jdbc:mysql://localhost/sampledb?characterEncodingTF-8",
        "root",
        ""
    );
  } catch (Throwable e) {
   e.printStackTrace();
  }
  return conn;
 }
}

and

import com.dhtmlx.connector.ConnectorServlet;
import com.dhtmlx.connector.DBType;
import com.dhtmlx.connector.ComboConnector;

import java.sql.Connection;

public class AppServer extends ConnectorServlet {

 /**
  *
   */
 private static final long serialVersionUID = 1L;

 /* (non-Javadoc)

 * @see com.dhtmlx.connector.ConnectorServlet#configure()
 */

@Override
protected void configure() {
    Connection conn = ( new DataBaseConnection()).getConnection();
    СomboConnector data = new ComboConnector(conn);
    data.render_table("categories","id","valueColumn, labelColumn");
 }
}
  • Names of the fields can have aliases (value or label) to identify the appropriate attribute.
data.render_sql(
    "SELECT *, CONCAT(FirstName, LastName) as label FROM table1",
    "id",
    "id,FirstName(label)"
);

Note, in the filtering mode Combo filters data by the "label" field.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Form Specific HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
  • Form Specific HowTos
    • How can I populate the 'combo' item with data from db?
    • How can I load data from db?
    • How can I save changes made in a form to db?
  • Grid Specific HowTos
  • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication Java Connector HowTos

Form Specific HowTos

How can I populate the 'combo' item with data from db?

To define options of the 'combo' item you should use ComboConnector on the server side and specify the connector parameter for the appropriate item on the client side:

client side:

var formData = [{
    type: "combo",
    name: "myCombo",
    label: "Select type",
    connector:"http://localhost:8080/combo_connector"
}];

server side:

Connection conn = ( new DataBaseConnection()).getConnection();
СomboConnector data = new ComboConnector(conn);
data.render_table("categories","id","valueColumn, labelColumn");
  • Names of the fields can have aliases (value or label) to identify the appropriate attribute.
data.render_sql(
    "SELECT *, CONCAT(FirstName, LastName) as label FROM table1",
    "id",
    "id,FirstName(label)"
);

Note, in the filtering mode a combo filters data by the "label" field.

How can I load data from db?

To load data to a form you should use FormConnector on the server side and the method load (id) on the client side:

client side

myForm.load('formdata.php?id=1');

where a connector file with the id of loading record must be specified as the parameter.

The values of record's columns will be used as values of form's controls.

server side

public class DataBaseConnection {
    Connection getConnection(){
        Connection conn=null;
    try {
        Class.forName ("com.mysql.jdbc.Driver").newInstance ();
        conn = DriverManager.getConnection(
            "jdbc:mysql://localhost/sampledb?characterEncodingTF-8",
            "root",
            ""
        );
    } catch (Throwable e) {
        e.printStackTrace();
      }
    return conn;
  }
}

and

import com.dhtmlx.connector.ConnectorServlet;
import com.dhtmlx.connector.DBType;
import com.dhtmlx.connector.FormConnector;

import java.sql.Connection;

public class AppServer extends ConnectorServlet {

 /**
  *
  */
 private static final long serialVersionUID = 1L;

 /* (non-Javadoc)

 * @see com.dhtmlx.connector.ConnectorServlet#configure()
 */
 @Override
 protected void configure() {
  Connection conn = ( new DataBaseConnection()).getConnection();
  FormConnector data = new FormConnector(conn);
  data.render_table("customers","id","name, address, email");
 }
}

How can I save changes made in a form to db?

To save form changes to DB, you should use the method save() on the client side.

You can call this method, for example, on clicking some button.

myForm.attachEvent("onButtonClick", function(id){
    if (id=='saveButton'){
        myForm.save();
    }
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Grid Specific HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
  • Form Specific HowTos
  • Grid Specific HowTos
    • How can I define grid structure on the server side?
    • How can I load data from a table that doesn't contain the identity field?
    • How can I set a custom style for a row or a cell?
  • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication Java Connector HowTos

Grid Specific HowTos

How can I define grid structure on the server side?

To define grid structure on the server side you can choose one of two ways:

  • define the configuration in the constructor;
  • create an empty object and then specify its configuration through the related methods.

The first case:

GridColumn column1 = new GridColumn(
    String header,
    String type,
    String id,
    int width,
    String align,
    String valign,
    String sort,
    String color,
    Boolean hidden
);
GridColumn column2 = ...

GridConfiguration myConfig= new GridConfiguration();
myConfig.addColumn(column1);
myConfig.addColumn(column2);

The second case:

GridColumn column1 = new GridColumn();
GridColumn column2 = ...

column1.setHeader("Column1");
column1.setType("ed");
...
GridConfiguration myConfig= new GridConfiguration();
myConfig.addColumn(column1);
myConfig.addColumn(column2);

How can I load data from a table that doesn't contain the identity field?

By using KeyGridConnector instead of GridConnector, you can load data from a table without identity field. In this case, any data field will serve as the identity one.

Connection conn = ( new DataBaseConnection()).getConnection();
KeyGridConnector data = new KeyGridConnector(conn);
data.render_table("mytable","name","name,address,phone");

For more details, see the 'KeyGridConnector' guide.

How can I set a custom style for a row or a cell?

dhtmlxConnector contains a bit of methods that allow setting the appearance of a grid.

These methods can be divided into 2 groups:

for a cell customization:

  • set_cell_attribute
  • set_cell_class
  • set_cell_style

for a row customization:

  • set_row_attribute
  • set_row_color
  • set_row_style
class RenderBehavior extends ConnectorBehavior{
    public void beforeRender(DataItem data) {
        if (data->get_index() % 2 == 1 )
        data.set_row_color("red");
    }
}
Connection res = ( new DataBaseConnection()).getConnection();
GridConnector grid = new GridConnector(res);
grid.event.attach(new RenderBehavior());
grid.render_table("grid50000","item_id","item_nm,item_cd");

Tips:

  • to overwrite the background you should use the 'background' attribute, not the 'background-color' one.
  • skin's css can overwrite a number of css attributes. To avoid it, use the !important flag.
data.set_row_attribute("class","backrgroundclass");

.backrgroundclass{
   background:red !important;
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Tree(TreeGrid) Specific HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
  • Form Specific HowTos
  • Grid Specific HowTos
  • Tree(TreeGrid) Specific HowTos
    • How can I mark an item as a leaf or a branch of the tree?
Start Client-Server Communication Java Connector HowTos

Tree(TreeGrid) Specific HowTos

How can I mark an item as a leaf or a branch of the tree?

In the beforeRender event handler you are allowed to mark an item as a leaf or a branch. For this purpose, you should use the set_kids() method. As the input parameter true or false must be specified. true marks an item as a branch, false - as a leaf.

data.set_kids(false);

For more details see the 'Tree/TreeGrid specific' chapter in the 'Dynamic loading' guide.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


.Net Connector DHTMLX Docs

Documentation
  • DataProcessor
  • PHP Connector
  • Java Connector
  • .Net Connector
    • .Net Connector API
    • General Idea of dhtmlxConnector
    • Initializing .Net Connector
    • Dynamic Loading
    • Security
    • Basic Loading
    • Formatting/Changing Data Before Loading
    • Filtering
    • Sorting
    • Client-side requirement - dataProcessor
    • Making Queries
    • Transactions
    • Validating Data
    • Error handling and logging
    • Other Database Types
    • New Functions
    • HowTos
  • ColdFusion Connector
Start Client-Server Communication

.Net Connector

DHTMLX connector is a helper server-side library that enables access to external datasources and backend systems.

It supports all DHTMLX components which operate with data.

The library itself provides a wide server-side functionality, such as data loading (static or dynamic), saving, filtering, validation etc. Integration with DHTMLX Dataprocessor allows managing the insert/delete/update operations as well.

Server-side requirements

  • Supported platforms:

    • Microsoft .NET Framework 3.5

  • Supported databases:

    • Microsoft SQL Server;

Difference from PHP connectors

The next features of PHP connector are not supported by .NET connector:

  • For all components
    • multi-user, server-side sync

Supported functionality

  • Data loading for Grid, TreeGrid, Tree, Combo, Gantt, Scheduler, DataView, Chart, Form
  • Data saving for Grid, TreeGrid, Tree, Gantt, Scheduler, DataView, Form
  • Server-side sorting and filtering for Grid, Treegrid
  • Dynamic loading (paging) for Grid, Treegrid, Tree, Gantt, Scheduler, DataView, Combo
API reference
  • .Net Connector API
Guides

.Net Connector Basics

  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
 Discusses the definition of dhtmlxConnector and the way of initializing .Net connector.

Loading Data

  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data Before Loading
  • Sorting
 Describes the ways of loading data using .Net Connector as well as the operations connected with it: filtering, formatting and sorting data.

Managing Create/Update/Delete Operations

  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Security
  • Validating Data
 Tells about executing main operations with data using .Net Connector.

Auxiliary Resources

  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
 Covers common information you may need while working with .Net Connector, incliding answers to the questions about connector's work.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


.Net Connector API DHTMLX Docs

Documentation
  • .Net Connector API
    • Event handling
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

.Net Connector API

  • Event handling
  • Full API reference (CHM format)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Event handling DHTMLX Docs

Documentation
  • Event handling
    • Events list
    • Begin
    • BeforeSelect
    • ItemPrerender
    • BeforeOutput
    • beforeProcessing
    • beforeUpdate
    • BeforeInsert
    • BeforeDelete
    • DBError
    • Selected
    • Updated
    • Inserted
    • Deleted
    • BeforeDataActionProcessing
    • DataActionProcessed
    • End
    • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API

Event handling

DHTMLX Connector uses events to manage Insert/Update/Delete operations.

The code snippet below shows how to attach 'beforeUpdate' event:

connector.BeforeUpdate += new EventHandler<DataActionProcessingEventArgs>(
connector_BeforeUpdate
);

void connector_BeforeUpdate(object sender, DataActionProcessingEventArgs e)
{
   //custom code
}

Events list
  • Begin
  • BeforeSelect
  • ItemPrerender

  • BeforeOutput

  • BeforeUpdate

  • BeforeInsert

  • BeforeDelete

  • DatabaseError

  • Selected

  • Updated
  • Inserted

  • Deleted

  • BeforeDataActionProcessing

  • DataActionProcessed
  • End

Order of events execution

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Begin DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

Begin

This event occurs before processing of any client request starts.

connector.Begin += new EventHandler(connector_Begin);

This event is mostly useful to enable logging functionality (can be disabled later through the end event).

Sample of usage:

void connector_Begin(object sender, EventArgs e)
{
   //enable logging and add listener to it
   Log.Enabled = true;
   Log.Listeners.Add(new TextWriterTraceListener(new StringWriter(this._LogContent)));
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


BeforeSelect DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

BeforeSelect

The BeforeSelect event fires exactly before data will be selected. This is the last chance to modify selected parameters before the result will be available. You can also use it to add some additional rules or OrderBy statements. For example, both Grid and TreeGrid use this event to include extra fields into requested fields collection.

public dhtmlxGridConnectorBase()
{
   this.BeforeSelect += new EventHandler(dhtmlxGridConnectorBase_BeforeSelect);
}

void dhtmlxGridConnectorBase_BeforeSelect(object sender, EventArgs e)
{
   this.Request.RequestedFields = this.Request.RequestedFields.Union(this.ExtraFields).ToFieldsCollection();
}

The code above keeps Request.RequestedFields collection untouched till the last moment and then adds some more fields into it.

In the same way you can get or set index of row to start selection from (Request.StartIndex), rows count to be retrieved (Request.Count), selection or sorting rules (Request.Rules and Request.OrderBy), or even table name selection will go through (Request.TableName).

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ItemPrerender DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

ItemPrerender

The ItemPrerender event occurs after data has been selected from the database but before its outputting to client.

connector.ItemPrerender += new EventHandler<ItemPrerenderEventArgs<dhtmlxTreeDataItem>>(connector_ItemPrerender);

void connector_ItemPrerender(object sender, ItemPrerenderEventArgs<dhtmlxTreeDataItem> e)
{
   if (e.DataItem.DataFields["is_hidden"] == "1")
   e.DataItem.LeafImage = "lock.gif";
}

In this event the connector_ItemPrerender method receives reference to the data item object currently being rendered. This object has different methods for different client-side components.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


BeforeOutput DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

BeforeOutput

The BeforeOutput event occurs after data has been selected from the database and ready to be sent to client-side.

connector.BeforeOutput += new EventHandler<RenderEventArgs>(connector_BeforeOutput);

Event passes reference to XmlWriter object that is currently used for rendering response.

Most common use-case of this event - the header structure for the grid.

void connector_BeforeOutput(object sender, RenderEventArgs e)
{
  e.Writer.WriteStartElement("head");
  {
    //col 1
    e.Writer.WriteStartElement("column");
       {
          e.Writer.WriteAttributeString("width", "50");
          e.Writer.WriteAttributeString("type", "ed");
          e.Writer.WriteAttributeString("align", "right");
          e.Writer.WriteAttributeString("color", "white");
          e.Writer.WriteAttributeString("sort", "na");
          e.Writer.WriteString("Sales");
       }
    e.Writer.WriteEndElement();
  }
    //...............
}

In case of dyn. loading mode, one more check needs to be performed for preventing data output for additional data calls.

void connector_BeforeOutput(object sender, RenderEventArgs e)
{
    if (this.Connector.Request.StartIndex == 0)
    {
        e.Writer.WriteStartElement("head");
        //..........
    }
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeProcessing DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

beforeProcessing

This event occurs before beforeInsert, beforeUpdate, beforeDelete events occur. The beforeProcessing method occurs for all these operations. It can be cancelled in the same way as the aforementioned events. For more details see "beforeUpdate" event description .

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeUpdate DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

beforeUpdate

This event occurs before updating values in database and can cancel default update statement (see error, invalid and success methods below). It can also be used to validate incoming values (see the SetInvalid() method below).

connector.BeforeUpdate += new EventHandler<DataActionProcessingEventArgs>(connector_BeforeProcessing);

In the code string above connector_BeforeProcessing() function gets event argument with DataAction object that represents current action.

Validation usage:

//validate user's attempt to rename file or folder
void connector_BeforeUpdate(object sender, DataActionProcessingEventArgs e)
{
   if (e.DataAction.Data[(this.Connector as dhtmlxTreeConnector).NodeTextField] == "")//if tree node text value is empty
   e.DataAction.SetInvalid("File name cannot be empty!");
}

Setting error:

//deny update operation
void connector_BeforeUpdate(object sender, DataActionProcessingEventArgs e)
{
   e.DataAction.SetFailed("Operation denied!");//just deny operation without any reason
}

Modifying update action:

//add one more field into update action
void connector_BeforeUpdate(object sender, DataActionProcessingEventArgs e)
{
   e.DataAction.Data.Add("modify_date", Tools.ConvertToString(DateTime.Now));
}

Cancelling default update action and replacing it with own logic:

void connector_BeforeUpdate(object sender, DataActionProcessingEventArgs e)
{
   e.DataAction.SetCompleted();
   //execute own update logic
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


BeforeInsert DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

BeforeInsert

This event occurs before inserting values in database and can cancel default insert statement. It can also be used to validate incoming values. For more details see BeforeUpdate event description.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


BeforeDelete DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

BeforeDelete

The BeforeDelete event occurs before deleting record in database and can cancel default delete statement. For more details see BeforeUpdate event description .

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DBError DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

DBError

The DBError event fires when a database operation results in an error. In this event error_details method receives a reference to the data item object currently being rendered.

public void error_details(object sender, DataActionProcessingEventArgs args)
{
   args.DataAction.Details = "DB operation failed";
}

connector.OnDBError += new EventHandler<DataActionProcessingEventArgs>(error_details);

DataAction.Details contains DBMS error message.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Selected DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

Selected

The Selected event occurs exactly after data has been selected from the database and before any processing of it has been started. This event can be used for initial processing of raw data before it will be converted into data items collection.

connector.Selected += new EventHandler<DataSelectedEventArgs>(connector_Selected);

void connector_Selected(object sender, DataSelectedEventArgs e)
{
    foreach (System.Data.DataRow row in e.Data)
    this.DoSomeAction(row);
}

DataSelectedEventArgs object that is passed to the event handler contains 2 important properties:

  • Data - DataTable of the selected results
  • TotalRowsCount - number of all rows available for selection. In case of dynamic loading, this number will be higher that actual number of rows in Data table.

Another way of data processing before it will be returned to the client is handling ItemPrerender event and performing different tasks on each data item before it goes to the client.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Updated DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

Updated

The same as DataActionProcessed, but occurs only for update operations.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Inserted DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

Inserted

The same as DataActionProcessed, but occurs only for insert operations.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Deleted DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

Deleted

The same as DataActionProcessed, but occurs only for delete operations.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


BeforeDataActionProcessing DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

BeforeDataActionProcessing

This event occurs before BeforeInsert, BeforeUpdate, BeforeDelete events occur. The BeforeDataActionProcessing method occurs for all these operations. It can be cancelled in the same way as the aforementioned events. For more details see BeforeUpdate event description.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataActionProcessed DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

DataActionProcessed

This event occurs after Inserted, Updated, Deleted actions. It can be used to modify DataAction object properties such as Details or ActionType.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


End DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

End

This event occurs after all connector's activity ends.

connector.Begin += new EventHandler(connector_Begin);

This event is mostly useful for stopping logging functionality previously enabled through Begin event.

Sample of usage:

void connector_End(object sender, EventArgs e)
{
  //stop logging
  Log.Enabled = false;
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Order of execution DHTMLX Docs

Documentation
  • Begin
  • BeforeSelect
  • ItemPrerender
  • BeforeOutput
  • beforeProcessing
  • beforeUpdate
  • BeforeInsert
  • BeforeDelete
  • DBError
  • Selected
  • Updated
  • Inserted
  • Deleted
  • BeforeDataActionProcessing
  • DataActionProcessed
  • End
  • Order of execution
Start Client-Server Communication .Net Connector .Net Connector API Event handling

Order of execution

Data selecting

  • Begin
    • incoming request is parsed
  • BeforeSelect
    • sql select statement is executed
  • Selected
  • BeforeOutput
  • for each selected record
    • ItemPrerender
    • generates xml for record
  • outputs data to client
  • End

Data updating

  • Begin
  • incoming request is parsed
  • global transaction starts ( if enabled )
  • BeforeDataActionProcessing
  • for each record
    • record level transaction if it has started ( if enabled )
    • BeforeInsert/BeforeDelete/BeforeUpdate
    • insert/update/delete operation
    • Inserted/Updated/Deleted
    • record level transaction is committed ( if enabled )
  • DataActionProcessed
  • global transaction is committed ( if enabled )
  • End
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


General Idea of dhtmlxConnector DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
    • General list of connectors
    • dhtmlxDataJsonConnector and dhtmlxDataConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

General Idea of dhtmlxConnector

dhtmlxConnector is a server-side library that lets you access data sources. It consists of individual component-specific connectors and a set of additional ones providing advanced functionality.

A dhtmlxConnector's job is to provide necessary data exchange conditions so that you do not have to deal with the technical details of working with various data stores, systems or services. As such, each type of dhtmlxConnector is designed to use a specific API.

As the library is server-side, it provides different manipulations just on the server backend:

  • loading data (static or dynamic) from database.
  • server-side filtering, sorting and validation. When you need to deal with the client side as well, i.e. pass data back to server, you should use DataProcessor additionally (for more details on this topic, see the chapter 'Client-side requirement - dataProcessor').

General list of connectors
  • ChartConnector (relates to dhtmlxChart)
  • ComboConnector (relates to dhtmlxCombo)
  • DataViewConnector (relates to dhtmlxDataView)
  • FormConnector (relates to dhtmlxForm)
  • GridConnector (relates to dhtmlxGrid)
  • SchedulerConnector (relates to dhtmlxScheduler)
  • TreeConnector (relates to dhtmlxTree)

  • TreeGridConnector (relates to dhtmlxTreeGrid)

  • dhtmlxDataJsonConnector/dhtmlxDataConnector (related to touch-oriented libraries: DataTable, dhtmlXDataStore)

Throughout the documentation you'll see examples in which 'GridConnector' is used. If your use a different component, just replace GridConnector with the appropriate connector type.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxDataJsonConnector and dhtmlxDataConnector DHTMLX Docs

Documentation
  • dhtmlxDataJsonConnector and dhtmlxDataConnector
    • Common
    • Adding tags/sections to data
    • Simple Data Transfer
Start Client-Server Communication .Net Connector General Idea of dhtmlxConnector

dhtmlxDataJsonConnector and dhtmlxDataConnector

Common

There are 2 connectors you can use for touch-oriented DHTMLX libraries (such as DataTable, DataStore):

  • dhtmlxDataJsonConnector
  • dhtmlxDataConnector

They work in the same way but differ in type of returned data.

The connectors support a simple data transfer protocol.

var connector = new dhtmlxDataJsonConnector(
    "users",
    "name,age,group_name,city,phone,sex,driver_license",
    "id",
    dhtmlxDatabaseAdapterType.SqlServer2005,
    ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString
);

dhtmlxDataConnector

dhtmlxDataConnector generates 'XML' data feed as in:

<data>
   <item id="1" title="War and Peace"  author="Leo Tolstoy"/>
   <item id="2" title="Hamlet"         author="William Shakespeare"/>
   <item id="3" title="Madame Bovary"  author="Gustave Flaubert"/>
</data>

dhtmlxDataJsonConnector

dhtmlxDataJsonConnector generates 'JSON' data feed as in:

[
   { id:"1", title:"War and Peace",    author:"Leo Tolstoy" },
   { id:"2", title:"Hamlet",           author:"Shakespeare" },
   { id:"3", title:"Madame Bovary",    author:"Gustave Flaubert" }
]

Adding tags/sections to data

Starting from version 1.5, there is a possibility to add the first child tags, sections to data returned by the connector. Tags(sections) are added to the Sections dictionary of the connector:

dhtmlxDataConnector

For example, if you add a tag as follows:

connector.Sections.Add("config", "some_data");
connector.Sections.Add("config2", "<column>value1</column><column>value2</column>");

dhtmlxDataConnector produces the next data:

<data>
    <config>some_data</config>
    <config2><column>value1</column><column>value2</column></config2>
    <item id="1" attr1="qwe" attr2="asd" />
    <item id="2" attr1="qwe" attr2="asd" />
</data>

dhtmlxDataJsonConnector

If you add a section as follows:

connector.Sections.Add("config", "'some_data'");
connector.Sections.Add("config2", "{ column1: 'data1'}");

dhtmlxDataJsonConnector produces the next data:

{
    data: [
      { 'id': '1', 'attr1':'qwe', 'attr2':'asd'},
      { 'id': '2', 'attr1':'qwe', 'attr2':'asd'}
    ],
    config: { 'some_data' },
    config2: { 'column1':'value' }
}

Simple Data Transfer

dhtmlxDataJsonConnector/dhtmlxDataConnector supports simplified protocol for CRUD requests

  • get all data
 GET  data.ashx?action=get

server response - collection of json (xml) objects

  • get info for some specific record
 GET  data.ashx?action=get&id=123

response - json(xml) object

  • delete
 GET  data.ashx?action=delete
 POST id=123

server response - 'true'/'false'

  • insert
 GET  data.ashx?action=insert
 POST id=123&some=value&other=value

response on success

true
<new_id>

or

 false

on failed insert operation

  • update
 GET  data.ashx?action=delete
 POST id=123&some=value&other=value

response - 'true'/'false'

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing .Net Connector DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
    • Client side
    • Server side
    • Client-Side Integration for Tree, TreeGrid, Combo
    • Initialization for Other Components and DB Types
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

Initializing .Net Connector

To use the functionality of DHTMLX Connector, first you should initialize it.

Generally, both the client side and the server side are concerned in it.

Client side

If you need just load data from database (with or without data preprocessing)

  1. Specify connector file in the load method of a component.
//index.html
myGrid = new dhtmlXGridObject("someContainer");// initializes grid
...
myGrid.load("myconnector.ashx");

If you need to perform any update operations

1) Specify the connector file in the load method of a component.

2) Initialize dhtmlxDataProcessor on the client side (read more about it here).

//index.html
myGrid = new dhtmlXGridObject("someContainer");// initializes grid
...
myGrid.load("myconnector.ashx");
myDP = new dataProcessor("myconnector.ashx");// initializes dhtmlxDataProcessor
myDP.init(myGrid);

Client side initialization for Tree, TreeGrid, Combo

Server side

1) Create ASP.NET Generic Handler, inherited from the dhtmlxRequestHandler class.

<%@ WebHandler Language="C#"
    CodeBehind="gridConnector.ashx.cs"
    Class="dhtmlxConnector.gridConnector" %>

public class gridConnector : dhtmlxRequestHandler
{
}

2) Override the CreateConnector method. In this method you should create an individual component-related dhtmlxConnector which will interpret the client's requests. In the example below, we create dhtmlxGridConnector to serve the dhtmlxGrid component's requests.

public override IdhtmlxConnector CreateConnector(HttpContext context)
{
   return new dhtmlxGridConnector(
      "BookStore", //table to select from
      //fields to select
      "sales, title, author, price, instore, shipping, bestseller, pub_date",
      "book_id", //primary key column name
      dhtmlxDatabaseAdapterType.SqlServer2005, //predefined database adapter type
      //connection string
      ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString
   );
}

Connector takes all the necessary parameters, such as a table name or the connection string, into its constructor.

Server-side initialization for other components and DB types

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Client-Side Integration for Tree, TreeGrid, Combo DHTMLX Docs

Documentation
  • Client-Side Integration for Tree, TreeGrid, Combo
  • Initialization for Other Components and DB Types
Start Client-Server Communication .Net Connector Initializing .Net Connector

Client-Side Integration for Tree, TreeGrid, Combo

Other components can be initialized in the way similar to the grid's one.

For TreeGrid in static mode:

myTreeGrid = new dhtmlXGridObject('gridbox');
myTreeGrid.setColTypes("tree,...");
//...
myTreeGrid.load("connector.php");

For TreeGrid in dynamic mode:

myTreeGrid = new dhtmlXGridObject('gridbox');
myTreeGrid.setColTypes("tree,...");
//...
myTreeGrid.kidsXmlFile="connector.php";
myTreeGrid.load("connector.php");

For Tree in static mode:

myTree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
//...
myTree.load("connector.php");

For Tree in dynamic mode:

myTree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
//...
myTree.setXMLAutoLoading("connector.php");
myTree.load("connector.php");

For combo in static mode:

var myCombo = new dhtmlXCombo("combo_zone2","alfa2",200);
myCombo.load("connector.php");

For combo in auto-complete mode:

var myCombo = new dhtmlXCombo("combo_zone2","alfa2",200);
myCombo.enableFilteringMode(true,"connector.php",true);
myCombo.load("connector.php");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initialization for Other Components and DB Types DHTMLX Docs

Documentation
  • Client-Side Integration for Tree, TreeGrid, Combo
  • Initialization for Other Components and DB Types
Start Client-Server Communication .Net Connector Initializing .Net Connector

Initialization for Other Components and DB Types

The init code is similar for all components and DB types.

DB types

Microsoft SQL Server

dhtmlxComboConnector connector = new dhtmlxComboConnector(
   ......,
   dhtmlxDatabaseAdapterType.SqlServer2005,
   ConnectionString
);

or

MSSQLAdapter adapter=new MSSQLAdapter("Data Source=.\\SQLEXPRESS;
AttachDbFilename=|DataDirectory|\\Events.mdf;
Integrated Security=True;
User Instance=True");
dhtmlxComboConnector connector = new dhtmlxComboConnector(
   ......,
   adapter
);

Component types

For other components, constructor code is exactly the same.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Dynamic Loading DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
    • Common
    • Tree/TreeGrid specific
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

Dynamic Loading

Common

Dynamic Loading mode allows loading data partially, not all at once, by a client-side request. It decreases initial loading time and loading of server.

To work correctly, th erelated mode should be enabled on the client side:

  • grid - smart rendering and paging modes
  • treegrid - dynamic branch loading mode
  • tree - dynamic branch loading mode
  • combo - partial autocomplete (you don't need it for normal autocomplete)
  • dataview - dynamiс scrolling or dynamic paging

There are 2 properties that enable dynamic loading:

  • EnableDynamicLoading - for tree/treeGrid

    enables or disables dynamic loading of child items (rows, nodes)

  • SetDynamicLoading(int) - for grid/combo

    sets a number of items loaded per single requests

//EnableDynamicLoading
 dhtmlxTreeConnector connector = new dhtmlxTreeConnector(/*.....*/);
 connector.EnableDynamicLoading = true;_enable dynamic branches loading
//SetDynamicLoading
 dhtmlxGridConnector connector = new dhtmlxGridConnector(/*.....*/);
 connector.SetDynamicLoading(30);//enable partial grid loading (30 records per request)

In the 'dynamic loading' mode you can't use GROUP BY within SQL query

Tree/TreeGrid specific

Check for child nodes/rows existence is also built into the connector. If for some reasons you need to customize this check, you can attach an event handler to the RequestHasChildren event for Tree or TreeGrid connectors. The handler will receive reference to the node/row being checked and you can assign to the HasChildren property the value depending on your own logic.

dhtmlxTreeGridConnector connector = new dhtmlxTreeGridConnector(/*...*/);
connector.RequestHasChildren += new EventHandler
<RequestChildrenEventArgs<dhtmlxTreeGridDataItem>>(connector_RequestHasChildren);

void connector_RequestHasChildren(
    object sender,
    RequestChildrenEventArgs<dhtmlxTreeGridDataItem> e
)
{
   if (TodayIsMonday)
      e.HasChildren = false;//no children on mondays
   else
      e.HasChildren = true;
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Security DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
    • Basic security
    • Protection from cross-site scripting (XSS)
    • Preventing CSRF and XSRF attacks
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

Security

dhtmlxConnector is open to external access of other programs and any external user is allowed to change data in database.

Thus, adding some kind of session-based authentication is strongly recommended.

Basic security

The built-in security manager allows limiting connector to certain operations.

connector.Request.AllowedAccess = AccessRights.Select; //allow Select action only
connector.Request.AllowedAccess = AccessRights.Insert; //allow Insert action only
connector.Request.AllowedAccess = AccessRights.Update; //allow Update action only
connector.Request.AllowedAccess = AccessRights.Delete; //allow Delete action only
connector.Request.AllowedAccess = AccessRights.All; //allow all action
connector.Request.AllowedAccess = AccessRights.None; //deny all actions

The access rights can be combined:

//allow Select and Update actions
connector.Request.AllowedAccess = AccessRights.Select | AccessRights.Update;

By default, the connector allows all operations.

Protection from cross-site scripting (XSS)

Starting from version 1.5, dhtmlxConnector allows you to protect an app from XSS attacks.

To avoid XSS attacks, the library checks all data inputted by users and according to the set security level doesn't allow html or javascript code to be inserted.

3 security levels are available:

  • DHX_SECURITY_SAFETEXT (default) - all html data is removed from the input field;
  • DHX_SECURITY_SAFEHTML - allows html data, but removes possible script tags and handlers;
  • DHX_SECURITY_TRUSTED - input fields are not filtered at all (similar to the previous version of connectors).

To set the necessary security level, use the next code:

ConnectorSecurity.XSS = ConnectorSecurity.SecutiryXSS.DHX_SECURITY_SAFETEXT;
                      //ConnectorSecurity.SecutiryXSS.DHX_SECURITY_SAFEHTML;
                       //ConnectorSecurity.SecutiryXSS.DHX_SECURITY_TRUSTED;

If you want to enable the same behavior as the previous versions of connectors had, set the DHX_SECURITY_TRUSTED mode.

Preventing CSRF and XSRF attacks

The functionality requires 3.5 or later version of the DHTMLX Suite package

The protection is available starting from the version 1.5 and can be activated by the following code line:

ConnectorSecurity.SecurityKey = true;

After calling such a command, connectors start to include additional security keys to all data loading operations and process data updating calls only if they contain the same keys. As a result of this processing, it's impossible to trigger a data updating operation from some third-party site, even if an attacker has access to the valid user session.

The technique is based on sessions, and assumes that any session will be preserved between separate script calls (default behavior).

Please make sure that you understand what CSRF attack is, cause the stated technique won't prevent access to the connector from external urls, it will only prevent execution actions through someone else's session.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Basic Loading DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
    • Loading from a database table
    • Loading from a data array
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

Basic Loading

In this chapter you'll find base information concerning static loading of data from:

  • a database table(s)
  • an array

In order to load data correctly, your 'id' field in the database must be autoincrement.

Loading from a database table

Loading characteristics are defined at the stage of component configuration.

Work with one table

When all necessary data is placed in one database table you should use one of the following approaches:

  • To initialize the connector by SQL query, from which it will take the table name, filtering and ordering rules, columns list, etc.
  • To pass the table name and columns separately.

Initialization by SQL query

dhtmlxGridConnector connector = new dhtmlxGridConnector(
   "SELECT ISO, PrintableName FROM Country",
   "UID",
   dhtmlxDatabaseAdapterType.SqlServer2005,
   ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString
);

For insert/update/delete operations, connectors need the primary key name of the table and the foreign key name for hierarchical controls. Connectors require database adapter to work with database engine or database engine type, and connection string to let connector initialize it automatically. Some connectors also require the names of columns for binding to well-known dhtmlx component properties (e.g. NodeTextColumnName for dhtmlxTreeConnector or StartDateColumnName for dhtmlxSchedulerConnector).

Manual specifying of the table name and columns

dhtmlxGridConnector connector = new dhtmlxGridConnector(
   "BookStore",
   "sales, title, author, price, instore, shipping, bestseller, pub_date",
   "book_id",
   dhtmlxDatabaseAdapterType.SqlServer2005,
   ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString
);

In common case connector constructors of such type accept:

  • the database table name
  • a comma-delimited columns list (some connectors ignore it)
  • the name of the identity field
  • a database adapter type or adapter itself
  • connectionString

Work with several tables

You can use any SQL statements to populate a dhtmlx component through dhtmlxConnector.

dhtmlxGridConnector connector = new dhtmlxGridConnector(
    //SQL with inner join statement
    "SELECT UID,
    PrintableName,
    TimeZone FROM Country INNER JOIN Timezone ON Country.TZID=Timezone.TZID",
    //Primary key name
    "UID",
    //Database adapter type
    dhtmlxDatabaseAdapterType.SqlServer2005,
    //connection string
    ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString
);

But if your SQL statement contains more than one table, connector won't be able to generate insert/update/delete operations correctly and you will need to make one of the following actions:

  1. Define sql for each operation manually
  2. Use server-side events to define your own processing logic
  3. Define different configs for select and update operations

The 3rd approach is shown in the code snippet below:

dhtmlxGridConnector connector = new dhtmlxGridConnector(
   //SQL with inner join statement
   "SELECT UID,
   PrintableName,
   TimeZone,
   TZID FROM Country INNER JOIN Timezone ON Country.TZID = Timezone.TZID",
   //Primary key name
   "UID",
   //Database adapter type
   dhtmlxDatabaseAdapterType.SqlServer2005,
   //connection string
   ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString
);

connector.Request.CustomSQLs.Add(CustomSQLType.Update,
   @"UPDATE Country SET PrintableName = '{PrintableName}' WHERE UID{UID}';
   UPDATE TimeZone SET TimeZone = '{TimeZone}' WHERE TZID {TZID}"

With such init code grid will display and update data from both tables.

Extra data

dhtmlxGridConnector and dhtmlxTreeGridConnector have an optional constructor parameter - ExtraColumnNames. You can use it to define a list of fields which will be extracted from database table, but won't be sent to the client side.

These fields can be used as attributes or flags, mapped to different properties of records (userdata, row styles, images, etc.).

dhtmlxGridConnector connector = new dhtmlxGridConnector(
    //SQL with inner join statement
   "SELECT UID,
   PrintableName,
   TimeZone,
   TZID FROM Country INNER JOIN Timezone ON Country.TZID = Timezone.TZID",
   //Primary key name
   "UID",
   //Database adapter type
   dhtmlxDatabaseAdapterType.SqlServer2005,
   //connection string
   ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString,
   "TZID"//This column will be requested, appeared in all events, but won't be rendered
);

Aliases

To make usage of extracted data handier you can use aliases for DB field names (makes sense only if you use server-side events):

dhtmlxTreeConnector connector = new dhtmlxTreeConnector(
   "Folders",
   "FolderID AS ID",
   "ParentID",
   dhtmlxDatabaseAdapterType.SqlServer2005,
   ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString,
   "FolderName AS Text"
);

Tree and TreeGrid specificity

In case of Tree and TreeGrid , the constructor accepts one more parameter - ParentIDColumnName. For default treegrid hierarchy - it's the name of a field , which will be used to link parent and child records.

dhtmlxTreeConnector connector = new dhtmlxTreeConnector(
   "Folders",
   "FolderID",
   "ParentID",
   dhtmlxDatabaseAdapterType.SqlServer2005,
   ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString,
   "FolderName"
);

Sometimes during the work with hierarchical data structures the question appears: what value should be used for indicating the top (root) item? dhtmlxTree(Grid)Connector assumes that the root item's ParentID value is null. You can change it by assigning a new value to the RootItemRelationIDValue property:

connector.RootItemRelationIDValue = "0"; //Set ParentID value for root items

Stored procedures

You can use stored procedures to initialize connector. In this case, connector won't be able to generate insert/update/delete operations, so you will need to define each operation manually. The second parameter(primary key) becomes inessential, so you can set it to empty string. You can also use stored procedures in CRUD operations, just like regular SQL statements.

var connector = new dhtmlxJSONDataConnector(
   "EXECUTE storedProc",
   "",
   dhtmlxDatabaseAdapterType.SqlServer2005,
   ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString
);
  • use server-side events to define your own processing logic.

Loading from a data array

Starting from version 1.5, instead of database you can load data from an array which can be filled with any kind of external logic.

In such a case the connector's constructors accept:

  • the IEnumerable collection
  • a comma-delimited columns list (some connectors ignore it)
  • the name of the identity field
public override IdhtmlxConnector CreateConnector(HttpContext context)
{
    var data = new DHTMLXDataContext();
    var connector = new dhtmlxGridConnector(
        data.BookStores,
        "sales, title, author, price, instore, shipping, bestseller, pub_date",
        "book_id"
    );

    return connector;
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Formatting/Changing Data Before Loading DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
    • Basic Formatting Methods
    • Formatting in Combo
    • Formatting in Grid and TreeGrid
    • Formatting in Tree
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

Formatting/Changing Data Before Loading

Basic Formatting Methods

In case you need to update values which were returned from database table or set some specific formatting before sending them to the client side, you can use the ItemPrerender event.

A common use-case will be similar to the following:

dhtmlxGridConnector connector = new dhtmlxGridConnector(/*...*/);
connector.ItemPrerender += new EventHandler<ItemPrerenderEventArgs<dhtmlxGridDataItem>>
(connector_ItemPrerender);

void connector_ItemPrerender(object sender,ItemPrerenderEventArgs<dhtmlxGridDataItem> e)
   {
      if (e.DataItem.Index % 2 == 0)
      e.DataItem.BgColor = "gray";
   }

Here, we have an event handler attached to the ItemPrerender event that sets background color for each second row. Each connector manipulates its own data item objects inherited from dhtmlxDataItem class. E.g. dhtmlxGridConnector uses dhtmlxGridDataItem, dhtmlxTreeConnector uses dhtmlxTreeDataItem, etc. Each data item class has its own specific properties that you can change. E.g. FolderClosedImage, FolderOpenedImage for dhtmlxTreeDataItem, Selected for dhtmlxComboItem or ChildRows for dhtmlxTreeGridDataItem.

In the same way you can change the appearance of the items and data they will display. The following example will add row indexes to "countries" grid:

public override IdhtmlxConnector CreateConnector(HttpContext context)
{
   dhtmlxGridConnector connector = new dhtmlxGridConnector(
      "Country",
      "ISO, PrintableName",
      "UID",
      dhtmlxDatabaseAdapterType.SqlServer2005,
      ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString
   );
 connector.ItemPrerender += new EventHandler<ItemPrerenderEventArgs<dhtmlxGridDataItem>>
 (connector_ItemPrerender);
 return connector;
}

void connector_ItemPrerender(
    object sender,
    ItemPrerenderEventArgs<dhtmlxGridDataItem> e
)
{
   e.DataItem.DataFields["PrintableName"] = (e.DataItem.Index + 1).ToString() + ". " +
   e.DataItem.DataFields["PrintableName"];
}

DataFields dictionary contains a collection of selected fields for the current data item. The index property gets the position of an item in all items collection.

More complex formatting rules can be defined by using "extra" fields in configuration, the fields that won't be outputted to the client but can be used inside of events.

public override IdhtmlxConnector CreateConnector(HttpContext context)
{
   dhtmlxTreeGridConnector connector = new dhtmlxTreeGridConnector(
      "Folders", "item_nm,item_order,item_desc", "item_id", "item_parent_id",
      dhtmlxDatabaseAdapterType.SqlServer2005,
      ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString
      "is_hidden"//extra field
   );
connector.RootItemRelationIDValue = "0";//set ParentID value for root items
connector.ItemPrerender += new EventHandler
<ItemPrerenderEventArgs<dhtmlxTreeGridDataItem>>(connector_ItemPrerender);
return connector;
}

void connector_ItemPrerender(
    object sender,
    ItemPrerenderEventArgs<dhtmlxTreeGridDataItem> e
)
{
   if (e.DataItem.DataFields["is_hidden"] == "1")
   e.DataItem.Skip = true;//do not render folders that have is_hidden attribute
}

In addition to all other fields we request the "is_hidden" field as an extra one. This one will not be rendered, but we can access it via the DataFields collection. The skip property is available in all dhtmlxDataItem class descendants and being set to true indicates that the item will not be rendered.

Userdata

Starting from version 1.5 you get the possibility to set userdata for items.

public override IdhtmlxConnector CreateConnector(HttpContext context)
{
    dhtmlxGridConnector connector = new dhtmlxGridConnector(
    ....
    );
connector.BeforeRender += new EventHandler<ItemPrerenderEventArgs<dhtmlxGridDataItem>>
(connector_ItemPrerender);
return connector;
}

void connector_ItemPrerender(object sender,ItemPrerenderEventArgs<dhtmlxGridDataItem> e)
{
    //name - the user data name, value - user data string
 e.DataItem.UserData.Add("name", "value");

}

Formatting in Combo

dhtmlxComboDataItem has only 3 properties available for changing: Value, Text and Selected

Formatting in Grid and TreeGrid

Both grid and treeGrid have the CssClass, BgColor, Style properties available for customization in the Prerender event. The CssClass property allows assigning row's CSS class name, whereas the Style property allows separating the style properties assignment. The BgColor property allows you to set row's background color. Additionally, dthmlxTreeGridDataItem has Image, HasChildren and ChildRows. The last two properties allow child rows manipulation. The first one lets to assign a custom image to the first column.

void connector_ItemPrerender(
    object sender,
    ItemPrerenderEventArgs<dhtmlxTreeGridDataItem> e
)
{
   if (e.DataItem.HasChildren)//tree grid row has child rows - output it like a folder
   e.DataItem.Image = "folder.gif";
}

Formatting in Tree

As well as dhtmlxTreeGridDataItem, dhtmlxTreeDataItem has HasChildren and ChildNodes properties. What's more, tree allows assigning FolderOpenedImage, FolderClosedImage and LeafImage images, Checked, Text and Value properties.

In the example below we analyze data passed into the data item and assign the "lock.gif" image to an item if it has the "is_hidden" value.

void connector_ItemPrerender(object sender,ItemPrerenderEventArgs<dhtmlxTreeDataItem> e)
{
   if (e.DataItem.DataFields["is_hidden"] == "1")
   e.DataItem.LeafImage = "lock.gif";
}

The ItemPrerender event also might be used to check if Tree or TreeGrid item has child items. Assigning to the HasChildren property of true or false values changes the way the item will be rendered.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Filtering DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
    • URL manipulation
    • In-header filter types
    • Custom filters (using the beforeSelect event)
    • Manual filter
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

Filtering

There are 3 ways to implement server-side filtering:

  • by specifying additional parameters in URL
  • by using in-header filter types during the component configuration
  • by means of the beforeSelect event

Note, the server-side filtering of dhtmlxTreeGrid doesn't maintain open states.

URL manipulation

APPLICABLE TO:Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Form

You can control which data is loaded into component by specifying additional parameters in URL.

  • filtering by one field
grid.load("some.ashx?connector=true&dhx_filter[1]=mask");

With such a url, data will be taken with an additional rule.

WHERE field_for_column_1 LIKE %mask%
  • filtering by multiple fields
grid.load("some.ashx?connector=true&dhx_filter[1]=mask&dhx_filter[3]=another");

For all components, except for Grid, you should provide exact field name instead of the column index.

Beware that such filtering is non-secure, and if you need to hide some data, make sure to define such a limitation on the server side, not as a part of URL.

In-header filter types

APPLICABLE TO: Grid, TreeGrid

To enable server-side filtering you can use one of the following in-header filter types while configuring dhtmlxGrid/dhtmlxTreeGrid on the client side:

  • #connector_text_filter - a text filter. Retrieves values which contain a mask defined through a text field
  • #connector_select_filter - a select filter. Retrieves values which contain a mask defined through dropdown the list of possible values
mygrid.setHeader("Column A, Column B");
mygrid.attachHeader("#connector_text_filter,#connector_select_filter")

Text filter

The use of text filter doesn't require any additional configuration code. Grid/TreeGrid will automatically send data about a newly entered text and filter server-side data by using the %mask% pattern.

If you need to change the filtering pattern or implement a more advanced logic, use the beforeSelect event (see details below).

Select filter

By default, grid/treegrid will use DISTINCT select against the related field, and fetch all possible options.

If you need to define a custom list of options, you can use one of 2 ways:

  • a hardcoded list
connector.ExplicitOptions.Add(
    connector.Request.RequestedFields[0],
    "Alpha",
    "Beta",
    "Gamma"
);

or

connector.ExplicitOptions.Add((TableField)"FieldName", "Alpha", "Beta", "Gamma");

Examples above add 3 options (“Alpha”, “Beta”, “Gamma”) to the filter associated with the specified column.

  • a list created on the base of a different table
var filterConnector = new dhtmlxOptionsConnector(
    "Country",
    connector.Request.Adapter,
    "ISO"
);
gridConnector.OptionsConnectors.Add(
    connector.Request.RequestedFields[0],
    filterConnector
);

The example above attaches the filter connector to the first column of grid connector. We create dhtmlxOptionsConnector to fetch items, specify the table and the field name to take the options titles from, and then provide the database adapter (Request.Adapter) already created for gridConnector. Finally, we add the 'options connector' to the first field of gridConnector.

Custom filters (using the beforeSelect event)

APPLICABLE TO: Grid, TreeGrid, Combo

By using the beforeSelect event, you can modify the filtering rules (doesn't work for dyn. modes).

For example, by default ComboConnector filters by the first letter(s). To make it filter by 'anywhere' occurrence (i.e. to use the '%mask%' pattern instead of the "mask%" pattern) you can modify the filtering rule something like this:

public override IdhtmlxConnector CreateConnector(HttpContext context)
{
    var connector = new dhtmlxComboConnector(...);
    connector.BeforeSelect += new EventHandler(connector_BeforeSelect);
    ...
    return connector;
}

void connector_BeforeSelect(object sender, EventArgs e)
{
    var request = (sender as dhtmlxComboConnector).Request;
    var rule = request.Rules.SingleOrDefault(
        //seeking for the needed rule by the field name as FieldRule;
        r=> (r is FieldRule) && ((r as FieldRule).Field == (TableField)"PrintableName"))

    if (rule != null)
        //sets the '%mask%' pattern instead of 'mask%'
        rule.Value = "%" + (string)rule.Value;
}

In the example above, we changed the rule value. Also you can modify the rule operator and the rule field.

public enum Operator
{
    Equals,
    NotEquals,
    Greater,
    GreaterOrEqual,
    Lower,
    LowerOrEqual,
    Like, /// the default value
    DoesntLike
}

What is more, you can add your custom filtering rules by using the Request.Rules collection accessed by the connector:

  • based on the field filter:
//filters items that were created this year
connector.BeforeSelect += new EventHandler(connector_BeforeSelect);
void connector_BeforeSelect(object sender, EventArgs e)
{
   this.Connector.Request.Rules.Add(
      new FieldRule("CreatedDate", Operator.GreaterOrEqual, "2009-01-01")
   );
}
  • based on the expression filter:
//returns items that were registered on weekends
connector.BeforeSelect += new EventHandler(connector_BeforeSelect);
void connector_BeforeSelect(object sender, EventArgs e)
{
 this.Connector.Request.Rules.Add(new ExpressionRule(
 "datepart(dw,CreatedDate) in (6,7)"
 ));
}

Manual filter

Each dhtmlxDataItem object has the Skip property, setting true value to which will prevent the object from rendering. You can handle the ItemPrerender event and manage an item's visibility. The example below shows how to prevent the items that have the "is_hidden" property from being rendered.

void connector_ItemPrerender(object sender,ItemPrerenderEventArgs<dhtmlxTreeDataItem> e)
{
   if (e.DataItem.DataFields["is_hidden"] == "1")
      e.DataItem.Skip = true;
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Sorting DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
    • URL manipulation
    • The sorting type 'connector'
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

Sorting

There are 2 ways to implement server-side sorting:

  • by specifying additional parameters in URL
  • by using the sorting type 'connector' during the component configuration

URL manipulation

APPLICABLE TO:Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Form

You can control how data will be sorted inside a column by specifying additional parameters in URL.

//ORDER by field_2 ASC
grid.load("some.php?connector=true&dhx_sort[2]=asc");
//ORDER by field_2 ASC, field_3 DESC
grid.load("some.php?connector=true&dhx_sort[2]=asc&dhx_sort[3]esc");

The sorting type 'connector'

APPLICABLE TO:Grid, TreeGrid

To sort grid/treegrid content with connectors you need to use 'connector' as a sorting type during the grid initialization.

grid.setColSorting("connector,str,na");

In the code snippet above, the first column will be sorted on the server side with connectors, the second as a string on the client side, the third column won't be sortable.

By assigning to sorting type 'connector' you just 'say' that sorting will be implemented on the server side.

To define the way, 'behaviour' of sorting, you should use the beforeSelect event.

The event doesn't allow writing a custom sorting logic, but you can affect SORT BY clause of a generated SQL request.
The current collection of sorting rules could be accessed by using a DataRequest object, which can be found in any connector.

connector.BeforeSelect += new EventHandler(connector_BeforeSelect);
void connector_BeforeSelect(object sender, EventArgs e)
{
   this.Connector.Request.OrderBy.Add(
    //sorts the first selected field in the descending order, no matter what the field is
      new OrderByField(this.Connector.Request.RequestedFields[0], "DESC")
   );
}

Alternatively, we can rewrite this example like:

connector.BeforeSelect += new EventHandler(connector_BeforeSelect);

void connector_BeforeSelect(object sender, EventArgs e)
{
   this.Connector.Request.OrderBy.Add(
    //sorts the "PrintableName" field in the descending order
      new OrderByField((TableField)"PrintableName", "DESC")
   );
}

or even:

connector.BeforeSelect += new EventHandler(connector_BeforeSelect);

void connector_BeforeSelect(object sender, EventArgs e)
{
    //sorts by the "PrintableName" expression
   this.Connector.Request.OrderBy.Add(new OrderByExpression("PrintableName DESC"));
}

All 3 examples, shown above, cause the same effect. The OrderBy collection is a collection of OrderByStatement objects. OrderByStatement itself is an abstract class, but it has 2 descendants: OrderByField and OrderByExpression.

OrderByField allows you to specify the field object you want to order by and its direction. The desired field can be taken from the Request.RequestedFields collection created right on the spot. OrderByExpression allows you to specify a ready-to-use SQL statement that will be inserted directly into ORDER BY sql statement.

OrderByExpression usage

connector.BeforeSelect += new EventHandler(connector_BeforeSelect);

void connector_BeforeSelect(object sender, EventArgs e)
{
    this.Connector.Request.OrderBy.Add(
    //ORDER BY CreatedDate's year
    new OrderByExpression("DATEPART(yy, Person.CreatedDate) DESC")
    );
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Client-side requirement - dataProcessor DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
    • Files to include on the client side
    • Initializing and linking to connector
    • Validation
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

Client-side requirement - dataProcessor

The connector itself lets just pass data from the server side to the client side.

When you need to pass data back (e.g. you've updated a record and want to save updates in the database) you should use dataProcessor additionally.

Shortly, data exchange with dataProcessor can be characterized as follows:

1) After you've made some changes, the client sends a query to the server. The query is passed with one of the following statuses:

  • updated
  • inserted
  • deleted

2) The server tries to implement the required query. If the operation was performed successfully, the server returns the same status it had got. Otherwise, the returned status is "error".

3) While exchanging, data undergoes default processing both on the server side and on the client side, i.e. data will be updated/inserted/deleted automatically (just initialize dataProcessor and dhtmlxConnector), no additional code needs to be added. You can affect this default processing by means of events (see details below).

Files to include on the client side

If you use the 'dhtmlxSuite' package (dhtmlx.js, dhtmlx.css code files) - you don't need to add any additional files.

But if you use the components standalone you should add one more file - dataprocessor.js.

Beware, dataprocessor.js should be included BEFORE connector.js.

Initializing and linking to connector

To initialize dataProcessor you should write 2 commands:

var dp = new dataProcessor(url)
dp.init(mygrid)

To link dataProcessor with connector you should specify the connector file as a parameter of the constructor:

dp = new dataProcessor("myconnector.ashx");
dp.init(mygrid);

Validation

Client-side validation

Dataprocessor allows validating data before sending it to the server side (see details here).

Server-side validation

You can see the details on the server-side validation in the related chapter of this documentation.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Making Queries DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
    • Simple queries
    • Complex queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

Making Queries

Simple queries

Applicable: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Form

By default, the connector generates all INSERT/UPDATE/DELETE queries automatically, based on configuration.

For more details on this topic, see the 'Basic Loading' chapter.

In case of dnd, the connector will process an action as a sequence of 'insert' and 'delete' operations.

Complex queries

When you need to define your own logic you should use one of two ways:

  • defining custom SQL code for operation
  • using server-side events to customize operations

Custom queries for an action

Applicable to: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Form

You can define your own SQL code for specific action (INSERT, UPDATE or DELETE) as follows:

dhtmlxGridConnector connector = new dhtmlxGridConnector(
   "SELECT ISO, PrintableName FROM Country",
   "UID",
   dhtmlxDatabaseAdapterType.SqlServer2005,
   ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString
);

connector.Request.CustomSQLs.Add(
    CustomSQLType.Delete,
    "UPDATE Country SET PrintableName = '-------------' WHERE UID={UID}"
);

Parameters:

  • CustomSQLType. Possible values are: 'Update', 'Insert', 'Delete'
  • SQL statement. It can use fields(or their aliases) which were mentioned in the connector's constructor while loading data.

Using server-side events

Applicable to: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Form

To customize operations you can use the following server-side events:

  • beforeUpdate
  • beforeInsert
  • beforeSelect

The example below adds one more field ("modify_date") into the final 'update' statement.

connector.BeforeUpdate += new EventHandler<DataActionProcessingEventArgs>(
connector_BeforeUpdate
);
void connector_BeforeUpdate(object sender, DataActionProcessingEventArgs e)
{
   e.DataAction.Data.Add("modify_date", Tools.ConvertToString(DateTime.Now));
}

The next example adds the "created_date" column into the 'insert' statement:

connector.BeforeInsert += new EventHandler<DataActionProcessingEventArgs>(
connector_BeforeInsert
);
void connector_BeforeInsert(object sender, DataActionProcessingEventArgs e)
{
   e.DataAction.Data.Add("create_date", Tools.ConvertToString(DateTime.Now));
}

And the completely custom SQL:

connector.BeforeUpdate += new EventHandler<DataActionProcessingEventArgs>(
connector_BeforeUpdate
);
void connector_BeforeUpdate(object sender, DataActionProcessingEventArgs e)
{
 this.Connector.Request.Adapter.ExecuteNonQuery(
 "UPDATE ........ SET ........ WHERE ......"
 );
 e.DataAction.SetCompleted();
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Transactions DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

Transactions

APPLICABLE TO: Grid

Grid allows using transactions for data INSERT/UPDATE/DELETE operations (make sure that the used DB engine has support for transactions).

They can be enabled in 2 modes:

1) global

connector.Request.TransactionMode = TransactionMode.PerRequest;

One request - one big common transaction

  • Component uses single transaction for all records inside single request.
  • If any operation fails, all record operations will be rolled back, all updated rows will be returned with error status
  • If custom validation was assigned and has blocked any record - all records inside of the request will be blocked

2) record

connector.Request.TransactionMode = TransactionMode.PerRecord;

Separate transactions per record

  • Component uses separate transactions for each record in request
  • If any operation fails, it will not affect other operations

To cancel transactions:

connector.Request.TransactionMode = TransactionMode.None;
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Validating Data DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
    • Common
    • Value checking
    • Processing in case of validation error
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

Validating Data

Before saving data on the server you can validate it and assign a handler function for any gotten response.

Shortly, validation contains 2 key points:

  1. Value checking;
  2. Processing in case of validation error.

Common

To implement the server-side validation of incoming data you can use the following events:

  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • beforeProcessing

The beforeProcessing event fires for all types of operations, while other events fire only for the related operations, i.e. you can set different validation rules for different operations or for all of them at once.

The event will receive DataAction object as the parameter. This object can be used to retrieve the related data and allow/deny operation (please note, it contains only the data which was received from the client side, not the all data related to the record).

Value checking

To check the value of a field you should use the Data() method:

connector.BeforeInsert += new EventHandler<DataActionProcessingEventArgs>(
connector_BeforeInsert
);

void connector_BeforeProcessing(object sender, DataActionProcessingEventArgs e)
{
   if (string.IsNullOrEmpty(e.DataAction.Data[(TableField)"title"]))
   ...
}

Processing in case of validation error

In case of error you can choose one of two ways:

1) Use the predefined method SetInvalid() for error processing on the client side:

connector.BeforeInsert += new EventHandler<DataActionProcessingEventArgs>(
connector_BeforeInsert
);

void connector_BeforeProcessing(object sender, DataActionProcessingEventArgs e)
{
   if (string.IsNullOrEmpty(e.DataAction.Data[(TableField)"title"]))
   e.DataAction.SetInvalid("Book title cannot be empty!");

   if (string.IsNullOrEmpty(e.DataAction.Data[(TableField)"author"]))
   e.DataAction.SetInvalid("Book author cannot be empty!");
}

2) Assign your own processing on the client side through the dataProcessor's method defineAction() (see details here)

dp.defineAction("invalid",function(sid,response){
var message = response.getAttribute("message");
alert(message);
return true;// return false to cancel default data processing at all
})
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Error handling and logging DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
    • Server-side logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

Error handling and logging

Server-side logging

While developing we strongly recommend to use logs for errors detection.

//attaches begin and end events to enable and disable logging in them
connector.Begin += new EventHandler(connector_Begin);
connector.End += new EventHandler(connector_End);

//we will store log content here
private StringBuilder _LogContent = new StringBuilder();

void connector_End(object sender, EventArgs e)
{
   Log.Enabled = false;//stop logging
}

void connector_Begin(object sender, EventArgs e)
{
   //enable logging and add listener to it
   Log.Enabled = true;
   Log.Listeners.Add(new TextWriterTraceListener(new StringWriter(this._LogContent)));
}

Log object is a wrapper over the System.Diagnostics.Trace class, thus you can use standard .NET Framework techniques for tracing. To start logging you need to set the Log's Enabled property to true and add one or more listeners to its Listeners collection. You can read more about TraceListeners here.

The example above writes log messages into the local variable (_LogContent). Alternatively, you can use console or file system as messages' destination. What's more, you can see the log messages in Microsoft Visual Studio's Output window ("Show output from: Debug") when you run application in the debug mode.

Adding custom records to the log

During the development process, you may need to write some custom data to the log (can be useful for custom server-side events), in such case you can use the default log as:

Log.WriteLine(this, "Message");

The first parameter is the reference to the object which writes message to the log. The second one is the message itself.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Other Database Types DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
Start Client-Server Communication .Net Connector

Other Database Types

You can make the connector work with other database types using ODBC. Just pass the dhtmlxDatabaseAdapterType.ODBC adapter to object constructor.

dhtmlxGridConnector connector = new dhtmlxGridConnector(
    "Country",
    "ISO, PrintableName",
    "UID",
    dhtmlxDatabaseAdapterType.ODBC,
    ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString,
    "(SELECT count(ISO) from Country)"
);

And modify the connection string in the web.config of your application, e.g. for MySql connection the string will look like this:

<add name="SamplesDatabase" connectionString="DRIVER= {MySQL ODBC 3.51 Driver};
SERVER=SERVERNAME;uid=root;PASSWORD=;DATABASE=dhtmlx;" providerName="System.Data.Odbc"/>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


New Functions DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
    • New in version 1.5
  • HowTos
Start Client-Server Communication .Net Connector

New Functions

New in version 1.5

Security:

  • Protection from XSS attacks;
  • Preventing CSRF and XSRF attacks.

Flexibility:

  • Loading from data arrays;
  • The possibility to set userdata with all types of connectors;
  • Better Touch Support (new data formats, adding extra tags/sections to data).
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


HowTos DHTMLX Docs

Documentation
  • .Net Connector API
  • General Idea of dhtmlxConnector
  • Initializing .Net Connector
  • Dynamic Loading
  • Security
  • Basic Loading
  • Formatting/Changing Data Before Loading
  • Filtering
  • Sorting
  • Client-side requirement - dataProcessor
  • Making Queries
  • Transactions
  • Validating Data
  • Error handling and logging
  • Other Database Types
  • New Functions
  • HowTos
    • General HowTos
    • Data Loading HowTos
    • Data Updating HowTos
    • Combo Specific HowTos
    • Grid Specific HowTos
    • Scheduler Specific HowTos
    • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication .Net Connector

HowTos

General:

  • ... assign aliases to DB fields?
  • ... attach event?
  • ... create custom database error message?
  • ... customize the content of a cell?
  • ... deny access to a certain operation?
  • ... filter data on the server side?
  • ... handle errors and log them?
  • ... sort data on the server side?
  • ... validate data on the client side?
  • ... validate data on the server side?

Loading data:

  • ... enable dynamic loading?
  • ... format/change data before loading?
  • ... load data from a database table?
  • ... send additional information to the client side?

Updating data:

  • ... alter the default styles set for responses?
  • ... implement transactions?
  • ... link dataProcessor with connector?
  • ... save data changes made in form?
  • ... update data on the server side?

Components-specific:

Combo:

  • ... populate combo with data from db?

Grid:

  • ... define grid configuration on the server side?
  • ... populate select/combo columns with data?

Scheduler

  • ... load options list from the server?

Tree and TreeGrid:

  • ... mark an item as a leaf or a branch?
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


General HowTos DHTMLX Docs

Documentation
  • General HowTos
    • How can I assign aliases to DB columns?
    • How can I attach event?
    • How can I create a custom database error message?
    • How can I deny access to a certain operation?
    • How can I customize the content of a cell?
    • How can I filter data on the server side?
    • How can I handle errors and log them?
    • How can I sort data on the server side?
    • How can I validate data on the client side?
    • How can I validate data on the server side?
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
  • Grid Specific HowTos
  • Scheduler Specific HowTos
  • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication .Net Connector HowTos

General HowTos

How can I assign aliases to DB columns?

You can assign aliases to the required tables or columns. For this purpose, use the word 'as' (as in any usual sql statement) in your connector's constructor.

dhtmlxTreeConnector connector = new dhtmlxTreeConnector(
   "Folders",
   "FolderID AS ID",
   "ParentID",
   dhtmlxDatabaseAdapterType.SqlServer2005,
   ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString,
   "FolderName AS Text"
);

How can I attach event?

To attach event you should use EventHandler<...>. For more details on this topic, see the 'Event handling' quide.

connector.BeforeUpdate += new EventHandler<DataActionProcessingEventArgs>(
connector_BeforeUpdate
);

void connector_BeforeUpdate(object sender, DataActionProcessingEventArgs e)
{
   //custom code
}

How can I create a custom database error message?

To add a custom error message you can use the event onDBError and write the desired message in the appropriate handler.

public void error_details(object sender, DataActionProcessingEventArgs args)
{
   args.DataAction.Details = "DB operation was failed";
}

connector.OnDBError += new EventHandler<DataActionProcessingEventArgs>(error_details);

How can I deny access to a certain operation?

By default, connector allows all operations. To deny some operation use deny(name_of_operation) method that can get one of the following:select/update/insert/delete/all/none. For more details see 'Security' guide.

connector.Request.AllowedAccess = AccessRights.Update;

How can I customize the content of a cell?

You can use the ItemPrerender event to define how the content of a cell must be formatted.

dhtmlxGridConnector connector = new dhtmlxGridConnector(/*...*/);
connector.ItemPrerender += new EventHandler<ItemPrerenderEventArgs<dhtmlxGridDataItem>>(
connector_ItemPrerender
);

void connector_ItemPrerender(object sender,ItemPrerenderEventArgs<dhtmlxGridDataItem> e)
   {
      if (e.DataItem.Index % 2 == 0)
      e.DataItem.BgColor = "gray";
   }

How can I filter data on the server side?

You have 3 ways to filter data on the server backend:

  • by specifying additional parameters in URL (on the client side)
grid.load("some.ashx?connector=true&dhx_filter[1]=mask");
  • by using in-header filter types during the component configuration (on the client side)
mygrid.setHeader("Column A, Column B");
mygrid.attachHeader("#connector_text_filter,#connector_select_filter")
  • by means of the beforeSelect event (on the server side)
connector.BeforeSelect += new EventHandler(connector_BeforeSelect);
void connector_BeforeSelect(object sender, EventArgs e)
{
   this.Connector.Request.Rules.Add(
      new FieldRule("CreatedDate", Operator.GreaterOrEqual, "2009-01-01")
   );
}

See the guide 'Filtration' for more information.

How can I handle errors and log them?

You can enable logging by means of using the Log.Enabled property. For more details see the 'Error handling and logging' guide.

connector.Begin += new EventHandler(connector_Begin);
private StringBuilder _LogContent = new StringBuilder();

void connector_Begin(object sender, EventArgs e)
{
   Log.Enabled = true;
   Log.Listeners.Add(new TextWriterTraceListener(new StringWriter(this._LogContent)));
}

How can I sort data on the server side?

You have 2 ways to sort data on the server backend:

  • by specifying additional parameters in URL (on the client side)
grid.load("some.ashx?connector=true&dhx_sort[2]=asc");
  • by using the sorting type 'connector' during the component configuration (on the client side)
grid.setColSorting("connector,str,na);

See the guide 'Sorting' for more information.

How can I validate data on the client side?

dataProcessor lets you validate data on the client side. Use the setVerificator(index,method) method to define the appropriate columns and validators. See details in the related chapter of dataProcessor's documentation.

dp.setVerificator(column_index,verification_func)

How can I validate data on the server side?

To perform server-side validation you should use one of the dhtmlxConnector events stated below and specify the needed validation rules in the appropriate events' handlers functions:

  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • beforeProcessing
connector.BeforeInsert += new EventHandler<DataActionProcessingEventArgs>(
connector_BeforeInsert
);

void connector_BeforeProcessing(object sender, DataActionProcessingEventArgs e)
{
   if (string.IsNullOrEmpty(e.DataAction.Data[(TableField)"title"]))
   ...
}

For more details on the server-side validation, see the guide 'Validation'.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Data Loading HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
    • How can I enable dynamic loading?
    • How can I format/change data before loading?
    • How can I load data from a database table?
    • How can I send additional information to the client side?
  • Data Updating HowTos
  • Combo Specific HowTos
  • Grid Specific HowTos
  • Scheduler Specific HowTos
  • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication .Net Connector HowTos

Data Loading HowTos

How can I enable dynamic loading?

To enable dynamic loading you should:

  • enable the related mode on the client side (e.g. smart rendering or paging for grid)
grid.enableSmartRendering(mode,buffer);
  • on the server side use one of the two properties: EnableDynamicLoading (for tree/treeGrid) or SetDynamicLoading (for grid/combo).
dhtmlxTreeConnector treeConnector = new dhtmlxTreeConnector(/*.....*/);
treeConnector.EnableDynamicLoading = true;

dhtmlxGridConnector gridConnector = new dhtmlxGridConnector(/*.....*/);
gridConnector.SetDynamicLoading(30);

See the guide 'Dynamic loading' for more information.

How can I format/change data before loading?

To set some specific formatting or change data before sending to the client side, you should use the ItemPrerender event handler. For more details on this topic, see 'Formatting/Changing Data before Loading'

connector.ItemPrerender += new EventHandler<ItemPrerenderEventArgs<dhtmlxGridDataItem>>(
connector_ItemPrerender
);

void connector_ItemPrerender(object sender,ItemPrerenderEventArgs<dhtmlxGridDataItem> e)
{
    if (e.DataItem.Index % 2 == 0)
    e.DataItem.BgColor = "gray";
}

How can I load data from a database table?

To load data from a database table you should use one of two ways:

  • To initialize the connector by SQL query, from where it will take the table name, filtering and ordering rules, the columns' list, etc.
dhtmlxGridConnector connector = new dhtmlxGridConnector(
   "SELECT ISO, PrintableName FROM Country",
   "UID",
   dhtmlxDatabaseAdapterType.SqlServer2005,
   ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString
);
  • To pass the table name and columns separately.
dhtmlxGridConnector connector = new dhtmlxGridConnector(
   "BookStore",
   "sales, title, author, price, instore, shipping, bestseller, pub_date",
   "book_id",
   dhtmlxDatabaseAdapterType.SqlServer2005,
   ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString
);

How can I send additional information to the client side?

To send additional information that won't be outputed but you'll have access to, to the client side, use the optional constructor parameter - ExtraColumnNames. With the help of this param, you can specify the columns that contain the desired additional information.

dhtmlxGridConnector connector = new dhtmlxGridConnector(
   //SQL with inner join statement
  "SELECT UID,
  PrintableName,
  TimeZone,
  TZID FROM Country INNER JOIN Timezone ON Country.TZID = Timezone.TZID",
  "UID",//Primary key name
  dhtmlxDatabaseAdapterType.SqlServer2005, //Database adapter type
  //connection string
  ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString,
  "TZID"//This column will be requested, appear in all events, but won't be rendered
);

For more information, see the chapter 'Using extra fields' in the 'Basic Loading' guide.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Data Updating HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
    • How can I alter the default styles set for responses?
    • How can I implement transactions?
    • How can I link dataProcessor with connector?
    • How can I update data on the server side?
    • How can I save data changes made in a form (simple way)?
  • Combo Specific HowTos
  • Grid Specific HowTos
  • Scheduler Specific HowTos
  • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication .Net Connector HowTos

Data Updating HowTos

How can I alter the default styles set for responses?

You can alter the default styles for each state, as follows:

dp.styles.error = ""; //avoids a special style for the 'error' response
//you should write it on the client side (in your HTML file)
//dp -  dataProcessor object

How can I implement transactions?

Connector allows using transactions for INSERT/UPDATE/DELETE operations (make sure that the used DB engine has support for transactions).

To activate the transaction mode, use the TransactionMode property. For more details see the 'Transactions' guide.

    //for all records inside of single request
connector.Request.TransactionMode = TransactionMode.PerRequest;
//or
    // for each record in request
connector.Request.TransactionMode = TransactionMode.PerRecord;

How can I link dataProcessor with connector?

To link dataProcessor with connector you should specify the connector file as a parameter of dataProcessor's constructor:

dp = new dataProcessor("myconnector.php");
dp.init("mygrid");

How can I update data on the server side?

To update data on the server side, you should initialize dataProcessor and link dhtmlxConnector to it on the client side . Default updating will be done automatically. For more details, see the guide 'Client-side requirement - dataProcessor'.

How can I save data changes made in a form (simple way)?

dhtmlxConnector automatically exec CRUD operations for next patterns:

//to get data of a DB record
   GET: connector.aspx?action=get&id={some}
//to delete data of a DB record
   GET: connector.aspx?action=delete
//to update data of a DB record
   GET: connector.aspx?action=delete
   POST: id={some}&property_name={value}
//to insert a new record to DB
   GET: connector.aspx?action=insert
   POST: property_name={value}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Combo Specific HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
    • How can I populate combo with data from db?
  • Grid Specific HowTos
  • Scheduler Specific HowTos
  • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication .Net Connector HowTos

Combo Specific HowTos

How can I populate combo with data from db?

To define options of combo you should use ComboConnector on the server side and specify the connector file in the load() method on the client side:

client side:

var combo=new dhtmlXCombo("combo_zone2","alfa2",200);
combo.load("connector.ashx");

server side:

dhtmlxComboConnector connector = new dhtmlxComboConnector(
    "Categories", //table to select from
    "value_column, label_column", //fields to select
    "category_id", //primary key column name
    dhtmlxDatabaseAdapterType.SqlServer2005, //predefined database adapter type
    //connection string
    ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString
);
  • Names of the fields can have aliases (value or label) to identify the appropriate attribute.
dhtmlxComboConnector connector = new dhtmlxComboConnector(
      "Categories", //table to select from
      "id,firstName AS label", //fields to select
      ...

Note, in the filtering mode a combo filters data by the "label" field.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Grid Specific HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
  • Grid Specific HowTos
    • How can I define grid structure on the server side?
    • How can I populate select/combo columns with data?
    • Grid Configuration
    • Select/Combo-box Columns in Grid
  • Scheduler Specific HowTos
  • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication .Net Connector HowTos

Grid Specific HowTos

How can I define grid structure on the server side?

To define grid structure on the server side you need to:

  • create configuration object
var config = new dhtmlxGridConfiguration();
  • set required parameters
config.SetHeader("Item,#cspan");
config.AttachHeader("Sales,Title");
config.SetColIds("col1,col2");
...
  • and attach config to connector
connector.SetConfig(config);
return connector;

For more information on the topics covered here, see the 'Grid configuration' guide.

How can I populate select/combo columns with data?

To define options of select/combo columns, you have 2 ways:

1) to load data from the same table, the grid is populated with data from

connector.ExplicitOptions.Add((TableField)"FieldName", "Alpha", "Beta", "Gamma");

2) to load data from another table

dhtmlxOptionsConnector filterConnector = new dhtmlxOptionsConnector(
    "Country",
    "ISO",
    connector.Request.Adapter
);
//attaches filter connector to first column of grid connector
gridConnector.OptionsConnectors.Add(
    connector.Request.RequestedFields[0],
    filterConnector
);

For more information on this topic, see the 'Select/combobox columns in grid' article.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Grid Configuration DHTMLX Docs

Documentation
  • Grid Configuration
  • Select/Combo-box Columns in Grid
Start Client-Server Communication .Net Connector HowTos Grid Specific HowTos

Grid Configuration

All you need to do to configure dhtmlxGrid on the server side is to:

  • create configuration object
var config = new dhtmlxGridConfiguration();
  • set required parameters
config.SetHeader("Item,#cspan");
config.AttachHeader("Sales,Title");
config.SetColIds("col1,col2");
config.SetInitWidths("120,*");
config.SetColSorting("connector,connector");
config.SetColColor(",#d5f1ff");
config.SetColHidden("false,false");
config.SetColTypes("ro,ed");
config.SetColAlign("center,center");
config.SetColVAlign("bottom,middle");
  • and attach config to the connector
connector.SetConfig(config);
return connector;

dhtmlxConfiguration has the following methods:

public string HeaderDelimiter // gets or sets header delimiter
public void SetHeader(string names)//headers names separated by delimiter(','by default)
public void SetInitWidths(string wp) // sets dhtmlxGrid columns widths in pixels
public void SetInitWidthsP(string wp) // sets dhtmlxGrid columns widths in percents
public void SetColAlign(string str) //sets dhtmlxGrid columns horizontal align
public void SetColVAlign(string str) // sets dhtmlxGrid columns vertical align
public void SetColTypes(string str) // sets dhtmlxGrid columns types
public void SetColSorting(string str) // sets dhtmlxGrid columns sorting types
public void SetColColor(string str) // sets dhtmlxGrid columns colors
public void SetColHidden(string str) // sets dhtmlxGrid hidden columns
public void SetColIds(string str) // sets dhtmlxGrid columns ids

//attaches dhtmlxGrid header
//"values" - header titles separated by delimiter
//"styles" - header styles separated by delimiter
//"footer"  if true attaches footer
public void AttachHeader(string values, string styles = null, boolean footer false)

//attaches dhtmlxGrid Footer
//"values" - footer titles separated by delimiter
//"styles" - footer styles separated by delimiter
public void AttachFooter(string values, string styles = null) {
    AttachHeader(values, styles, true);
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Select/Combo-box Columns in Grid DHTMLX Docs

Documentation
  • Grid Configuration
  • Select/Combo-box Columns in Grid
Start Client-Server Communication .Net Connector HowTos Grid Specific HowTos

Select/Combo-box Columns in Grid

When a grid has 'co'/'coro' columns ( select/combo-box ), it will automatically request data for them in the same manner as for Filtering options. So it's possible to use a similar way of logic to define which list of values needs to be used in select/combo inside of the grid.

  • an automatic list - if no custom instruction is provided , the grid will use DISTINCT select for the related field, and fetch all the possible options

  • a hardcoded list

connector.ExplicitOptions.Add(
    connector.Request.RequestedFields[0],
    "Alpha",
    "Beta",
    "Gamma"
);
//or
connector.ExplicitOptions.Add((TableField)"FieldName", "Alpha", "Beta", "Gamma");

The example above will add 3 options ("Alpha", "Beta", "Gamma") to the filter associated with the first column.

  • a list created on the base of different tables
dhtmlxOptionsConnector filterConnector = new dhtmlxOptionsConnector(
    "Country",
    "ISO",
    connector.Request.Adapter
);
//attach a filter connector to the first column of grid connector
gridConnector.OptionsConnectors.Add(
connector.Request.RequestedFields[0],
filterConnector
);

First of all, we create dhtmlxOptionsConnector to fetch items, specify a table and a field name to take options title from, and then provide a database adapter (Request.Adapter) already created for gridConnector.

Finally, we add the options connector to the first field of gridConnector.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Scheduler Specific HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
  • Grid Specific HowTos
  • Scheduler Specific HowTos
    • How can I load options list from server?
  • Tree(TreeGrid) Specific HowTos
Start Client-Server Communication .Net Connector HowTos

Scheduler Specific HowTos

How can I load options list from server?

Options' lists can be added to scheduler by dhtmlxOptions connector. All you need to do is:

  • to create connectors
  • to integrate them using the dhtmlxSchedulerConnector.AddOptionsConnector method
public override IdhtmlxConnector CreateConnector(HttpContext context)
{
  var connector = new dhtmlxSchedulerConnector(
    "Events",
    "EventID",
    dhtmlxDatabaseAdapterType.SqlServer2005,
    ConfigurationManager.ConnectionStrings["SamplesDatabase"].ConnectionString,
    "FromDate",
    "ToDate",
    "Subject as text, Details as details, Tags"
  );
  dhtmlxOptionsConnector optionsConnector = new dhtmlxOptionsConnector(
    "types",
    "typeid",
    connector.Request.Adapter,
    "name"
  );
   connector.AddOptionsConnector("type", optionsConnector);
   return connector;
}
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Tree(TreeGrid) Specific HowTos DHTMLX Docs

Documentation
  • General HowTos
  • Data Loading HowTos
  • Data Updating HowTos
  • Combo Specific HowTos
  • Grid Specific HowTos
  • Scheduler Specific HowTos
  • Tree(TreeGrid) Specific HowTos
    • How can I mark an item as a leaf or a branch of the tree?
Start Client-Server Communication .Net Connector HowTos

Tree(TreeGrid) Specific HowTos

How can I mark an item as a leaf or a branch of the tree?

In the RequestHasChildren event handler you are allowed to mark an item as a leaf or a branch. For this purpose, you should use the HasChildren property and set it to true or false. true marks an item as a branch, false - as a leaf.

dhtmlxTreeGridConnector connector = new dhtmlxTreeGridConnector(/*...*/);
connector.RequestHasChildren += new EventHandler<RequestChildrenEventArgs<dhtmlxTreeGridDataItem>>(
connector_RequestHasChildren
);

void connector_RequestHasChildren(object sender,RequestChildrenEventArgs<dhtmlxTreeGridDataItem> e)
{
    if (TodayIsMonday)
        e.HasChildren = false;//no children on Mondays
    else
        e.HasChildren = true;
}

For more details see the 'Tree/TreeGrid specific' chapter in the 'Dynamic loading' guide.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ColdFusion Connector DHTMLX Docs

Documentation
  • DataProcessor
  • PHP Connector
  • Java Connector
  • .Net Connector
  • ColdFusion Connector
    • ColdFusion Connector API
    • General Idea of dhtmlxConnector
    • Initializing ColdFusion Connector
    • Basic Loading
    • Dynamic Loading
    • Filtering
    • Formatting/Changing Data before Loading
    • Sorting
    • Client-Side Requirement - dataProcessor
    • Making Queries
    • Multi-User Sync
    • Security
    • Validation
    • Select/Combobox Columns in Grid
    • Defining Grid Structure on the Server Side
    • Select-Box Columns in Scheduler
    • Elementary DB operations with Connector
    • Error Handling and Logging
    • Handling Events
    • Extending Functionality
    • Samples
Start Client-Server Communication

ColdFusion Connector

DHTMLX connector is a helper server-side library that enables access to external datasources and backend systems.

It supports all DHTMLX components which operate with data.

The library itself provides a wide server-side functionality, such as data loading (static or dynamic), saving, filtering, validation, etc. Integration with DHTMLX Dataprocessor allows managing the insert/delete/update operations as well.

Server-side requirements

  • fully supported DataBases: MySQL, MSSQL, FileSystem
  • partially supported DataBases: MSAccess
  • ColdFusion version: 7 +

Supported functionality

  • Data loading for Grid, TreeGrid, Tree, Combo, Gantt, Scheduler, DataView, Chart, Form
  • Data saving for Grid, TreeGrid, Tree, Gantt, Scheduler, DataView, Form
  • Server-side sorting and filtering for Grid, Combo
  • Dynamic loading (paging) for Grid, Treegrid, Tree, Gantt, Scheduler, DataView
API reference
  • ColdFusion Connector API
Guides

ColdFusion Connector Basics

  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
 Discusses the definition of dhtmlxConnector and the way of initializing ColdFusion Connector.

Loading Data

  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
 Describes the ways of loading data using ColdFusion Connector as well as the operations connected with it: filtering, formatting and sorting data.

Managing Create/Update/Delete Operations

  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
 Tells about executing main operations with data using ColdFusion Connector.

Grid Specific

  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
 Covers the peculiarities of using ColdFusion Connector with Grid.

Scheduler Specific

  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
 Shows the specificity of using ColdFusion Connector with Scheduler.

Other

  • Samples
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


ColdFusion Connector API DHTMLX Docs

Documentation
  • ColdFusion Connector API
    • API methods
    • Events
    • DataItem Object
    • Connector object
    • DataAction Object
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

ColdFusion Connector API

  • API methods
  • DataItem Object
  • Connector object
  • DataAction Object
  • Events
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


API methods DHTMLX Docs

Documentation
  • API methods
    • Order of execution
  • Events
  • DataItem Object
  • Connector object
  • DataAction Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API

API methods

All the methods can be divided into 2 main categories:

  • Connector methods - methods of dhtmlxConnector instance. Available throughout the program.
    • Connector Object - relates to dhtmlxConnector instance.

  • Event methods - methods available just inside events' handler functions (different events provide different methods. The appropriate ones depend on input object).

    • DataAction Object - relates to action queries. Input object of: beforeInsert, beforeUpdate, beforeDelete, beforeProcessing, afterProcessing, afterDelete, afterUpdate, afterInsert events.

    • DataItem Object - relates to using dhtmlx component.

    Input object of: beforeRender event.

    • SortInterface Object - relates to collection of sorting rules.

    Input object of: beforeSort event.

    • FilterInterface Object - relates to collection of filtering rules.

    Input object of: beforeFilter event.

Order of execution
  • Connector Object - methods of the main object
    • render_table
    • render_sql
    • set_encoding
    • dynamic_loading
    • enable_log
    • is_select_mode
  • Events objects - objects that are passed as input parameters to events. Mentioned here methods can be used only inside handlers' functions of the appropriate events.
    • DataAction Object
    • DataItem Object
    • SortInterface Object
    • FilterInterface Object
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Events DHTMLX Docs

Documentation
  • API methods
  • Events
    • List of Events
    • Order of execution
    • beforeFilter
    • beforeSort
    • beforeRender
    • beforeOutput
    • beforeUpdate
    • beforeInsert
    • beforeDelete
    • afterUpdate
    • afterInsert
    • afterDelete
    • beforeProcessing
    • afterProcessing
    • SortInterface Object
    • FilterInterface Object
  • DataItem Object
  • Connector object
  • DataAction Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API

Events

List of Events

  • beforeSort Event

  • beforeFilter Event

  • beforeRender Event

  • beforeOutput Event

  • beforeUpdate Event

  • beforeInsert Event

  • beforeDelete Event

  • afterUpdate Event

  • afterInsert Event

  • afterDelete Event

  • beforeProcessing Event

  • afterProcessing Event

Order of execution

data loading

  • incoming request parsed
  • beforeSort
  • beforeFilter
  • sql select executed
  • for each selected record
    • beforeRender
    • generate xml for record
  • output data to client

data updating

  • incoming request parsed
  • global transaction started ( if enabled )
  • beforeProcessing
  • for each record
    • record level transaction if started ( if enabled )
    • beforeInsert/ beforeDelete/ beforeUpdate
    • record level transaction commited ( if enabled )
  • afterProcessing
  • global transaction commited ( if enabled )
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeFilter DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
  • FilterInterface Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

beforeFilter

The event occurs before data loading and allows to customize filtering of dataset.

<cfset conn.event.attach("beforeFilter",handlerFunc)>

Parameters handlerFunc:

  • filter_by - FilterInterface object

Availability:

  • Available for Grid, Combo

Sample:

<cffunction name="custom_filter">
    <cfargument name="filter_by">
        <!--- changes WHERE some_field LIKE '%value%' to the WHERE some_field gt 'value' --->
    <cfset var index=ARGUMENTS.filter_by.index("some_field") >
        <!---  there is client side input for the filter --->
    <cfif index>
        <cfset ARGUMENTS.filter_by.rules[index]["operation"]=">">
    </cfif>
</cffunction>
<cfset conn.event.attach("beforeFilter",custom_filter)>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeSort DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
  • FilterInterface Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

beforeSort

The event occurs before data loading and allows to customize sorting of dataset

<cfset conn.event.attach("beforeSort",handlerFunc)>

Parameters handlerFunc:

  • sort_by - SortInterface object

Availability:

  • Available for Grid, Treegrid

Sample:

<cffunction name="custom_sort">
        <!--- SORT BY LENGTH(some_field) --->
    <cfargument name="sorted_by">
    <cfset ARGUMENTS.sorted_by.add("LENGTH(some_field)")>
</cffunction>
<cfset conn.event.attach("beforeSort",custom_sort)>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeRender DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
  • FilterInterface Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

beforeRender

The event occurs event occurs after data has been selected from the database but before its outputting to client.

<cfset conn.event.attach("beforeRender",handlerFunc)>

Parameters handlerFunc:

  • dataItem - DataItem Object

Availability:

  • Available for Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

Sample:

<cffunction name="color_rows">
    <cfargument name="row">
    <cfif ARGUMENTS.row.get_index() mod 2>
        <cfset ARGUMENTS.row.set_row_color("red")>
    </cfif>
</cffunction>
<cfset grid.event.attach("beforeRender",color_rows)>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeOutput DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
  • FilterInterface Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

beforeOutput

The event occurs event occurs after data has been selected from the database and ready to be sent to client side. Event can be used to mix some custom data in XML output. The most common use-case - header structure for the grid.

<cfset conn.event.attach("beforeOutput",handlerFunc)>

Parameters handlerFunc:

  • Doesn't get any parameters

Availability:

  • Available for Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

Sample:

<cffunction name="grid_header">
    <cfargument name="connector" type="any" hint="Grid Connector Object">
    <cfargument name="out" type="any" hint="Output Writer">
    <cfset var header = "">
    <cfif not isDefined("URL.posStart")>
        <cfsavecontent variable="header">
        <cfoutput>
            <head>
                <column width="50" type="ed" align="right" color="white" sort="na">Sales</column>
                <column width="150" type="ed" align="left" color="##d5f1ff" sort="na">Book Title</column>
                <column width="100" type="ed" align="left" color="##d5f1ff" sort="na">Author</column>
            </head>
        </cfoutput>
        </cfsavecontent>
        <cfset ARGUMENTS.out.add(header)>
    </cfif>
</cffunction>
<cfset grid = createObject("component","dhtmlXConnectors.GridConnector").init("#datasource#","MYSQL")>
<cfset grid.event.attach("beforeOutput",grid_header)>
<cfset grid.render_table("grid50000","item_id","item_id,item_nm,item_cd")>

In case of dyn. loading mode, one more check need to be added, to prevent data output for additional data calls:

<cffunction name="grid_header">
    <cfargument name="connector" type="any" hint="Grid Connector Object">
    <cfargument name="out" type="any" hint="Output Writer">
    <cfset var header = "">
    <cfif not isDefined("URL.posStart")>
        <cfsavecontent variable="header">
        <cfoutput>
            <head>
                <column width="50" type="ed" align="right" color="white" sort="na">Sales</column>
                <column width="150" type="ed" align="left" color="##d5f1ff" sort="na">Book Title</column>
                <column width="100" type="ed" align="left" color="##d5f1ff" sort="na">Author</column>
            </head>
        </cfoutput>
        </cfsavecontent>
        <cfset ARGUMENTS.out.add(header)>
    </cfif>
</cffunction>
<cfset grid = createObject("component","dhtmlXConnectors.GridConnector").init("#datasource#","MYSQL")>
<cfset grid.dynamic_loading(100)>
<cfset grid.event.attach("beforeOutput",grid_header)>
<cfset grid.render_table("grid50000","item_id","item_id,item_nm,item_cd")>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeUpdate DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
  • FilterInterface Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

beforeUpdate

The event occurs before updating values in database and can cancel default update statement or validate incoming values.

<cfset grid.event.attach("beforeUpdate",handlerFunc)>

Parameters handlerFunc:

  • action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample:

<!--- creates and runs own update statement using values came in request, cancels default update --->
<cffunction name="myUpdate">
    <cfargument name="action">
        <cfquery datasource="#request.datasource#" name="upd">
         UPDATE Countries SET item_nm='#ARGUMENTS.action.get_value('item_nm')#' WHERE item_id='#ARGUMENTS.action.get_id()#'
        </cfquery>
        <cfset ARGUMENTS.action.success()>
</cffunction>
<!--- checks if value of name is empty, then cancel update. Otherwise proceeds with default update --->
<cffunction name="myUpdate">
    <cfargument name="action">
        <cfif ARGUMENTS.action.get_value("name") eq "")>
        <cfset ARGUMENTS.action.invalid()>
    </cfif>
</cffunction>
<!--- sets new value for name and proceeds with default update --->
<cffunction name="myUpdate">
    <cfargument name="action">
    <cfset var new_value=RandRange(0,100)>
        <cfset ARGUMENTS.action.set_value("name",new_value)>
</cffunction>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeInsert DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
  • FilterInterface Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

beforeInsert

The event occurs before inserting values into database and can cancel default insert statement or validate incoming values.

<cfset grid.event.attach("beforeInsert",handlerFunc)>

Parameters handlerFunc:

  • action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample:

  • See related beforeUpdate sample.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeDelete DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
  • FilterInterface Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

beforeDelete

The event occurs before deleting record in database and can cancel default delete statement or validate incoming values.

<cfset grid.event.attach("beforeDelete",handlerFunc)>

Parameters handlerFunc:

  • action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample:

  • See related beforeUpdate sample.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


afterUpdate DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
  • FilterInterface Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

afterUpdate

The event occurs after updating values in database and can can be used to pass additional values to client-side.

<cfset grid.event.attach("afterUpdate",handlerFunc)>

Parameters handlerFunc:

  • action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample:

  • See related afterProcessing sample.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


afterInsert DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
  • FilterInterface Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

afterInsert

The event occurs after inserting values into database and can can be used to pass additional values to client-side.

<cfset grid.event.attach("afterInsert",handlerFunc)>

Parameters handlerFunc:

  • action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample:

  • See related afterProcessing sample.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


afterDelete DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
  • FilterInterface Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

afterDelete

The event occurs after deleting record in database and can be used to pass additional values to client-side.

<cfset grid.event.attach("afterDelete",handlerFunc)>

Parameters handlerFunc:

  • action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample: See related afterProcessing sample.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


beforeProcessing DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
  • FilterInterface Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

beforeProcessing

The event occurs before beforeInsert, beforeUpdate, beforeDelete events occur and relates to all operations: Insert, Update and Delete. It can be cancelled in the same way as the aforementioned events.

<cfset grid.event.attach("beforeProcessing",handlerFunc)>

Parameters handlerFunc:

  • action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample: See related beforeUpdate sample.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


afterProcessing DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
  • FilterInterface Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

afterProcessing

The event occurs after beforeInsert, beforeUpdate, beforeDelete events occur and relates to all operations: Insert, Update and Delete. It can be used to pass additional values to client side.

<cfset grid.event.attach("afterProcessing",handlerFunc)>

Parameters handlerFunc:

  • action - DataAction Object

Availability:

  • Available for Grid, TreeGrid, Tree, Scheduler, DataView, Form

Sample:

<cffunction name="doAfterProcessing">
    <cfargument name="action">
    <cfset ARGUMENTS.action.set_response_xml("<guid>some value</guid>")>
</cffunction>
<cfset grid.event.attach("afterProcessing",doAfterProcessing)>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


SortInterface Object DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
    • add
    • clear
    • index
    • rules
  • FilterInterface Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

SortInterface Object

add

adds a new sorting rule to collection

<cfset sort.add("name","type")>

Parameters:

  • name - name of the field.
  • type - sorting type: ASC or DESC

clear

clears collection (deletes all specified sorting rules).

<cfset sort.clear()>

Parameters:

  • none.

index

check if there are some rules in collection for the specified field and returns related hash.

<cfset index = sort.index("name")>

Parameters:

  • name - name of the field Returns:

  • true - if collection contains rule(s) for the specified field.

  • false - if collection doesn't contain any rules for the field.

rules

array of all specified sorting rules.

<cfset name = sort.rules[1]["name"]>
<cfset sort.rules[1]["direction"]="DESC">

Properties:

  • name - name of related field
  • direction - direction of sorting
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


FilterInterface Object DHTMLX Docs

Documentation
  • beforeFilter
  • beforeSort
  • beforeRender
  • beforeOutput
  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • afterUpdate
  • afterInsert
  • afterDelete
  • beforeProcessing
  • afterProcessing
  • SortInterface Object
  • FilterInterface Object
    • add
    • clear
    • index
    • rules
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API Events

FilterInterface Object

add

adds a new filtering rule to collection.

<!--- some_field LIKE "%abc%" --->
<cfset filter.add("name","value")>
<!--- some_field < 5 --->
<cfset filter.add("name","value","comp_oper")>

Parameters:

  • name - name of the field.
  • value - comporison value (filtering criteria).
  • comp_oper - comparison operator: '>' or '<'.

clear

clears collection (deletes all specified filtering rules).

<cfset filter.clear()>

Parameters:

  • none.

index

check if there are some rules in collection for the specified field and returns related hash.

<cfset index=filter.index("some_field")>

Parameters:

  • name - name of the field Returns:

  • true - if collection contains rule(s) for the specified field.

  • false - if collection doesn't contain any rules for the field.

rules

array of all specified sorting rules.

<cfset name = filter.rules[1]["name"]>
<cfset filter.rules[1]["value"]="cde">

Properties:

  • name - name of related field.
  • value - comporison value (filtering criteria).
  • operation - comporison operator. If empty - default LIKE instruction is used.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataItem Object DHTMLX Docs

Documentation
  • API methods
  • Events
  • DataItem Object
    • dhtmlxChart
    • dhtmlxCombo
    • dhtmlxDataView
    • dhtmlxForm
    • dhtmlxGrid
    • dhtmlxTree
    • dhtmlxTreeGrid
    • dhtmlxScheduler
  • Connector object
  • DataAction Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API

DataItem Object

Different components have different sets of methods. Follow the link of component you use.

  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxChart DHTMLX Docs

Documentation
  • dhtmlxChart
    • get_id
    • get_index
    • get_value
    • set_id
    • skip
    • set_value
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API DataItem Object

dhtmlxChart

get_id

returns id of the item.

<cfset dataItem.get_id()>

Parameters:

  • none.

See also:

  • set_id

get_index

returns an index of the currently selected item (for example, in grid, it will be an index of row )

<cfset dataItem.get_index()>

Parameters:

  • none.

get_value

returns value of a field.

<cfset dataItem.get_value(name)>

Parameters:

  • name - name or alias of the field.

See Also:

  • set_value

set_id

sets id of the item.

<cfset dataItem.set_id(value)>

Parameters:

  • value - id of the item. See also:

  • get_id

skip

ignores the current item while rendering output. Allows to define custom filtering rules.

<cfset dataItem.skip()>

Parameters:

  • none.

set_value

sets value of a field.

<cfset dataItem.set_value(name, value)>

Parameters:

  • name - name or alias of the field
  • value - value of the field in question

See Also:

  • get_value
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxCombo DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
    • get_id
    • get_index
    • get_value
    • select
    • set_id
    • skip
    • set_value
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API DataItem Object

dhtmlxCombo

get_id

returns id of the item.

<cfset dataItem.get_id()>

Parameters:

  • none.

See also:

  • set_id

get_index

returns an index of the currently selected item (for example, in grid, it will be an index of row )

<cfset dataItem.get_index()>

Parameters:

  • none.

get_value

returns value of a field.

<cfset dataItem.get_value(name)>

Parameters:

  • name - name or alias of the field.

See Also:

  • set_value

select

marks combo option as selected.

<cfset dataItem.select()>

Parameters:

  • none.

set_id

sets id of the item.

<cfset dataItem.set_id(value)>

Parameters:

  • value - id of the item. See also:

  • get_id

skip

ignores the current item while rendering output. Allows to define custom filtering rules.

<cfset dataItem.skip()>

Parameters:

  • none.

set_value

sets value of a field.

<cfset dataItem.set_value(name, value)>

Parameters:

  • name - name or alias of the field
  • value - value of the field in question

See Also:

  • get_value
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxDataView DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
    • get_id
    • get_index
    • get_value
    • set_id
    • skip
    • set_value
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API DataItem Object

dhtmlxDataView

get_id

returns id of the item.

<cfset dataItem.get_id()>

Parameters:

  • none.

See also:

  • get_id

get_index

returns an index of the currently selected item (for example, in grid, it will be an index of row )

<cfset dataItem.get_index()>

Parameters:

  • none.

get_value

returns value of a field.

<cfset dataItem.get_value(name)>

Parameters:

  • name - name or alias of the field.

See Also:

  • set_value

set_id

sets id of the item.

<cfset dataItem.set_id(value)>

Parameters:

  • value - id of the item. See also:

  • get_id

skip

ignores the current item while rendering output. Allows to define custom filtering rules.

<cfset dataItem.skip()>

Parameters:

  • none.

set_value

sets value of a field.

<cfset dataItem.set_value(name, value)>

Parameters:

  • name - name or alias of the field
  • value - value of the field in question

See Also:

  • get_value
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxForm DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
    • get_id
    • get_index
    • get_value
    • set_id
    • skip
    • set_value
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API DataItem Object

dhtmlxForm

get_id

returns id of the item.

<cfset dataItem.get_id()>

Parameters:

  • none.

See also:

  • set_id

get_index

returns an index of the currently selected item (for example, in grid, it will be an index of row )

<cfset dataItem.get_index()>

Parameters:

  • none.

get_value

returns value of a field.

<cfset dataItem.get_value(name)>

Parameters:

  • name - name or alias of the field.

See Also:

  • set_value

set_id

sets id of the item.

<cfset dataItem.set_id(value)>

Parameters:

  • value - id of the item. See also:

  • get_id

skip

ignores the current item while rendering output. Allows to define custom filtering rules.

<cfset dataItem.skip()>

Parameters:

  • none.

set_value

sets value of a field.

<cfset dataItem.set_value(name, value)>

Parameters:

  • name - name or alias of the field
  • value - value of the field in question

See Also:

  • get_value
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxGrid DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
    • get_id
    • get_index
    • get_value
    • set_cell_attribute
    • set_cell_class
    • set_cell_style
    • set_id
    • set_options
    • skip
    • set_row_attribute
    • set_row_color
    • set_row_style
    • set_value
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API DataItem Object

dhtmlxGrid

get_id

returns id of the item.

<cfset dataItem.get_id()>

See also:

  • set_id

get_index

returns an index of the currently selected item (for example, in grid, it will be an index of row )

<cfset dataItem.get_index()>

Parameters:

  • none.

get_value

returns value of a field.

<cfset dataItem.get_value(name)>

Parameters:

  • name - name or alias of the field. See Also:

  • set_value

set_cell_attribute

sets attribute for a cell of item.

<cfset dataItem.set_cell_attribute(name,attr,value)>

Parameters:

  • name - name of alias of the cell
  • attr - name of attribute

  • value - value of attribute See Also:

  • set_cell_style

  • set_cell_class

set_cell_class

sets css class for a cell of item.

<cfset dataItem.set_cell_class(name,value)>

Parameters:

  • name - name or alias of the cell
  • value - css class for the cell

See Also:

  • set_cell_style
  • set_cell_attribute

set_cell_style

sets style for a cell of item.

<cfset dataItem.set_cell_style(style)>

Parameters:

  • style - HTML style attributes.

See Also:

  • set_cell_class
  • set_cell_attribute

set_id

sets id of the item.

<cfset dataItem.set_id(value)>

Parameters:

  • value - id of the item.

See also:

  • get_id

set_options

assigns options collection to the column.

<cfset dataItem.set_options(name, options)>

Parameters:

  • name - the name of the column
  • options - an array of options or a connector object

Sample:

<cfset dataItem.set_options("column_id",array(
    "1" => "one", "2" => "two","3" => "three"))>
<!---or--->
<cfset list = createObject("component","dhtmlxConnectors.OptionsConnector").init(
    "#datasource#",
    "MySQL"
)>
<cfset list.render_table(
    "countries",
    "country_id",
    "country_id(value),country_name(label)"
)>
<cfset grid.set_options("column_id",list)>

skip

ignores the current item while rendering output. Allows to define custom filtering rules.

<cfset dataItem.skip()>

Parameters:

  • none

set_row_attribute

sets attribute for any row in the component.

<cfset dataItem.set_row_attribute(attr, value)>

Parameters:

  • attr - name of attribute
  • value - value of attribute

See Also:

  • set_row_style
  • set_row_attribute

set_row_color

sets color for any row in the component.

<cfset dataItem.set_row_color(color)>

Parameters:

  • color - color of a row

See Also:

  • set_row_style
  • set_row_attribute

set_row_style

sets style for any row of the component.

<cfset dataItem.set_row_style(style)>

Parameters:

  • style - HTML style attributes

See Also:

  • set_row_color
  • set_row_attribute

set_value

sets value of a field.

<cfset dataItem.set_value(name, value)>

Parameters:

  • name - name or alias of the field
  • value - value of the field in question

See Also:

  • get_value
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxTree DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
    • get_check_state
    • get_id
    • get_index
    • get_parent_id
    • get_value
    • set_attribute
    • set_check_state
    • set_id
    • set_image
    • set_kids
    • skip
    • set_value
  • dhtmlxTreeGrid
  • dhtmlxScheduler
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API DataItem Object

dhtmlxTree

get_check_state

returns the state of selected item.

<cfset dataItem.get_check_state()>

Returns:

  • state of checkbox related to the item:
  • '0' - unchecked
  • '1' - checked.

  • '-1' - third (custom) state. See also:

  • set_check_state

get_id

returns id of the item.

<cfset dataItem.get_id()>

See also:

  • set_id

get_index

returns an index of the currently selected item (for example, in grid, it will be an index of row )

<cfset dataItem.get_index()>

Parameters:

  • none.

get_parent_id

returns parent id of selected item.

<cfset dataItem.get_parent_id()>

Parameters:

  • none

get_value

returns value of a field.

<cfset dataItem.get_value(name)>

Parameters:

  • name - name or alias of the field.

See Also:

  • set_value

set_attribute

allows to set some attribute for the item.

<cfset dataItem.set_attribute(name, value)>

Parameters:

  • name - the name of an attribute.
  • value - the value that an attribute is set to.

set_check_state

allows to set the state of a checkbox related to the item.

<cfset dataItem.set_check_state(value)>

Parameters:

  • value - state of the item.

    Valid values are:

  • '0' - unchecked.

  • '1' - checked.

  • '-1' - third custom state. See also:

  • get_check_state

set_id

sets id of the item.

<cfset dataItem.set_id(value)>

Parameters:

  • value - id of the item. See also:

  • get_id

set_image

allows to set image for any item in tree.

<cfset dataItem.set_image(img)>

Parameters:

  • img - relative path to image which will be set for a item. Description:

  • Can be used with variable number of parameters.

<cfset dataItem.set_image(img1,img2,img3)>
  • img1 - image of folder in opened state
  • img2 - image of folder in closed state
  • img3 - image of leaf item

set_kids

allows to mark item as a leaf or branch of tree.

<cfset dataItem.set_kids(is_enabled)>

Parameters:

  • is_enabled - (boolean) specifies whether an item must be marked as a branch.
  • true - item will be marked as a branch.
  • false - item will be marked as a leaf.

skip

ignores the current item while rendering output. Allows to define custom filtering rules.

<cfset dataItem.skip()>

Parameters:

  • none

set_value

sets value of a field.

<cfset dataItem.set_value(name, value)>

Parameters:

  • name - name or alias of the field
  • value - value of the field in question

See Also:

  • get_value
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxTreeGrid DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
    • get_id
    • get_index
    • get_parent_id
    • get_value
    • set_cell_attribute
    • set_cell_class
    • set_cell_style
    • set_id
    • set_image
    • skip
    • set_row_attribute
    • set_row_color
    • set_row_style
    • set_value
  • dhtmlxScheduler
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API DataItem Object

dhtmlxTreeGrid

get_id

returns id of the item.

<cfset dataItem.get_id()>

See also:

  • set_id

get_index

returns an index of the currently selected item (for example, in grid, it will be an index of row )

<cfset dataItem.get_index()>

Parameters:

  • none.

get_parent_id

returns parent id of selected item.

<cfset dataItem.get_parent_id()>

Parameters:

  • none

get_value

returns value of a field.

<cfset dataItem.get_value(name)>

Parameters:

  • name - name or alias of the field.

See Also:

  • set_value

set_cell_attribute

sets attribute for a cell of item.

<cfset dataItem.set_cell_attribute(name,attr,value)>

Parameters:

  • name - name of alias of the cell
  • attr - name of attribute
  • value - value of attribute

See Also:

  • set_cell_style
  • set_cell_class

set_cell_class

sets css class for a cell of item.

<cfset dataItem.set_cell_class(name,value)>

Parameters:

  • name - name or alias of the cell
  • value - css class for the cell

See Also:

  • set_cell_style
  • set_cell_attribute

set_cell_style

sets style for a cell of item.

<cfset dataItem.set_cell_style(style)>

Parameters:

  • style - HTML style attributes.

See Also:

  • set_cell_class
  • set_cell_attribute

set_id

sets id of the item.

<cfset dataItem.set_id(value)>

Parameters:

  • value - id of the item.

See also:

  • get_id

set_image

sets image for all check states of the node in tree.

<cfset dataItem.set_image(img)>

Parameters:

  • img - relative path to image which will be set for the item of tree (relative to the folder with tree's icons).

skip

ignores the current item while rendering output. Allows to define custom filtering rules.

<cfset dataItem.skip()>

Parameters:

  • none

set_row_attribute

sets attribute for any row in the component.

<cfset dataItem.set_row_attribute(attr,value)>

Parameters:

  • attr - name of attribute
  • value - value of attribute

See Also:

  • set_row_style
  • set_row_attribute

set_row_color

sets color for any row in the component.

<cfset dataItem.set_row_color(color)>

Parameters:

  • color - color of a row

See Also:

  • set_row_style
  • set_row_attribute

set_row_style

sets style for any row of the component.

<cfset dataItem.set_row_style(style)>

Parameters:

  • style - HTML style attributes

See Also:

  • set_row_color
  • set_row_attribute

set_value

sets value of a field.

<cfset dataItem.set_value(name, value)>

Parameters:

  • name - name or alias of the field
  • value - value of the field in question

See Also:

  • get_value
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


dhtmlxScheduler DHTMLX Docs

Documentation
  • dhtmlxChart
  • dhtmlxCombo
  • dhtmlxDataView
  • dhtmlxForm
  • dhtmlxGrid
  • dhtmlxTree
  • dhtmlxTreeGrid
  • dhtmlxScheduler
    • get_id
    • get_index
    • get_value
    • set_id
    • set_options
    • skip
    • set_value
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API DataItem Object

dhtmlxScheduler

get_id

returns id of the item.

<cfset dataItem.get_id()>

Parameters:

  • none.

See also:

  • set_id

get_index

returns an index of the currently selected item (for example, in grid, it will be an index of row ).

<cfset dataItem.get_index()>

Parameters:

  • none.

get_value

returns value of a field.

<cfset dataItem.get_value(name)>

Parameters:

  • name - name or alias of the field.

See Also:

  • set_value

set_id

sets id of the item.

<cfset dataItem.set_id(value)>

Parameters:

  • value - id of the item. See also:

  • get_id

set_options

assigns options collection to the column.

<cfset dataItem.set_options(name,options);>

Parameters:

  • name - the name of the column
  • options - an array of options or a connector object

skip

ignores the current item while rendering output. Allows to define custom filtering rules.

<cfset dataItem.skip()>

Parameters:

  • none.

set_value

sets value of a field.

<cfset dataItem.set_value(name, value)>

Parameters:

  • name - name or alias of the field
  • value - value of the field in question

See Also:

  • get_value
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Connector object DHTMLX Docs

Documentation
  • API methods
  • Events
  • DataItem Object
  • Connector object
    • dynamic_loading
    • enable_log
    • is_select_mode
    • render_sql
    • render_table
    • set_encoding
  • DataAction Object
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API

Connector object

dynamic_loading

enable dynamical loading mode for connector

<cfset conn.dynamic_loading(rowsNum)>

Parameters:

  • tree, treegrid - no parameters
  • grid - number of rows which should be initially loaded (the value should be more than number of rows visible in grid, or at least any positive number)
  • combo - maximum number of options which server will send for single data request in autocomplete mode

enable_log

enable logging for connector.

<cfset conn.enable_log("path")>

Parameters:

  • path - absolute or relative path to text file where log will be written.

is_select_mode

returns current active mode.

<cfset conn.is_select_mode()>

Parameters:

  • none.

Returns:

  • true, if select mode is active.
  • false, if update mode is active.

render_sql

configure connector to take data based on provided SQL text.

<cfset conn.render_sql("sql","id","text","extra","relation")>

Parameters:

  • sql - any sql code, which will be used as a base for data selection.
  • id - name of id field.
  • text - comma separated list of data fields.
  • extra - comma separated list of extra fields, optional.
  • relation_id - used for building hierarchy in case of Tree and TreeGrid.

See Also:

  • render_table

render_table

configure connector to take data from single table.

<cfset conn.render_table("table","id","text","extra","relation")>

Parameters:

  • table - name of table.
  • id - name of id field.
  • text - comma separated list of data fields.
  • extra - comma separated list of extra fields, optional.
  • relation_id - used for building hierarchy in case of Tree and TreeGrid.

Description:

  • If you want to render all fields from DB ( except of identity field), you can use simplified command:
<cfset conn.render_table("table")>

See Also:

  • render_sql

set_encoding

allows to set encoding that will be applied to generated XML (default encoding is UTF-8).

<cfset conn.set_encoding("iso-8859-1")>

Parameters:

  • encoding name.
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DataAction Object DHTMLX Docs

Documentation
  • API methods
  • Events
  • DataItem Object
  • Connector object
  • DataAction Object
    • add_field()
    • error()
    • get_data()
    • get_id()
    • get_new_id()
    • get_status()
    • get_value()
    • invalid()
    • remove_field()
    • set_response_attribute()
    • set_response_text()
    • set_response_xml()
    • set_status()
    • set_value()
    • success()
Start Client-Server Communication ColdFusion Connector ColdFusion Connector API

DataAction Object

add_field()

allows to register field for usage while INSERT/UPDATE/DELETE operation.

<cfset action.add_field(name,value)>

Parameters:

  • name - name or alias of the field
  • value - value of the field in question

See also:

  • remove_field

error()

marks provided data as invalid and cancels default UPDATE processing (invalid record will be highlighted in red bold font).

<cfset action.error()>

Parameters:

  • none

See Also:

  • invalid

get_data()

returns hash of data values that will take part in INSERT/UPDATE/DELETE operations.

<cfset action.get_data()>

Parameters:

  • none.

get_id()

returns id of the currently selected record.

<cfset action.get_id()>

Parameters:

  • none.

get_new_id()

returns ID, received after INSERT operation (valid for afterProcessing event only).

<cfset action.get_new_id()>

Parameters:

  • none.

get_status()

returns action type of the item.

<cfset action.get_status()>

Returns:

  • update, insert, delete, error or custom status set through set_status() method Parameters:

  • none.

See Also:

  • set_status

get_value()

returns value of a field.

<cfset action.get_value(name)>

Parameters:

  • name - name of column or alias.

See Also:

  • set_value

invalid()

marks provided data as invalid and cancels default UPDATE processing (invalid record will be highlighted in bold font).

<cfset action.invalid()>

Parameters:

  • none.

See Also:

  • error

remove_field()

allows to remove one of default fields from INSERT/UPDATE/DELETE operation.

<cfset action.remove_field(name,value)>

Parameters:

  • name - name or alias of the field.
  • value - value of the field in question.

See Also:

  • add_field

set_response_attribute()

Allows to define custom attribute which will be added to the related action tag in XML response.

<cfset action.set_response_attribute(name,value)>

Parameters:

  • name - name of the attribute.
  • value - value of the attribute in question.

See Also:

  • set_response_text
  • set_response_xml

set_response_text()

Allows to set string that will be included in response

<cfset action.set_response_text(text)>

Parameters:

  • text - any text value that will be returned on client-side with related action.

See Also:

  • set_response_xml
  • set_response_attribute

set_response_xml()

Allows to set xml-string that will be included in response (if you need to provide just a text - use set_response_text() method).

<cfset action.set_response_xml(text)>

Parameters:

  • text - any text value that will be returned on client-side with related action.

See Also:

  • set_response_text
  • set_response_attribute

set_status()

sets the status of operation.

<cfset action.set_status(value)>

Parameters:

  • value - status of operation.

    It can be either some predefined value (updated, inserted, deleted, error) or any custom status. Beware, when you set custom status you cancel default data processing.

See Also:

  • get_status

set_value()

sets value of a field.

<cfset action.set_value(name,value)>

Parameters:

  • name - name or alias of the field
  • value - value of the field in question

See Also:

  • get_value

success()

confirms that operation has been executed correctly and cancels any default data processing.

<cfset action.success()>

Parameters:

  • in case INSERT operation: a new ID of element ( which will be updated on client-side )
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


General Idea of dhtmlxConnector DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
    • General list of connectors
    • KeyGridConnector
    • TreeGroupConnector and TreeGridGroupConnector
    • TreeMultitableConnector and TreeGridMultitableConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

General Idea of dhtmlxConnector

dhtmlxConnector is a server-side library that lets you access data sources. It consists of individual component-specific connectors and a set of additional ones providing advanced functionality.

A dhtmlxConnector's job is to provide necessary data exchange conditions so that you do not have to deal with the technical details of working with various data stores, systems or services. As such, each type of dhtmlxConnector is designed to use a specific API.

As the library is server-side, it provides different manipulations just on server backend:

  • loading data (static or dynamic) from database, File System.
  • server-side filtering, sorting and validation.

When you need to deal with the client side as well, i.e. pass data back to server, you should use DataProcessor additionally (for more details of this topic, see the chapter 'Client-side requirement - dataProcessor').

General list of connectors

Component-specific:

  • ChartConnector (relates to dhtmlxChart)
  • ComboConnector (relates to dhtmlxCombo)
  • DataViewConnector (relates to dhtmlxDataView)
  • FormConnector (relates to dhtmlxForm)
  • GridConnector (relates to dhtmlxGrid)
  • SchedulerConnector (relates to dhtmlxScheduler)
  • TreeConnector (relates to dhtmlxTree)

  • TreeGridConnector (relates to dhtmlxTreeGrid) Additional (most important):

  • KeyGridConnector

  • Tree(TreeGrid)GroupConnector
  • Tree(TreeGrid)MultitableConnector

Throughout the documentation you'll see examples in which 'GridConnector' is used. If your use a different component, just replace GridConnector with the appropriate connector type.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


KeyGridConnector DHTMLX Docs

Documentation
  • KeyGridConnector
  • TreeGroupConnector and TreeGridGroupConnector
  • TreeMultitableConnector and TreeGridMultitableConnector
Start Client-Server Communication ColdFusion Connector General Idea of dhtmlxConnector

KeyGridConnector

Normal grid connector expects that target table has some autogenerated ID field, but, in some cases, data needs to be loaded and saved from database table which doesn't have such autofilled ID.

Normal grid connector can be used for data loading from such tables, but won't be able to save data back. KeyGridConnector can resolve such problem (use it instead of GridConnector):

<cfset grid = createObject("component","dhtmlxConnectors.KeyGridConnector").init("#datasource#","MySQL")>
<cfset grid.render_table("mytable","name","name,address,phone")>

So, there are two differences from the normal GridConnector:

  • name of connector class (GridConnector->KeyGridConnector).
  • one of data fields is used as ID
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


TreeGroupConnector and TreeGridGroupConnector DHTMLX Docs

Documentation
  • KeyGridConnector
  • TreeGroupConnector and TreeGridGroupConnector
  • TreeMultitableConnector and TreeGridMultitableConnector
Start Client-Server Communication ColdFusion Connector General Idea of dhtmlxConnector

TreeGroupConnector and TreeGridGroupConnector

Default connector for Tree and TreeGrid expects that data in DB is stored with child-parent key relation. But, in some cases, tree or treegrid need to be shown from plain data (by grouping it). Such task can be resolved with help of the TreeGroupConnector or TreeGridGroupConnector.

For example, a table 'products' grouping by category. As result, the top level are 'categories', the second level - 'products', related to the category.

//tree
<cfinclude template="../config.cfm">
<cfset tree = createObject("component","dhtmlXConnectors.TreeGroupConnector").init("#datasource#","MySQL")>
<cfset tree.render_table("products2","id","product_name","","category")>

//treeGrid
<code cfm>
<cfinclude template="../config.cfm">
<cfset tree = createObject("component","dhtmlXConnectors.TreeGridGroupConnector").init("#datasource#","MySQL")>
<cfset tree.render_table("products2","id","product_name,scales,colour","","category")>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


TreeMultitableConnector and TreeGridMultitableConnector DHTMLX Docs

Documentation
  • KeyGridConnector
  • TreeGroupConnector and TreeGridGroupConnector
  • TreeMultitableConnector and TreeGridMultitableConnector
    • Tree
    • TreeGrid
Start Client-Server Communication ColdFusion Connector General Idea of dhtmlxConnector

TreeMultitableConnector and TreeGridMultitableConnector

Connectors will work only if dynamic loading mode on client-side is enabled.

In many cases, tree or treegrid need to be built from multiple tables (each table represent separate level of tree/treegrid). For this purpose should be used TreeMultitableConnector/TreeGridMultitableConnector (instead of TreeConnector/TreeGridConector).

Tree

<cfinclude template="../config.cfm">
<cfset tree = createObject("component","dhtmlXConnectors.TreeMultiTableConnector").init("#datasource#","MySQL")>
<cfset tree.setMaxLevel(3)>
<cfset level = tree.get_level()>
<cfswitch expression="#level#">
    <cfcase value="0">
        <cfset tree.render_table("projects2", "project_id", "project_name, project_dsc", "", "")>
    </cfcase>
    <cfcase value="1">
        <cfset tree.render_sql("SELECT teams2.team_id, teams2.team_name, project_team2.project_id FROM teams2 INNER JOIN project_team2 ON teams2.team_id=project_team2.team_id", "team_id", "team_name", "", "project_id")>
    </cfcase>
    <cfcase value="2">
        <cfset tree.render_table("developers2", "developer_id", "developer_name,developer_email", "", "developer_team")>
    </cfcase>
    <cfcase value="3">
        <cfset tree.render_table("phones2", "phone_id", "phone,phone_type", "", "phone_developer")>
    </cfcase>
</cfswitch>

TreeGrid

<cfinclude template="../config.cfm">
<cfset tree = createObject("component","dhtmlXConnectors.TreeGridMultitableConnector").init("#datasource#","MySQL")>
<cfset tree.setMaxLevel(3)>
<cfset level = tree.get_level()>
<cfswitch expression="#level#">
    <cfcase value="0">
        <cfset tree.render_table("projects2", "project_id", "project_name, project_dsc", "", "")>
    </cfcase>
    <cfcase value="1">
        <cfset tree.render_sql("SELECT teams2.team_id, teams2.team_name, project_team2.project_id FROM teams2 INNER JOIN project_team2 ON teams2.team_id=project_team2.team_id", "team_id", "team_name", "", "project_id")>
    </cfcase>
    <cfcase value="2">
        <cfset tree.render_table("developers2", "developer_id", "developer_name,developer_email", "", "developer_team")>
    </cfcase>
    <cfcase value="3">
        <cfset tree.render_table("phones2", "phone_id", "phone,phone_type", "", "phone_developer")>
    </cfcase>
</cfswitch>

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Initializing ColdFusion Connector DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
    • Client side
    • Server side
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Initializing ColdFusion Connector

To use the functionality of DHTMLX Connector, first you should initialize it.

Generally, both client- and server-sides are concerned in it.

Client side

If you need just load data from database (with or without data preprocessing)

1) Specify connector file in the load method of a component.

//index.html
myGrid = new dhtmlXGridObject("someContainer");// initializes grid
...
mygrid.load("myconnector.cfm");

If you need to perform any update operations

1) Specify connector file in the load method of a component.

2) Initialize dhtmlxDataProcessor on the client side (read more about it here).

//index.html
myGrid = new dhtmlXGridObject("someContainer");// initializes grid
...
myGrid.load("my_connector.php");
myDP = new dataProcessor("myconnector.cfm");// initializes dhtmlxDataProcessor
myDP.init(myGrid);

Samples Client-Side Initialization

Server side

In our examples we use mapping “dhtmlXConnectors” which links to the folder with cfc files.

Preparations:

  1. Create datasource in CF Admin (further, we will use “datasource” variable for this).
  2. Put connectors into the folder that can be achieved by your custom cf templates.

Main steps:

  1. Include the appropriate connector file into the page.
  2. Instantiate the connector object. Linking variable is a mandatory parameter in all constructors. The second parameter(database type) is optional. By default it's “MySQL”.
  3. The last step is data configuration.
<cfinclude template="../config.cfm">// connector file
<cfset grid = createObject("component","dhtmlxConnectors.GridConnector").init(
    "#datasource#","MySQL")>
<cfset grid.render_table("mytable","item_id","item_nm,item_cd")>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Basic Loading DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
    • Loading from database table
    • Loading from File System
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Basic Loading

In this chapter you'll find base information concerning static loading of data:

  • Loading from a database table
  • Loading from File System

In order to load data correctly, your 'id' field in the database must be autoincrement.

Loading from database table

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

Loading characteristics are defined at the stage of component configuration.

There are 2 ways to specify the desired data:

  • by the render_table() method when you work with one table
  • by the render_sql() method when you work with several tables (to implement complex queries)

Work with one table

When all necessary data is placed in one database table you should use the render_table() method:

<cfset grid.render_table("grid50000","item_id","item_nm,item_cd")>

Parameters:

  • database table name
  • name of the identity field (optional)
  • a list of fields which should be used as values of the component item (cells of grid, item label in tree, text of option in combo)
  • a list of extra fields (learn more about extra fields here) If you want to render all fields from DB (except for the key field), you can use a simplified command:
<cfset grid.render_table("grid50000")>

That's enough to make connector implement select, insert, update and delete operations.

Work with several tables

If your SQL statement contains more than one table, the connector won't be able to generate insert/update/delete operations correctly and you will need to make one of the following actions:

  1. Define sql for each operation manually
  2. Use server-side events to define your own processing logic
  3. Define different configs for select and update operations

The 3rd approach is shown in the code snippet below:

<!--- code for loading data --->
<cfif grid.is_select_mode()>
   <cfset grid.render_sql(
        "Select * from tableA,
        tableB  where  tableA.id=tableB.id",
        "a.id","name,price,other"
   )>
<!--- code for other operations - i.e. update/insert/delete --->
<cfelse>
    <cfset grid.render_table("tableA","id","name,price")>
</cfif>

With such init code grid will be loaded with three columns of data from 2 tables, but during saving only data from the first table will be saved.

Complex queries

You are allowed to use any SQL statements to populate a dhtmlx component through dhtmlxConnector. In this case you should use the render_sql() method:

<cfset grid.render_sql(
    "SELECT * from tableA INNER JOIN tableB  ON tableA.id=tableB.id",
    "",
    "name,price"
)>

Parameters:

  • sql statement
  • name of the identity field (optional)
  • a list of fields which should be used as values of the component item (cells for grid, item label for tree, text of option for combo)
  • a list of extra fields (learn more about extra fields here)
  • parent ID field name for hierarchical structures (required for tree and treegrid)

In case your SQL query was against a single table, it is quite probable that insert/update/delete operations do not require any additional code. dhtmlxConnector will parse your SQL and generate insert/update/delete statements based on the used table and fields' names.

Extra data

The last parameter of the render_sql and render_table methods allows defining a list of fields which will be extracted from database table but won't be sent to the client side.

These fields can be used as attributes or flags, mapped to different properties of records (userdata, row styles, images, etc.).

<cfset grid.render_table("tableA","id","name,price","extra1,extra2")>
<!--- or --->
<cfset grid.render_sql(
    "Select * from tableA, tableB  where  tableA.id=tableB.id",
    "table_a_id",
    "name,price,other",
    "extra1,extra2"
)>

extra1 and extra2 fields will be available in all server-side events but won't be sent to the client side, and won't be included in update/insert operations.

Tree and TreeGrid specificity

In case of Tree and TreeGrid, both the render_sql and render_table methods accept one more parameter - relation ID. For default treegrid hierarchy it's the name of the field which will be used to link parent and child records.

<cfset tree.render_table("tableA","id","name,price","","parent_id")>
<!--- or --->
<cfset tree.render_sql(
    "Select * from tableA, tableB  where  tableA.id=tableB.id",
    "a.id",
    "name,price,other",
    "",
    "parent_id"
)>

Aliases

To make the use of extracted data handier you can use aliases for DB field names (makes sense only if you use server-side events):

<cfset grid.render_table("tableA","id","name,price(product_price)")>
<!--- or --->
<cfset grid.render_sql(
    "Select *,tableA.id as aid from tableA, tableB  where  tableA.id=tableB.id",
    "tableA.id(aid)",
    "name,price(product_price),other"
)>

Back to top

Loading from File System

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

Starting from version 1.0, dhtmlxConnector allows using FileSystem as datasource. It can be used with any client-side component, but the most common use-cases are grid and tree:

<cfset grid = createObject(
    "component",
    "dhtmlxConnectors.GridConnector").init("","FileSystem")>
<cfset grid.render_table(
    "../",
    "safe_name",
    "filename,full_filename,size,name,extention,date,is_folder"
)>

In the code snippet above, grid is filled with info about files in the parent folder of script location.

Parameters of the 'render-table' method:

  • a folder, for which data listing is required
  • the field's id. Leave it empty or use safe_name as the ID of the file
  • a list of fields, possible values are:
    • filename - name of the file
    • full_filename - full path to the file
    • size - size of the file in bytes
    • name - name part of the file name
    • extension - extension part of the file name
    • date - timestamp of the file
    • is_folder - the file/folder flag

Limiting files in output

There are 3 ways to limit files in output:

  1. by extension type
  2. by regexp pattern
  3. by meta-type

by extension type:

<cfinvoke component="dhtmlxConnectors.FileSystemTypes" method="getInstance" returnvariable="fileTypes"></cfinvoke>
<cfset fileTypes.addExtentionNot('docx')>

by regexp pattern:

<cfinvoke component="dhtmlxConnectors.FileSystemTypes" method="getInstance" returnvariable="fileTypes"></cfinvoke>
<cfset fileTypes.addPattern('com[.]*')>

by meta-type:

The following meta-types can be used:

  • image - image files
  • document - doc, xls, txt, rtf
  • web - php, html, js, css
  • audio - mp3, wav, ogg
  • video - avi, mpg, mpeg, mp4
  • only_dir - folders
<cfinvoke component="dhtmlxConnectors.FileSystemTypes" method="getInstance" returnvariable="fileTypes"></cfinvoke>
<cfset fileTypes.setType('web')>

Back to top

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Dynamic Loading DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
    • Common
    • Tree/TreeGrid specific
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Dynamic Loading

Common

Dynamic Loading mode allows loading data partially, not all at once, by a client-side request. It decreases initial loading time and loading of the server.

To work correctly, the related mode should be enabled on the client side:

  • grid - smart rendering and paging modes
  • treegrid - dynamic branch loading mode
  • tree - dynamic branch loading mode
  • combo - partial autocomplete (you don't need it for normal autocomplete)
  • dataview - dynamiс scrolling or dynamic paging

To activate the mode you should use the method dynamic_loading():

<cfset conn.dynamic_loading(100)>

Parameters:

  • none for tree,treegrid.
  • number of rows which should be initially loaded (the value should be greater than a number of rows visible in the grid, or at least any positive number) in a grid.
  • maximum number of options which the server will send to a combo in the 'autocomplete mode' for a single data request.

In the 'dynamic loading' mode you can't use GROUP BY within SQL query

Tree/TreeGrid specific

Normally, the connector makes all operations automatically and doesn't need customization.

But in case of the dynamic loading into Tree/TreeGrid, a database can contain a field indicating if the current item is a branch or a leaf. In the beforeRender event handler you are allowed to mark an item as a leaf or a branch (it decreases the number of SQL queries and increases the performance).

<cffunction name="custom_define">
    <cfargument name="item">
    <cfif ARGUMENTS.item.get_value("is_a_branch")>
        <cfset data.set_kids(0)>
    <cfelse>
        <cfset data.set_kids(1)>
    </cfif>
</cffunction>
<cfset tree.event.attach("beforeRender",custom_define)>

The same approach can be used for the non-dynamic mode of tree/treeGrid as well. It's not obligatory but lets you increase data generation performance.

Related samples:

  • 01_basic_connector.cfm - 1.72s - default loading
  • 01p_basic connector.cfm - 0.344s - with custom code for kids flag setting
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Filtering DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
    • URL manipulation
    • In-header filter types
    • Custom filters (using the beforeRender event)
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Filtering

There are 3 ways to implement server-side filtering:

  • by specifying additional parameters in URL
  • by using in-header filter types during the component configuration
  • by means of the beforeRender event

Note, the server-side filtering of dhtmlxTreeGrid doesn't maintain open states.

URL manipulation

APPLICABLE TO:Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

You can control which data was loaded into the component by specifying additional parameters in URL.

  • filtering by one field
grid.load("some.cfm?connector=true&dhx_filter[1]=mask");

With such a url, data will be taken with an additional rule.

WHERE field_for_column_1 LIKE %mask%
  • filtering by multiple fields
grid.load("some.cfm?connector=true&dhx_filter[1]=mask&dhx_filter[3]nother");

For all the components, except for dhtmlxGrid you should provide the exact field's name instead of the column's index.

Pay attention that such filtering is non-secure and if you need to hide some data - be sure to define such limitation on the server side, not as a part of URL.

In-header filter types

APPLICABLE TO: Grid, TreeGrid, Combo

To enable the server-side filtering you can use one of the following in-header filter types while configuring dhtmlxGrid/dhtmlxTreeGrid on the client side:

  • #connector_text_filter - a text filter. Retrieves values which contain a mask defined through a text field
  • #connector_select_filter - a select filter. Retrieves values which contain a mask defined through a dropdown list of possible values
mygrid.setHeader("Column A, Column B");
mygrid.attachHeader("#connector_text_filter,#connector_select_filter");

Text filter

The use of the text filter doesn't require any additional configuration code. Grid/TreeGrid will automatically send data about a newly entered text and filter server-side data using the %mask% pattern.

If you need to change the filtering pattern or implement a more advanced logic - the beforeFilter event should be used.

  • default filtering logic
<cffunction name="custom_filter">
    <cfargument name="filter_by">
        <!--- WHERE some_field LIKE 'value' --->
    <cfif NOT ArrayLen(ARGUMENTS.filter_by.rules)>
        <cfset ARGUMENTS.filter_by.add("some_field","value","LIKE")>
    </cfif>
</cffunction>
<cfset conn.event.attach("beforeFilter",custom_filter)>
  • redefined filtering logic
<cffunction name="custom_filter">
  <cfargument name="filter_by">
  <!--- change WHERE some_field LIKE '%value%' to the WHERE some_field gt 'value' --->
  <cfset var index = ARGUMENTS.filter_by.index("some_field")>
  <!--- there is a client-side input for the filter --->
  <cfif index>
    <cfset ARGUMENTS.filter_by.rules[index]["operation"]=">">
  </cfif>
</cffunction>
<cfset conn.event.attach("beforeFilter",custom_filter)>

Through rules[index] you can refer to:

  • the name of a field (rules[index]["name"]="age")
  • the value of a field (rules[index]["value"]="30")
  • the type of an operation (rules[index]["operation"]=">")

Select filter

By default, grid/treegrid will use DISTINCT select against the related field, and fetch all possible options.

If you need to define a custom list of options you can use one of 2 ways:

  • a hardcoded list
<cfset param = structNew()>
<cfset param["1"] = "one">
<cfset param["2"] = "two">
<cfset param["3"] = "three">
<cfset grid.set_options("item_nm",param)>
<cfset grid.render_table("grid50","item_id","item_nm,item_cd")>
  • a list created on the base of a different table
<cfset filter1 = createObject(
    "component",
    "dhtmlxConnectors.OptionsConnector").init("#datasource#","MySQL")>
<cfset filter1.render_table("countries","item_id","item_id(value),item_nm(label)")>
<cfset grid.set_options("item_nm",filter1)>
<cfset grid.render_table("grid50","item_id","item_nm,item_cd")>

You can use both the render_table and render_sql methods for OptionsConnector object, the same as for any normal connector.

Beware that the name of the field, used in the select filter needs having the (value) alias.

Custom filters (using the beforeRender event)

APPLICABLE TO: Grid, Combo

By using the beforeRender event it's possible to define filtering rules as PHP code (doesn't work for dyn. modes).

<cffunction name="custom_filter">
    <cfargument name="data">
    <cfif ARGUMENTS.data.get_value("some") lt 0>
                <!--- not include in output --->
        <cfset ARGUMENTS.data.skip()>
    </cfif>
</cffunction>
<cfset conn.event.attach("beforeRender",custom_filter)>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Formatting/Changing Data before Loading DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
    • Basic formatting methods
    • Common usage
    • Data formatting
    • Using extra fields
    • Tree/TreeGrid specificity
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Formatting/Changing Data before Loading

Basic formatting methods

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

When you need to update values which were returned from a database table or set some specific formatting before sending data to the client side, you should use the beforeRender event handler.

Common usage

<cfinclude template="../config.cfm">
<cffunction name="color_rows">
    <cfargument name="row">
    <cfif ARGUMENTS.row.get_index() mod 2>
        <cfset ARGUMENTS.row.set_row_color("red")>
    </cfif>
</cffunction>
<cfset grid = CreateObject(
    "component",
    "dhtmlxConnectors.GridConnector").init("#datasource#","MySQL")>
<cfset grid.event.attach("beforeRender",color_rows)>
<cfset grid.render_table("grid50000","item_id","item_nm,item_cd")>
  • color_rows function sets colors for rows subject to their indices
  • during the data generation, for each record outputted for the client side the beforeRender event will be executed, i.e. color_rows function will be called for each record
  • row is an instance of GridDataItem object related to the current record

Data formatting

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

<!--- render field as details link --->
<cffunction name="formatting">
  <cfargument name="row">
  <cfset var data = ARGUMENTS.row.get_value("some_field")>
  <cfset ARGUMENTS.row.set_value(
    "some_field",
    "<a href='details.cfm?id=#data#'>Details</a>"
  )>
  <!--- formatting date field --->
  <cfset data = ARGUMENTS.row.get_value("other_field")>
  <cfset ARGUMENTS.row.set_value(
    "other_field",
    DateFormat(lsParseDateTime(data),
    "mm-dd-yyyy")
  )>
</cffunction>
<cfset grid = CreateObject(
"component",
"dhtmlxConnectors.GridConnector").init("#datasource#","MySQL"
)>
<cfset grid.event.attach("beforeRender",formatting)>
  • the get_value and set_value methods allow you to get or set value of any field related to the record (it doesn't affect actual values in DB)
  • if an alias was used during data configuration, you need to use it instead of real db field name as the first parameter of the get/set command.

Using extra fields

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

More complex formatting rules can be defined by using extra fields during the configuration.

<cffunction name="formatting">
    <cfargument name="row">
    <!--- set row color --->
    <cfset ARGUMENTS.row.set_row_color(ARGUMENTS.row.get_value("color"))>
    <!--- save in userdata --->
    <cfset ARGUMENTS.row.set_userdata("some_data",ARGUMENTS.row.get_value("count"))>
</cffunction>
<cfset grid = CreateObject(
"component",
"dhtmlxConnectors.GridConnector").init("#datasource#","MySQL"
)>
<cfset grid.event.attach("beforeRender",formatting)>
<cfset grid.render_table("some_table","id","name,price","color,count")>
  • field color isn't outputted to the client side, but used to define the property of a row.
  • during the update/insert operation only the 'name' and 'price' columns can be changed, the 'color' one will stay untouched.
  • the 'count' field will be sent to the client side as userdata of the row, and it will be possible to access it on the client side through the related data.

Tree/TreeGrid specificity

APPLICABLE TO: Tree, TreeGrid

TreeGrid provides TreeGridDataItem and Tree provides TreeDataItem as the input parameter of the beforeRender event handler. Both of them support base operations and a few specific ones.

<cffunction name="custom_format">
    <cfargument name="item">
        <cfif ARGUMENTS.item.get_value("complete") gt 75>
        <cfset ARGUMENTS.item.set_check_state(1)>
    </cfif>
        <cfif ARGUMENTS.item.get_value("duration") gt 10>
        <cfset ARGUMENTS.item.set_image("true.gif")>
        <cfelse>
                <cfset ARGUMENTS.item.set_image("false.gif")>
    </cfif>
</cffunction>

<cfset tree.event.attach("beforeRender",custom_format)>
  • the set_image method allows setting an image of a tree element (for treegrid it accepts the only parameter, while for tree it can be 3 different images for 3 states of a tree's item)
  • the set_check method exists only in TreeDataItem object and allows setting the state of the related checkbox (tree needs having checkboxes enabled in js. configuration code as well)
  • the beforeRender event can be used in dynamic Tree and TreeGrid to define which elements of hierarchy are branches and which ones are leafs (see details here).
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Sorting DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
    • URL manipulation
    • Sorting type 'connector'
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Sorting

There are 2 ways to implement server-side sorting:

  • by specifying additional parameters in URL
  • by using the sorting type 'connector' during the component configuration

URL manipulation

APPLICABLE TO:Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

You can control how data will be sorted inside of a column by specifying additional parameters in URL.

//ORDER by field_2 ASC
grid.load("some.cfm?connector=true&dhx_sort[2]=asc");
//ORDER by field_2 ASC, field_3 DESC
grid.load("some.cfm?connector=true&dhx_sort[2]=asc");

Sorting type 'connector'

APPLICABLE TO:Grid, TreeGrid

To sort grid/treegrid content with connectors you need to use 'connector' as a sorting type during the grid initialization.

myGrid.setColSorting("connector,str,na");

In the code snippet above, the first column will be sorted on the server side with connectors, the second one as a string on the client side, the third column will be non-sortable.

By assigning to sorting type 'connector' you just 'say' that sorting will be implemented on the server side.

To define the way, 'behaviour' of sorting, you should use the beforeSort event.

This event doesn't allow writing a custom sorting logic, but you can affect SORT BY clause of the generated SQL request.

Default sorting by one field

<cffunction name="custom_sort">
    <cfargument name="sorted_by">
        <!--- SORT BY some_field ASC --->
    <cfif NOT ArrayLen(ARGUMENTS.sorted_by.rules)>
        <cfset ARGUMENTS.sorted_by.add("some_field","ASC")>
    </cfif>
</cffunction>
<cfset conn.event.attach("beforeSort",custom_sort)>

Default sorting by multiple fields

<cffunction name="custom_sort">
    <cfargument name="sorted_by">
        <!--- SORT BY some_field ASC, some_other ASC --->
    <cfif ArrayLen(ARGUMENTS.sorted_by.rules)>
        <cfset ARGUMENTS.sorted_by.add("some_field","ASC")>
                <cfset ARGUMENTS.sorted_by.add("some_other","ASC")>
    </cfif>
</cffunction>
<cfset conn.event.attach("beforeSort",custom_sort)>

Custom sorting rule

<cffunction name="custom_sort">
    <cfargument name="sorted_by">
        <!--- SORT BY LENGTH(some_field) --->
         <cfset ARGUMENTS.sorted_by.add("LENGTH(taskName)")>
</cffunction>
<cfset conn.event.attach("beforeSort",custom_sort)>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Client-Side Requirement - dataProcessor DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
    • Files to include on the client side
    • Initializing and linking to connector
    • Validation
    • Changing default processing
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Client-Side Requirement - dataProcessor

The connector itself lets just pass data from the server side to the client side.

When you need to pass data back (e.g. you've updated a record and want to save updates in the database) you should use dataProcessor additionally.

Shortly, data exchange with dataProcessor can be characterized as follows:

1) After you've made some changes the client sends a query to the server. The query is passed with one of the following statuses:

  • updated
  • inserted
  • deleted

2) The server tries to implement the required query. If the operation has been performed successfully, the server returns the same status it had got. Otherwise, the "error" status is returned.

3) While exchanging, data undergoes default processing both on the server side and the client side, i.e. data will be updated/inserted/deleted automatically (just initialize dataProcessor and dhtmlxConnector), no additional code needs to be added. You can affect this default processing by means of events (see details below).

Files to include on the client side

If you use the 'dhtmlxSuite' package (dhtmlx.js, dhtmlx.css code files) - you don't need to add any additional files.

But if you use the components standalone you should add one more file - dataprocessor.js.

Beware, dataprocessor.js should be included BEFORE connector.js.

Initializing and linking to connector

To initialize dataProcessor you should write 2 commands:

var dp = new dataProcessor(url);
dp.init(mygrid);

To link dataProcessor with connector you should specify the connector file as a parameter of the constructor:

dp = new dataProcessor("myconnector.cfm");
dp.init(mygrid);

Validation

Client-side validation

Dataprocessor allows validating data before sending to the server side (see details here).

Server-side validation

You may see the details of the server-side validation in the related chapter of this documentation.

Changing default processing

As it was mentioned before, to affect the default data processing either on the server side or on the client side, you should use events (they can be either dataProcessor or dhtmlxConnector events).

Changing default data processing on the server side

To affect the server-side processing you should use one of the following events of dhtmlxConnector:

  • beforeUpdate Event
  • beforeInsert Event
  • beforeDelete Event
  • beforeProcessing Event

Changing default data processing on the client side

Changing on the client side can be done in one of the following ways:

1) On the server side through handler functions of dhtmlxConnector events:

  • afterUpdate Event
  • afterInsert Event
  • afterDelete Event
  • afterProcessing Event

2) On the client side through handler functions of dataProcessor events:

  • onBeforeUpdate
  • onAfterUpdate

3) On the client side through the dataProcessor's method defineAction().

The method allows defining a handler function of the specified status.

dp.defineAction("update",function(sid,response){
...
return true;// return false to cancel default data processing at all
})

  • meanwhile, you can change status of the server-side response through the dhtmlxConnector's method set_status() and assign the appropriate processing through defineAction().

    The status can be changed in 2 ways:

    1. by setting another predefined status ('updated', 'inserted', 'deleted'). In this case you just change default processing, write some additions to it.
    2. by setting a custom status on the server side. In this case you cancel default processing at all and should define all actions on the client side by yourself.
    <cfset action.set_status(value)>

    For more details see the chapter 'Custom status'

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Making Queries DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
    • Simple queries
    • Complex queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Making Queries

Simple queries

Applicable to: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

By default, the connector generates all INSERT/UPDATE/DELETE queries automatically, based on configuration.

For more details on this topic, see the 'Basic Loading' chapter.

In case of dnd, connector will process an action as a sequence of 'insert' and 'delete' operations.

Complex queries

When you need to define your own logic you should use one of two ways:

  • defining custom SQL code for operation
  • using server-side events to customize operations

Custom queries for an action

Applicable to: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

You can define your own SQL code for a specific action (INSERT, UPDATE or DELETE) as follows:

<cfset grid.sql.attach(
    "Update",
    "Update tableA set name='{name}',
    price={price} where id={id}"
)>
<!--- ... --->
<cfset grid.render_sql(" .. ","id","price,name")>

Parameters:

  • an action's name. Possible values are: 'Update', 'Insert', 'Delete'
  • SQL statement. It can use fields(or their aliases) which were mentioned in the render_sql or render_table method while loading data.

Using server-side events

Applicable to: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

To customize operations you can use the following server-side events:

  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • beforeProcessing
<!--- data preprocessing before update --->
<cffunction name="my_update">
    <cfargument name="data">
        <cfset var price = ARGUMENTS.data.get_value("price")>
    <cfset ARGUMENTS.data.set_value("price","10")>
</cffunction>
<cfset conn.event.attach("beforeUpdate",my_update)>

<!--- including additional field to request --->
<cffunction name="my_update">
    <cfargument name="data">
    <cfset ARGUMENTS.data.add_field("userId",1)>
</cffunction>
<cfset conn.event.attach("beforeUpdate",my_update)>

<!--- fully custom code --->
<cffunction name="my_update">
  <cfargument name="data">
  <cfset var price = ARGUMENTS.data.get_value("price")>
  <cfset var id = ARGUMENTS.data.get_value("id")>
  <cfset request.conn.sql.query("UPDATE some_table SET price='#price#' where id=#id#")>
  <cfset ARGUMENTS.data.success()>
</cffunction>
<cfset request.conn.event.attach("beforeUpdate",my_update)>
<!--- we use 'request' scope to access connector within custom event--->
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Multi-User Sync DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
    • Client side
    • Server side
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Multi-User Sync

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form

Starting from version 1.0, dhtmlxConnector can work in multi-user mode that allows users see changes of each other in real-time.

To enable the mode you need to write additions both fro the client- and the server-sides:

Client side

1) init component with dataprocessor (if it hasn't been initialized yet)

dp = new dataProcessor("myconnector.cfm");
dp.init(mygrid);

2) call the setAutoUpdate() method where input parameter is the delay between update calls

dp.setAutoUpdate(2000);

Server side

1) call the enable_live_update() method

<cfinclude template="../config.cfm">
<cfset grid = createObject(
  "component",
  "dhtmlXConnectors.GridConnector"
).init("#datastore#","MYSQL")>
<!--- this line! --->
<cfset grid.enable_live_update('actions_table')>

"actions_table" - table in database, which will be used for sync. data storage.

It should have the next structure:

CREATE TABLE `actions_table` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `dataId` int(11) NOT NULL,
  `type` varchar(255) NOT NULL,
  `user` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM;
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Security DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Security

dhtmlxConnector is open to external access of other programs and any external user is allowed to change data in database.

Thus, adding some kind of session-based authentication is strongly recommended.

The built-in security manager allows limiting connector to certain operations.

 <!--- blocks Select action --->
<cfset grid.access.deny("read")>
 <!--- blocks Insert action --->
<cfset grid.access.deny("add")>
 <!--- blocks Update action --->
<cfset grid.access.deny("edit")>
 <!--- blocks Delete action --->
<cfset grid.access.deny("delete")>

By default, connector allows all operations.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Validation DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
    • Сommon
    • Value checking
    • Processing in case of validation error
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Validation

Before saving data on the server you can validate it and assign a handler function for any gotten response.

Shortly, validation contains 2 key points:

  1. value checking
  2. processing in case of validation error

Сommon

To implement the server-side validation of incoming data you can use the following events:

  • beforeUpdate
  • beforeInsert
  • beforeDelete
  • beforeProcessing

The beforeProcessing event occurs for all types of operations while other events occur only for related operations, i.e. you can set different validation rules for different operations or for all of them at once.

The event will receive DataAction object as the parameter. This object can be used to retrieve related data and allow/deny an operation (please note, it contains only the data which was received from the client side, not all the data related to the record).

Value checking

To check the value of a field you should use the method get_value()

<cffunction name="validate">
    <cfargument name="data">
    <cfif ARGUMENTS.data.get_value("some") eq "">
        ...
    </cfif>
</cffunction>
<cfset conn.event.attach("beforeProcessing",validate)>

Processing in case of validation error

In case of error you can choose one of two ways:

1) Use the predefined methods for error processing on the client side, i.e. set:

  • data.invalid() (invalid record will be highlighted by the bold font)
  • data.error() (invalid record will be highlighted by the red bold font)

The difference between methods in question consists just in the way of highlighting.

<cffunction name="validate">
    <cfargument name="data">
    <cfif ARGUMENTS.data.get_value("some") eq "">
        <cfset ARGUMENTS.data.invalid()>
    </cfif>
</cffunction>
<cfset conn.event.attach("beforeProcessing",validate)>

2) Assign your own processing on the client side through the dataProcessor's method defineAction() (see details here)

dp.defineAction("invalid",function(sid,response){
var message = response.getAttribute("message");
alert(message);
return true;// return false to cancel default data processing at all
})

Custom status

You can change the returned status and set your own one by means of the method set_status(). In this case any default processing (no matter, if the defineAction() method will return true or false) will be cancelled and you will specify data processing fully on the client side.

Server side

<cffunction name="validate">
       <cfargument name="data">
       <cfif ARGUMENTS.data.get_value("some") eq "">
                 <cfset ARGUMENTS.data.set_status("my_status")>
       </cfif>
</cffunction>
<cfset conn.event.attach("beforeProcessing",validate)>

Client side

dp.defineAction("my_status",function(sid,response){
...
})

Adding custom information to response

You can send some custom information to the client side through the following methods:

  • set_response_text
  • set_response_xml
  • set_response_attribute
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Select/Combobox Columns in Grid DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Select/Combobox Columns in Grid

When on the client side you specify co/coro/combo columns (combo-box/select) in the grid, the grid will automatically request data for them in the same manner as for the filtering options.

By default, the grid will use DISTINCT select against the related field, and fetch all possible options.

If you need to define a custom list of options, you can use one of 2 ways:

  • a hardcoded list
<cfset param = structNew()>
<cfset param["1"] = "one">
<cfset param["2"] = "two">
<cfset param["3"] = "three">
<!--- param[value] = label --->
<cfset grid.set_options("item_nm",param)>
<cfset grid.render_table("grid50","item_id","item_nm,item_cd")>
  • a list created on the base of a different table
<cfset list = createObject(
    "component",
    "dhtmlxConnectors.OptionsConnector"
).init("#datasource#","MySQL")>
<cfset list.render_table(
    "countries",
    "country_id",
    "country_id(value),country_name(label)"
)>
<cfset grid.set_options("item_nm",list)>
<cfset grid.render_table("grid50","item_id","item_nm,item_cd")>

co/combo type

  • when using the predefined list of data, both values and labels need to be provided
  • when using the connector, there must be two fields selected, one as (value), second as (label)

coro type:

  • only labels need to be provided
  • the connector may define only the label parameter
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Defining Grid Structure on the Server Side DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
    • Automatic defining
    • Manual defining
    • Related samples
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Defining Grid Structure on the Server Side

APPLICABLE TO: Grid

Starting from version 1.0, connectors can be used to define the header of the grid.

It can be done in 2 ways:

  • automatic
  • manual

Automatic defining

In case of automatic defining, the grid will use names of table's fields as labels for the columns.

<cfinclude template="../../config.cfm">
<cfset grid = createObject(
    "component",
    "dhtmlxConnectors.GridConnector"
).init("#datasource#","MySQL")>
<cfset config = createObject(
    "component",
    "dhtmlxConnectors.GridConfiguration"
).init()>
<cfset grid.set_config(config)>
<cfset grid.dynamic_loading(100)>
<cfset grid.render_table("grid50000","item_id","item_nm,item_cd")>

If you want to apply automatic server-side sorting and filtering for specified columns, you should specify true inside GridConfiguration:

<cfset grid = createObject(
    "component",
    "dhtmlxConnectors.GridConnector"
).init("#datasource#","MySQL")>
<cfset config = createObject(
    "component",
    "dhtmlxConnectors.GridConfiguration"
).init(true)>
<cfset grid.set_config(config)>
<cfset grid.render_table("grid50000","item_id","item_nm,item_cd")>

Manual defining

In the manual mode, headers and their parameters are defined by php command. Names of commands mimic names of js commands with similar functionality.

<cfset config = createObject(
    "component",
    "dhtmlxConnectors.GridConfiguration"
).init(true)>
<cfset config.setHeader(array("column 1","column 2"))>
<cfset config.setColTypes(array("ro","ed"))>
<cfset grid.set_config(config)>

<cfset grid.render_table("grid50000","item_id","item_nm,item_cd")>

Available commands

All commands below get an array of values or a comma-separated string as the input parameter, delimited by 'header delimiter' (default value - ',').

<!--- column labels --->
<cfset config.setHeader(names)>
<!--- column types --->
<cfset config.setColTypes(typeStr)>
<!--- column IDs --->
<cfset config.setColIds(idsStr)>
<!--- column width, int values, will be processed as size in pixels --->
<cfset config.setInitWidths(widths)>
<!--- column width, int value, will be threated as size in percents --->
<cfset config.setInitWidthsP(widths)>
<!--- column align --->
<cfset config.setColAlign(alStr)>
<!--- column sorting type --->
<cfset config.setColSorting(sortStr)>
<!--- column color --->
<cfset config.setColColor(colorStr)>
<!--- visibility of column  --->
<cfset config.setColHidden(hidStr)>

Header and footer

  • To attach header to the grid you should use the attachHeader() method:
<cfset config.attachHeader(values)>

Parameters:

  • an array or a string of header names. In case of string, the names are delimited by 'header delimiter' (default value -',')

  • an array or a string of header styles. In case of string, the styles are delimited by 'header delimiter' (default value - ',')

  • To attach footer to the grid you should use attachFooter() method:

<cfset config.attachFooter(values)>

Parameters:

  • an array or a string of footer names. In case of string, the names are delimited by 'header delimiter' (default value - ',')
  • an array or a string of footer styles. In case of string, the styles are delimited by 'header delimiter' (default value - ',')

Header delimiter

The header delimeter sets symbol or several symbols which will be used as a delimiter in string arguments.

<cfset config.setHeaderDelimiter(headerDelimiter)>

Related samples
  • defining grid structure on the server side
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Select-Box Columns in Scheduler DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Select-Box Columns in Scheduler

When a scheduler has a select-like collections or a unit/timeline view, it's possible to load a list of related options from the server. In such a case the data loading need to be defined on the client side as:

some_collection=scheduler.serverList("type");

On the server side the list of options can be retrieved in 2 ways:

  • a hardcoded list
<!--- both values and labels need to be provided --->
<cfset param = structNew()>
<cfset param["1"] = "one">
<cfset param["2"] = "two">
<cfset param["3"] = "three">
<!--- value - label --->
<cfset scheduler.set_options("type",param)>
<cfset scheduler.render_table("events","event_id","start_date,end_date,text,type_id")>
  • a list created on the base of a different table
<cfset list = createObject("component","dhtmlXConnectors.OptionsConnector").init(
    "#datasource#",
    "MySQL"
)>
<!--- there must be two fields selected, one as (value), second as (label) --->
<cfset list.render_table("types","type_id","type_id(value),type_name(label)")>
<cfset scheduler = createObject("component","dhtmlXConnectors.SchedulerConnector").init(
    "#datasource#",
    "MySQL"
)>
<cfset scheduler.set_options("type", list)>
<cfset scheduler.render_table(
    "tevents",
    "event_id",
    "start_date,end_date,event_name,type"
)>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Elementary DB operations with Connector DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
    • SQL queries
    • INSERT query
    • UPDATE query
    • DELETE query
    • Creating a new connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Elementary DB operations with Connector

dhtmlxConnector allows executing some actions against DB.

SQL queries

DBWrapper object can be accessed as:

<cfset conn.sql>

Then, it can be used in queries in the following way:

<cfset conn.sql.query("DELETE FROM some_table WHERE ID=1")>
//or
<cfset res=conn.sql.query("SELECT * FROM some_table WHERE ID=1")>
<cfset data=conn.sql.get_next(res)>
//or
<cfset conn.sql.query("INSERT INTO some_table(type) VALUES('simple')")>
<cfset id = conn.sql.get_new_id()>

INSERT query

<cfset param = structNew()>
<cfset param["value"] = '8898'>
<cfset param["name"] = 'new name'>
<cfset id = grid.do_insert(param)>

Parameters:

  • hash of values

UPDATE query

<cfset param = structNew()>
<cfset param["id"] = '8'>
<cfset param["value"] = '8898'>
<cfset param["name"] = 'new name'>
<cfset grid.do_update(param)>

Parameters:

  • hash of values. For successful result it must contain the identity field.

DELETE query

<cfset grid.do_delete(id)>

Parameters:

  • ID of the record that should be deleted

Creating a new connector

You can create an extra connector object on the fly and use it for DB operations.

<cfset conn = createObject("component","dhtmlxConnectors.Connector").init(
    "#datasource#",
    "MySQL"
)>
<cfset conn.configure("some_table")>
<cfset param = structNew()>
<cfset param["value"] = '8898'>
<cfset param["name"] = 'new name'>
<cfset id = conn.do_insert(param)>
<cfset conn.do_delete("2")>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Error Handling and Logging DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
    • Server-side logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Error Handling and Logging

While developing we strongly recommend using logs for errors detection.

Server-side logging

DHTMLX permits to control logging in two ways:

  • Basic
  • Detailed

Basic

If any error occurs during the data processing, the client-side data processor object will receive the "error" action containing short info about the problem (full info will be written to the log).

<cfset grid.enable_log(variables,getCurrentTemplatePath() & "_debug.log")>
  • variables - just let the matter rest. It's a build-in variable.
  • path - an absolute or relative path to the text file where a log will be written.

A relative path is specified relatively to a temporary folder the path to which you can get by using the GetTempDirectory() method.

Detailed

When a critical error occurs, all log records for current session (full error info) will be sent to the client and shown in a browser (useful for debugging, not recommended for production):

<cfset grid.enable_log(variables,getCurrentTemplatePath() & "_debug.log",true)>
  • variables - just let the matter rest. It's a build-in variable.
  • path - absolute or relative path to the text file where log will be written.
  • The third parameter enables detailed mode.

Adding custom records to the log

During the development process you may need to write some custom data to the log (can be useful for custom server-side events).

In such a case you can use the default log as:

<cfinvoke component="dhtmlxConnectors.LogMaster" method="do_log">
    <cfinvokeargument name="message" value="any text here">
</cfinvoke>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Handling Events DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
Start Client-Server Communication ColdFusion Connector

Handling Events

DHTMLX Connector uses events to manage Insert/Update/Delete operations.

The code below shows how to attach an event:

<cfset conn.event.attach("event_name",handlerFunc)>

Parameters:

  • event_name - the name of the event;
  • handlerFunc - a handler function.

Handler functions get one input parameter and this parameter depends on the attached event.

In the following table you'll see a full list of events and the appropriate input parameters of handler functions.

Event | Input parameter of handler function
beforeSort SortInterface Object
beforeFilter FilterInterface Object
beforeRender DataItem Object
  • beforeProcessing
  • afterProcessing
  • beforeInsert
  • beforeUpdate
  • beforeDelete
  • afterInsert
  • afterUpdate
  • afterDelete

 DataAction Object
beforeOutput | none

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Extending Functionality DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
    • Protocol details
    • Porting connectors to another platforms
    • XML format used by connector
  • Samples
Start Client-Server Communication ColdFusion Connector

Extending Functionality

Protocol details

data fetching

POST

Command parameters:

  • none

GET

Command parameters:

  • connector=true - flag of connector based request

  • dhx_colls=field1,field2...fieldN - optional, can contain a list of fields for which collections will be requested. dhtmlxGrid uses such parameters to request data for combo columns and select filter (such requests are executed just once, for initial data loading)

some.cfm?connector=true&dhx_colls=2,3
  • dhx_sort[field]=directon - instruct the server-side connector to sort dataset by the defined field
some.cfm?connector=true&dhx_sort[2]=asc
  • dhx_filter[field]=mask - instruct the server-side connector to filter dataset by the defined field
<!---//filter by %test%--->
some.cfm?connector=true&dhx_filter[2]=test

Grid specific

Requesting part of data (Dynamic Smart Rendering or Dynamic Paging)

GET

  • posStart - the position from which data is requested
  • count - the count of requested rows

Combo specific

Requesting part of data

GET

  • pos - the position from which data is requested

Filter by label field

GET

  • mask - the filtering mask for the label field

Tree/TreeGrid specific

Requesting a branch of tree

GET

  • id - the parent id for the requested branch

Data updating (using dataProcessor)

GET

  • editing=true - the mark of dataprocessor-based call

POST

  • ids - the list of updated records
  • [id]_[property] - for each field inside of the updated record the related field in POST is generated
  • [id]_!nativeeditor_status - the action type

Back to top

Porting connectors to another platforms

When should you use it?

The existing version of connectors supports a limited set of server platforms. In case database/framework/scripting language you'd like to use is not supported, you can port existing solution on your platform.

When shouldn't you use it?

Connectors are just wrappers for existing grid functionality, that's why if you need to use this solution once, you'd better use the grid API directly, instead of creating your own server connector.

Implementation levels

The connector supports many operations implementing data processing. There is an opportunity to provide supporting basic operations and ignore higher-level ones, in case they are not used in your project.

Basic support

Data assignment is a basic connector operation which proceeds in the following way: connector connects to database, selects data and outputs it in stdout using XML format of the current component.

Key points:

  1. XML-data input must occur only after sending the appropriate http-header
  2. XML must start with XML declaration containing the appropriate data coding
  3. No other content must be sent to stdout (neither before, nor after sending data by connector)
<cfcontent type="text/xml;charset=UTF-8" reset="yes">
<cfoutput><?xml version='1.0' encoding='utf-8' ?>#xml_formatted_data#</cfoutput>
<cfabort>
  • incoming parameters - there aren't any;
  • restriction for output data - there are no restrictions.

XML Format used by connector

Basic implementation allows using the resulting script as the input parameter for the load() method.

Technically, there is an opportunity to use JSON or any other format supported by the component, but you should bear in mind that complex scenarios are XML-oriented and you'd better use XML

Filtering and sorting

At this stage, the number of supported operations is considerably extended: you are allowed to use #connector_text_filter, sorting type 'connector' and filter/sort data through URL manipulations.

Key points:

  • An obvious advantage of this functionality can be estimated only in terms of operating with grid, for other components such functionality doesn't seem to be necessary (it can be used only to filter/sort data through URL manipulations).
  • The level 'uses' code from the previous one. Beware, that now before using XML data is sorted/filtered according to the incoming data.

GET

Command parameters:

  • dhx_filter - a hash of filtering rules

    • filtering pattern - any entry( like %x% )
    • in case you have a few parameters, you should link them by AND logic
    • parameter is available only for fields with active filter
    • empty filter value means that filter wasn't set and it must be ignored
    // where field1 like %some% AND field2 like %other%
dhx_filter[1]=some&dhx_filter[2]=other

  • dhx_sort - a hash of sorting rules

    • possible values for asc and dsc parameters
    • in case you have a few parameters, you should link them by AND logic
    • order of filtering implementation - not defined, at the moment none of the components is able to create multi-field sorting
    // order by field1 ASC, field2 DESC
dhx_sort[1]=asc&dhx_filter[2]=dsc

    Hashes of rules in question use the name of fields (where filtering is enabled) or columns' indices (in case of grid).

Restriction for output data: order and structure are defined through filtering/sorting parameters.

Combo specific:

dhtmlxCombo has an additional filtering GET parameter:

  • mask - sets filtering in text label columns using “like x%” rule.
some.do?mask=abc

Dynamic loading

After data output implementation goes dynamic loading. Dynamic loading has some particular features while working with hierarchical (tree/treegrid) and simple (grid/combo) components.

For hierarchical components, loading of data branch occurs at once.

some.cfm?id=123

Command parameters:

  • id - 'parent id' which defines the appropriate branch (beware, all filtering/sorting rules set during the previous stage are applied to the component).

For other components data will be output according to incoming parameters.

//grid
some.cfm?posStart=20&count=50
//combo
some.cfm?pos=50

Command parameters:

Grid:

  • posStart - index of the initial string
  • count - number of strings to output

Combo:

  • pos - index of the initial string
  • number of strings is defined by the server settings

While working with grid, the initial request (grid doesn't know yet how many strings are expected) doesn't contain any additional parameters ( 'posStart' and 'count' are not defined)

Back to top

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


XML format used by connector DHTMLX Docs

Documentation
  • XML format used by connector
    • Grid
    • TreeGrid
    • Tree
    • Combo
Start Client-Server Communication ColdFusion Connector Extending Functionality

XML format used by connector

Grid

<rows>
    <row id="some1"><cell>value 1,1</cell><cell>value 1,2</cell></row>
    <row id="some2"><cell>value 2,1</cell><cell>value 2,2</cell></row>
</rows>
  • row - tag represents row in the grid
  • cell - tag represents cell in the grid

row@id - mandatory attribute, must be unique for each row; row and cell tags may contain additional attributes, which will be processed in default way

In dyn loading mode

<rows total_count="50000" pos="1230">
    <row id="some1230"><cell>value 1,1</cell><cell>value 1,2</cell></row>
    <row id="some1231"><cell>value 2,1</cell><cell>value 2,2</cell></row>
</rows>
  • rows@total_count - count of rows in grid, need to be sent only for first data request ( when posStart parameter is not defined )
  • rows@pos - equal to posStart parameters, define in which place of grid data will added

TreeGrid

<rows>
    <row id="some1">
        <cell image="some.gif">value 1,1</cell><cell>value 1,2</cell>
        <row id="some11"><cell>child value 1</cell><cell>child value 2</cell></row>
    </row>
    <row id="some2"><cell>value 2,1</cell><cell>value 2,2</cell></row>
</rows>
  • row - tag represents row in the grid, one row tag can contain other row tags inside ( parent - child relation in hierarchy )
  • cell - tag represents cell in the grid
  • row@id - mandatory attribute, must be unique for each row
  • cell@image - can define image for tree cell in grid ( optional )

Dyn. loading

<rows parent="id">
    <row id="some1" xmlkids="1">
    <cell image="some.gif">value 1,1</cell><cell>value 1,2</cell>
</row>
    <row id="some2"><cell>value 2,1</cell><cell>value 2,2</cell></row>
</rows>
  • row@xmlkids - defines that row can contain child nodes
  • rows@parent - name of parent ID ( equal to incoming "id" parameter ) , ID of virtual root - 0

Tree

<tree>
    <item id="some" text="name">
        <item id="child1" text="name 1"/>
        <item id="child2" text="name 2"/>
    </item>
</tree>
  • item tag - item in a tree, can nest other item tags to represent parent-child relation
  • item@id - ID, unique for each item
  • item@text - label

In case of dyn. loading

   <tree id="id">
        <item id="some" text="name" childs="1">
        </item>
   </tree>
  • item@childs - defines that row can contain child nodes
  • tree@id - name of parent ID ( equal to incoming "id" parameter ) , ID of virtual root - 0

Combo

<data>
    <option value="some">Some label</option>
    <option value="other">Other label</option>
</data>
  • option - represent option in combo

In case of dyn. loading

<data add="true">
    <option value="some">Some label</option>
    <option value="other">Other label</option>
</data>

If "pos" parameter was provided, response must contain data@add attribute , to mark that it not new set of values, but addition to existing one.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Samples DHTMLX Docs

Documentation
  • ColdFusion Connector API
  • General Idea of dhtmlxConnector
  • Initializing ColdFusion Connector
  • Basic Loading
  • Dynamic Loading
  • Filtering
  • Formatting/Changing Data before Loading
  • Sorting
  • Client-Side Requirement - dataProcessor
  • Making Queries
  • Multi-User Sync
  • Security
  • Validation
  • Select/Combobox Columns in Grid
  • Defining Grid Structure on the Server Side
  • Select-Box Columns in Scheduler
  • Elementary DB operations with Connector
  • Error Handling and Logging
  • Handling Events
  • Extending Functionality
  • Samples
    • Samples Client-Side Initialization
    • Defining Grid Structure on the Server Side
Start Client-Server Communication ColdFusion Connector

Samples

  • Client-side initialization of components
  • Defining grid structure on server-side
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Samples Client-Side Initialization DHTMLX Docs

Documentation
  • Samples Client-Side Initialization
    • Grid
    • TreeGrid
    • Tree
    • Combo
    • Scheduler
    • Form
    • DataView
    • Chart
  • Defining Grid Structure on the Server Side
Start Client-Server Communication ColdFusion Connector Samples

Samples Client-Side Initialization

Grid

myGrid = new dhtmlXGridObject("myContainer");
//... grid configuration commands
myGrid.load("connector.cfm");

TreeGrid

Static mode

myGrid = new dhtmlXGridObject("myContainer");
myGrid.setColTypes("tree,...");
//...grid configuration commands
myGrid.load("connector.cfm");

Dynamic mode

myGrid = new dhtmlXGridObject('myContainer');
myGrid.setColTypes("tree,...");
//...
myGrid.kidsXmlFile="connector.php";
myGrid.load("connector.cfm");

Tree

Static mode

tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
//...
tree.load("connector.cfm");

Dynamic mode

tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
//...
tree.setXMLAutoLoading("connector.cfm");
tree.load("connector.cfm");

Combo

Static mode

var combo=new dhtmlXCombo("combo_zone2","alfa2",200);
combo.load("connector.cfm");

Auto-complete mode

var combo=new dhtmlXCombo("combo_zone2","alfa2",200);
combo.enableFilteringMode(true,"connector.cfm",true);
combo.load("connector.cfm");

Scheduler

scheduler.init(some_obj)
scheduler.load("connector.cfm");

Form

var form = new dhtmlXForm(someId);
form.load("connector.cfm");

DataView

var view = new dhtmlXDataView({...});
view.load("connector.cfm");

Chart

var mychart = new dhtmlXChart({...});
mychart.load("connector.cfm");
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Defining Grid Structure on the Server Side DHTMLX Docs

Documentation
  • Samples Client-Side Initialization
  • Defining Grid Structure on the Server Side
    • Client side
    • Server side
Start Client-Server Communication ColdFusion Connector Samples

Defining Grid Structure on the Server Side

Client side

index.html

<!DOCTYPE HTML>
<html>
   <head>
     <script src="codebase/dhtmlx.js" type="text/javascript"></script>
     <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
     <div id="gridbox" style="width:350px;height:250px";border:1px solid #A4BED4;></div>

     <script type="text/javascript">

     function doOnLoad(){
        var mygrid = new dhtmlXGridObject('gridbox');
        mygrid.setImagePath("codebase/imgs/");
        mygrid.setSkin("dhx_skyblue");
        mygrid.load("griddata.cfm");
     }
    </script>
   </head>
   <body onload="doOnLoad()">
   </body>
</html>

Server side

griddata.cfm

<cfinclude template="../config.cfm">
<cfset grid = createObject("component","dhtmlxConnectors.GridConnector").init(
    "#datasource#",
    "MySQL"
)>

<cfset config = createObject("component","dhtmlxConnectors.GridConfiguration").init(
    "#datasource#",
    "MySQL"
)>

<cfset config.setHeader("Item,##cspan")>
<cfset config.attachHeader("Item Name,Item CD")>
<cfset config.attachFooter(
    "Item Name,Item CD",
    "background: ##ff0000;,background: ##00ff00;"
)>
<cfset config.attachFooter(
    "Item Name Test,##rspan",
    "background: ##0000ff;color:white;"
)>
<cfset config.setColIds("col1,col2")>
<cfset config.setInitWidths('120,*')>
<cfset config.setColSorting("connector,connector")>
<cfset config.setColColor(",##dddddd")>
<cfset config.setColHidden("false,false")>
<cfset config.setColTypes("ro,ed")>
<cfset config.setColAlign('center,center')>
<cfset config.setColVAlign('bottom,middle')>

<cfset grid.set_config(config)>

<cfset grid.dynamic_loading(100)>
<cfset grid.render_table("grid50000","item_id","item_nm,item_cd")>
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DHTMLX What's New DHTMLX Docs

Documentation
  • DHTMLX What's New
    • Version 5.1
    • Version 5.0.2
    • Version 5.0.1
    • Version 5.0
    • Version 4.6.1
    • Version 4.6
    • Version 4.5.1
    • Version 4.5
    • Version 4.4
    • Version 4.3
    • Version 4.2.1
    • Version 4.2
    • Version 4.1.3
    • Version 4.1.2
    • Version 4.1.1
    • Version 4.1
    • Version 4.0.3
    • Version 4.0.2
    • Version 4.0.1
    • Migration to Newer Versions
Start

DHTMLX What's New

Before updating DHTMLX to the latest version, please check the Migration to Newer Versions guide to avoid possible breakdowns.

Version 5.1

released on April 18, 2017

Major changes

  • TypeScript support for all components
  • promise API for Ajax-requests (all components)
  • JSON data loading for all components
  • JSON-REST data saving with DataProcessor

Main Updates

  • common - load methods of data components return promise
  • form - the loadStructHTML API for the Form
  • formuploader - the onBeforeFileUpload event
  • grid - a new row operation getRowData API
  • grid - getCellExcellType API
  • grid - better text size adjusting
  • grid - the ability to pass a config object to the attachGrid() method
  • treeview - onClick, onDblClick events for TreeView
  • treeview - showItem API
  • window - a window triggers onResizeFinish after min|max operations

Full list of changes

Version 5.0.2

released on July 13, 2016

  • accordion - drag-n-drop fixed for the multi mode when open/close button pressed
  • calendar - today date calculation for some cases fixed
  • cell - check if the user unloaded menu/toolbar/status manually added
  • common - Material CSS fixed (:;)
  • common - skinDetect fixed for zoom
  • dataprocessor - debug logic for the dataprocessor added
  • form - skin detect improved
  • grid - ability to get full HTML of the header or the footer cell
  • grid - default sorting type for grouped grid fixed
  • grid - group statistics counter fixed
  • grid - sorting in split mode fixed
  • tree - sibling drag-n-drop fixed

Version 5.0.1

released on June 7, 2016

  • combo - checkbox rendering for multicolumn mode fixed
  • editor - skin detection when initialized as form item fixed
  • form - addItem() to empty form fixed
  • form - disabled combo in material skin fixed
  • grid - dhtmlxGrid from HTML table. Problem with the comma in the header title fixed
  • grid - filtering tree column type fixed
  • grid - incorrect target during complex drag-n-drop fixed
  • grid - sizing of deep nested subgrids fixed
  • message - compatibility with SkinBuilder fixed
  • tabbar - tab width detect fixed for terrace and material

Version 5.0

released on May 17, 2016

Major changes

  • Font Awesome support added for accordion/menu/ribbon/toolbar/treegrid
  • a new component dhtmlxTreeView added (docs, demos)
  • a new Material skin added
  • window.dhx variable (instead of window.dhx4)

Full list of changes

Version 4.6.1

released on February 3, 2016

  • calendar - onButtonClick added for today/clear, localization improved (docs)
  • calendar - update input if today/clear pressed
  • cell - cancel attachURL by ajax if reattach or unload called
  • common - email validation - 2..5 characters in the domain name
  • form - autocheck for disabled nested items fixed for type:combo
  • form - blur for textarea/select fixed
  • form - type:image fixed if url not specified
  • form - unload improved for radio button
  • form - enableTodayButton added for type:calendar
  • grid - master checkbox and disabled cells fixed
  • grid - new row adding corrected for the live update mode
  • grid - incorrect data saving after setBindData in dhtmlxGrid fixed
  • grid - refreshMath functionality to restore math after column moving added
  • grid - sum math in treegrid fixed
  • layout - collapsed text rendering fixed
  • layout - hidden header rendering fixed for collapsed cell
  • popup - popup position fixed for template, file, label, fieldset, container, image and block form types
  • popup - setDimension added
  • ribbon - extra border removed if switch to disabled state while mouse over button is performed
  • tree - dhtmlx.image_path parsing fixed
  • treegrid - drag as top item in complex TreeGrid dnd fixed

Version 4.6

released on December 9, 2015

  • accordion - cell sizing fixed for autoheight
  • accordion - header height calculation fixed for IE8
  • ajax - onAjaxError event added for sync request type
  • calendar - setPosition fixed
  • calendar - today and clear buttons added (showToday / hideToday methods)
  • cell - dimensions calculations for components attached into collapsed layout cells fixed
  • chart - clearing hidden canvas fixed
  • combo - ability to hide header in multi-column mode added
  • combo - empty value if incorrect value entered while free_text is not allowed
  • combo - onSelectionChange fixed (dhx 3.6 compat)
  • common - ajax cache prevent mechanism fixed (dhxr0123456789=1)
  • common - deprecated loadXML() replaced with load() in samples
  • datastore - security issue fixed
  • form - correct processing of "error" response during form saving
  • form - dom events rendering improved for input (for better customizing)
  • form - type:image fixed if cancel button pressed in chrome
  • form - width for initially hidden combo fixed
  • grid - blur processing in combo excell fixed
  • grid - clear button in grid's filters fixed
  • grid - drag-n-drop in grid with paging fixed
  • grid - hide combo list for combo editor on grid scroll fixed
  • grid - printView for HTML pages on non-standard port fixed
  • grid - row.style in split mode fixed
  • grid - srnd mode in terrace skin for huge datasets fixed
  • layout - cell header onclick while unloading fixed
  • list - onAjaxError event fixed
  • menu - context menu rendering improved for modern browsers
  • popup - adding check for nested grids, keep popup visible on row select
  • ribbon - extra combo attributes added for the type:buttonCombo
  • sidebar - side arrows click doesn't hide the side fixed
  • sidebar - side arrows UI improved
  • slider - 3.6 compat mode improved
  • slider - if unsupported skin from 3.6 used - set skyblue
  • slider - touch drag-n-drop fixed for Android
  • tabbar - close button rendering fixed
  • tabbar - iframes-on-demand mode fixed according to 3.6
  • tabbar - loadStruct's json format fixed: closeButton=>close_button (closeButton deprecated)
  • tabbar - tabsArea width fixed
  • tabbar - zero as id fixed
  • tree - setItemColor is not applied without repainting
  • toolbar - buttonSelect scrolling fixed for touch, rendering improved
  • toolbar - itemText attribute fixed for xml init
  • toolbar - positioning fixed when spacer is used
  • windows - drag-n-drop fixed for ms-pointer feature
  • windows - include html/body scrolls into resize calculations

Version 4.5.1

released on November 20, 2015

  • form - XSS vulnerability fixed in swf

Version 4.5

released on October 6, 2015

Major changes

  • a new component dhtmlxList is added (docs, demos)
  • a new demo shows how to create fully responsive web applications
  • combo - demo with multicolumn+subload added
  • form - type:image added (docs, demo)
  • sidebar - header and autohide mode added (demo)

Full list of changes

Version 4.4

released on July 23, 2015

Major changes

  • Microsoft Edge support added
  • grid/tree - some load methods were deprecated (see migration guide), use load() instead

Other changes

  • accordion - cell size calculation fixed when a cell becomes visible
  • accordion - header icon fixed when accordion is attached to other container
  • cell - views switching with attached ribbon fixed
  • combo - onCheck event fixed, onBeforeCheck event added
  • combo - select item/open list by right-click removed (behaviour change to native context menu)
  • combo - 'x' icon from input removed for ie
  • common - dhx.isEdge added
  • common - onAjaxError 3.6 compat added
  • common - progress image fixed for web skin
  • editor - broken keyboard (unable to type after styling) fixed for ipad
  • form - button width fixed
  • form - 'x' icon from inputs removed for ie
  • grid - colspans in the grid in split mode fixed
  • grid - creating a filter on the base of the dhtmlxCombo using the makeFilter() method fixed
  • grid - forced resize in hidden state fixed
  • grid - grid attached to tabbar fixed on iOS 7.x
  • grid - regression in live-updates functionality fixed
  • grid - removing rows in grid, while dataprocessor is in silent mode fixed
  • grid - resize of split grid in layout's cell in IE fixed
  • grid - security issue with printView API fixed
  • layout - inner dhxWins instance init improved
  • layout - prevent context menu by right-click while resizing
  • popup - custom grid click parsing added (to close popup when grid clicked)
  • sidebar - border fixed in skyblue when sidebar attached to container
  • slider - init from html fixed
  • tabbar - attached editor fixed on iOS 7.x
  • tabbar - hidden tab's cell can be active
  • windows - closing window fixed
  • windows - disable contextmenu on resize
  • windows - header dblclick fixed for pointer devices
  • windows - body scroll fixed (when inited from non-fullscreen layout)

Version 4.3

released on June 23, 2015

Major changes

  • carousel - a new component - carousel is added (docs, demos)
  • sidebar - single_cell mode added (docs, demo)
  • sidebar - bubbles added for items (docs,demo)
  • slider - range-mode added (docs, demo)

Full list of changes

Version 4.2.1

released on May 15, 2015

  • calendar - positioning behind top browser edge fixed
  • combo - search while typing in r/o mode fixed
  • form - css attr for combo item fixed
  • form - disabled color for web skin fixed
  • form - form dimfix improved (for inputs width)
  • grid - ron cell type non-formatted value return fixed
  • grid - copy-paste operations in grid with hidden columns fixed
  • grid - excel keymap can be enabled only for all grids on a page
  • grid - firefox 4k chars per cell limitation fixed
  • grid - height of rows in Web skin fixed
  • grid - interference between sorting and column level drag-n-drop fixed
  • grid - multi-selection and grouping fixed
  • grid - old clipboard related API cleaned
  • grid - sorting image regression fixed
  • layout - setMinWidth fixed
  • menu - auto_overflow fixed (incorrect height calculated)
  • menu - font color for sublevel items for web skin fixed
  • popup - attachTabbar fixed
  • slider - inverse mode runner position fixed
  • tabbar - tabbar tabs animation improved
  • toolbar - itemText xml attr fixed
  • windows - mouse events fixed when window attached to another window

Version 4.2

released on April 8, 2015

Major changes

  • accordion - ability to attach header/footer/menu/toolbar/status bar in the fullscreen mode (demo)
  • combo - checkbox for multicolumn mode added (demo)
  • menu - integration with google maps marker demo added
  • popup - integration with google maps marker demo added
  • sidebar - new component sidebar added (docs, demos)
  • tabbar - tabs show/hide animation improved (self-visible/self-hidden states now are rendered correctly)
  • tabbar - ability to attach header/footer/menu/toolbar/status bar in a fullscreen mode (demo)
  • designer - visual designer updated, new widgets are added

Full list of changes

Version 4.1.3

released on February 16, 2015

  • common - data serialization for PUT and DELETE ajax modes
  • common - fix for parse API with xml object
  • common - xml parsing in IE11 fixed
  • form - elements layout in IE6 fixed
  • grid - combination of header menu and movable columns fixed
  • grid - min-width for columns in split mode fixed
  • grid - onBeforeSelect event in split grid fixed
  • grid - regression in combo parsing from xml fixed
  • grid - regression in headermenu with col-spans fixed
  • grid - regression in onCollectValues event fixed
  • layout - attach layout fixed for IE6-7
  • layout - resize fixed for IE11 in IE7 mode
  • menu - auto_overflow fixed
  • message - incorrect dhtmlx.confirm closing by api fixed
  • popup - context menu and context flashing fixed for IE6-8
  • popup - word wrap for attached objects fixed
  • tabbar - setTabsMode fixed

Version 4.1.2

released on December 9, 2014

  • ajax - query method added (with ability to set headers)
  • ajax - regression in onAjaxError event handler fixed
  • calendar - body-scroll on ipad fixed
  • calendar - close-timeout added for pretty closing on touch
  • calendar - onTimeChange event added
  • combo - multicolumn header improved for skyblue
  • combo - skins improved for ipad
  • combo - unload improved
  • common - regression in scheduler and dhtmlx.js usage fixed
  • form - button click improved for touch
  • form - focus over disabled checkbox/radio fixed
  • form - reset validate before setting new vaule
  • layout - resize for touch added
  • slider - out-of-screen mouse pointer fixed while dragging
  • slider - touch functionality improved, highlight for pressed runner added
  • tabbar - conf.arrows_mode attr added

Version 4.1.1

released on November 28, 2014

  • combo - options subload fixed
  • combo - scroll to new option in FF fixed
  • combo - showList param for filtering added
  • common - "get" set as default ajax method
  • common - touch functionality init fixed
  • common - safe window.dhtmlx and window.dhtmlxEvent init added
  • grid - skin_detect added
  • grid - regression fixes
  • menu - xml parsing fixed (when root node missing)
  • ribbon - arrows_mode option for tabbar added
  • tabbar - tabbar setSizes with fullscreen margins fixed
  • tabbar - setArrowsMode function fixed
  • tabbar - labelWidth detect for IE10/11 compat mode fixed
  • tree - skin_detect added
  • treegrid - styling for web and terrace skin
  • windows - dnd fixed if dnd_module not attached on page

Version 4.1

released on November 24, 2014

Major changes

  • full touch support
  • template component was added (demo, docs)
  • ajax - some changes in API were made (details)
  • combo - multicolumn added (demo, docs)
  • grid - configuration from json for dhtmlxGrid added (docs)
  • dataprocessor - can work with json responses (docs)
  • dataprocessor - can be used with REST backend (docs)
  • skin builder - ability to change vertical offset between items for form, row_height for grid and line_height for tree added (docs)
  • tabbar - auto show/hide left-right tabs arrows mode added (demo)
  • toolbar - the ability to attach toolbar into statusbar for paging added (demo)

Full list of changes

Version 4.0.3

released on July 1, 2014

  • combo - get/post via dhx.ajax.method configuration added (for srnd mode)
  • cell (container) - attachScheduler() fixed
  • cell (container) - attachToolbar() missing border fixed (layoutcell->window->toolbar)
  • cell (container) - unload with several views fixed
  • editor - page autoscroll fixed for firefox 28+
  • form - getItemValue() fixed for type:calendar (old-value from onChange->getItemValue)
  • form - live vaidation for type:select fixed
  • form - onButtonClick event no longer fired by right-mouse click
  • form - setItemLabel()/getItemLabel() for type:button fixed
  • form - type:newcolumn rendering fixed in ie6/ie7
  • grid - custom styling for rows fixed
  • grid - incorrect data loading for grid with data preloading fixed
  • grid - combo cell improved for ie10/11
  • grid - combo_v icon fixed
  • grid - multiline header export to pdf in split mode fixed
  • grid - updateFromXML() in srnd mode fixed
  • grid - the height of a table row in HTML5 doctype fixed
  • grid - update from xml in split mode fixed
  • grid - styling of selected rows and header in grid fixed
  • grid - combo filter 'select all' mode '&nbsp;' removed, autosize fixed
  • grid - styling of grid in split-multi-line mode fixed
  • grid - math in Grid and NaN values fixed
  • layout - setWidth() for h-mode fixed
  • layout - last cell undock() fixed
  • layout - progressOff() fixed
  • layout - onResizeFinish for 1C pattern fixed
  • message - alerts styling in IE fixed
  • tabbar - getNumberOfTabs() fixed
  • tabbar - tabs-area width increased (max tabs count)
  • toolbar - type:input's selection fixed
  • tree - autosearch fixed, searching was changed to "contains" logic
  • treegrid - styling editor in IE fixed
  • treegrid - onOpenEnd in case of loading from json fixed

Version 4.0.2

released on June 17, 2014

  • improved validation for grid and form
  • layout - attaching layout to container fixed
  • layout - attaching footer for 1C pattern fixed
  • layout - hidden header fixed in IE8
  • datastore - debug code and http check removed
  • dhx.ajax.method param added (ability to change request type for load/loadStruct)
  • tabbar - hrefmode=ajax fixed (for xml config)
  • calendar - set initial value via <input value> fixed
  • libCompiler - dhtmlx_debug.css generation added
  • menu - toplevel overflow fixed

Version 4.0.1

released on June 9, 2014

  • layout - onPanelResizeFinish for IE fixed
  • ajax - dhx.ajax.cache param added (ability to enable/disable dhxr param)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DHTMLX 4.1 - Full List of Changes DHTMLX Docs

Documentation
  • DHTMLX 4.1 - Full List of Changes
  • DHTMLX 4.2 - Full List of Changes
  • DHTMLX 4.3 - Full List of Changes
  • DHTMLX 4.5 - Full List of Changes
  • DHTMLX 5.0 - Full List of Changes
  • DHTMLX 5.1 - Full List of Changes
  • Migration to Newer Versions
Start DHTMLX What's New

DHTMLX 4.1 - Full List of Changes

Major сhanges

  • full touch support
  • template component was added (demo, docs)
  • ajax - some changes in API were made (details)
  • combo - multicolumn added (demo, docs)
  • grid - configuration from json for dhtmlxGrid added (docs)
  • dataprocessor - can work with json responses (docs)
  • dataprocessor - can be used with REST backend (docs)
  • skin builder - ability to change vertical offset between items for form, row_height for grid and line_height for tree added (docs)
  • tabbar - auto show/hide left-right tabs arrows mode added (demo)
  • toolbar - the ability to attach toolbar into statusbar for paging added (demo)

Main fixes and updates

  • accordion - statusbar fixes and improvements
  • accordion - expand-collapse effect fixed (when content with the same effect attached)
  • ajax - ?/& url symbol detect fixed for GET request
  • calendar - %u for milliseconds and %P for timezone offset added
  • calendar - issue with datelight saving shift fixed
  • calendar - fixes for touch devices
  • calendar - strToDate fixed (upper case dates now work)
  • colorpicker - positioning near screen edge fixed
  • combo - custom filter handler added (demo)
  • combo - multicolumn added
  • combo - <input name='_new_value'> name fixed if [] used
  • combo - css attr for xml fixed
  • combo - custom filter->list render fixed
  • combo - comboFromSelect - selected option fixed in IE8
  • combo - list for opts reload with xml doesn't hide (fixed)
  • combo - filtering improved
  • combo - if add="true" not specified in json/xml - clear existing options fixed
  • combo - getOptionsCount added
  • combo - server-filter - prevent list showing if combo is hidden or not in focus (fixed)
  • combo - setComboText fixed
  • combo - setOptionIndex added (ability to change single option position)
  • combo - unSelectOption fixed
  • combo - width improved for webkit
  • combo - xml parsing improved (values with cdata)
  • common - date2str and str2date added fixed
  • common - dhx.s2j added (convert string to json)
  • container - dhx.ajax.cache added for attachURL (iframe mode)
  • container - save progress state when docking/undocking (fixed)
  • dataprocessor - rest mode added
  • dataprocessor - better error handling
  • dataprocessor - can work with json server side response
  • dataview - preserving item id during d-n-d fixed
  • form - ability to init editor with an extended toolbar added
  • form - button click effect improved, focus fixed in IE
  • form - cpPosition attr added for colorpicker position (right/bottom)
  • form - download-file demo added (demo)
  • form - dyn setRequired for type:calendar and type:combo added
  • form - uploader's sl mode - params in url fixed
  • form - label_right mode fixed for type:template
  • form - unload fixed for type:upload
  • form - update values with number_format fixed
  • form - uploader's icon when in a window fixed in IE8
  • grid - default height of a row can be configured
  • grid - configuration from json for dhtmlxGrid added
  • grid - update addContextZone can accept DOM Node
  • grid - onTab event in the split mode added
  • grid - clist editor in the multiline mode added
  • grid - header menu in grid uses dhtmlxMenu (docs)
  • grid - onDataReady event doesn't work for json (fixed)
  • grid - bug in the block selection in the split mode fixed
  • grid - incorrect clipboard operations in grid on ipad fixed
  • grid - colspans and split headers fixed
  • grid - combo cell 'tab' navigation fixed
  • grid - combo sizing in hidden container in IE8 fixed
  • grid - complex rowspans in dhtmlxGrid fixed
  • grid - connector multi-init in the dhtmlxGrid fixed
  • grid - copy from clipboard and grid in the split mode fixed
  • grid - enableBlockSelection with false argument fixed
  • grid - export grid with multiselection fixed
  • grid - grid. enableEditEvents+multiselect fixed
  • grid - header position in split with rowspans fixed
  • grid - height of a sub-row in the case of split multiline mode fixed
  • grid - ignoring unloaded rows during form submit fixed
  • grid - loading data from XML-B format and column moving fixed
  • grid - loading more than 50k rows in split grid fixed
  • grid - onBeforeSorting doesn't block sort in group mode (fixed)
  • grid - onMouseMoving event when dragging over chart fixed
  • grid - per-cell combo values in the split mode fixed
  • grid - regression in the click behavior of combo in the grid fixed
  • grid - row size in split IE 11 fixed
  • grid - serialization of header values in the split mode fixed
  • grid - setBgColor for even rows fixed
  • grid - setColumnColor api fixed
  • grid - setIconSize with modern HTML5 doctype fixed
  • grid - stat_average in dhtmlxGrid fixed
  • grid - styling of grid in the popup fixed
  • grid - styling of odd and even rows in the grid fixed
  • grid - the height of the colorpicker exCell fixed
  • layout - attach footer for 1C pattern fixed
  • layout - autosize fixed when one more layout attached
  • layout - offset.left fixed for 1C
  • layout - vertical collapsed text fixed for safari
  • menu - empty text fix for items w/o text attr
  • menu - setItemDisabled - checkbox/radio icons fixed
  • menu - translation demo added (demo)
  • menu - when context menu is unloaded body's css not changed (fixed)
  • popup - attached form with editor fixed
  • ribbon - callEvent added for setValue for combo (prevention of calling onSelectOption)
  • ribbon - getInput added
  • slider - decimals support improved
  • slider - demo with popup added (demo)
  • slider - inverse mode added
  • slider - linkTo:select fixed
  • slider - overflow detect added
  • tabbar - tabs offset fixed for web skin
  • toolbar - api_init's onClick fixed
  • toolbar - item without text rendering improved (extra space removed)
  • toolbar - skyblue skin fixed when attached to window
  • toolbar - type:spacer added to json and xml (ability to set spacer from xml/json)
  • tree - default height of item can be configured
  • windows - get the topmost/bottommost window fixed
  • windows - multiple instances/css for vp fixed
  • windows - vp pull added (now several instances can use single viewport)
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DHTMLX 4.2 - Full List of Changes DHTMLX Docs

Documentation
  • DHTMLX 4.1 - Full List of Changes
  • DHTMLX 4.2 - Full List of Changes
  • DHTMLX 4.3 - Full List of Changes
  • DHTMLX 4.5 - Full List of Changes
  • DHTMLX 5.0 - Full List of Changes
  • DHTMLX 5.1 - Full List of Changes
  • Migration to Newer Versions
Start DHTMLX What's New

DHTMLX 4.2 - Full List of Changes

Major changes

  • accordion - ability to attach header/footer/menu/toolbar/status bar in the fullscreen mode (demo)
  • combo - checkbox for multicolumn mode added (demo)
  • menu - integration with google maps marker demo added
  • popup - integration with google maps marker demo added
  • sidebar - new component sidebar added (docs, demos)
  • tabbar - tabs show/hide animation improved (self-visible/self-hidden states now are rendered correctly)
  • tabbar - ability to attach header/footer/menu/toolbar/status bar in a fullscreen mode (demo)
  • designer - visual designer updated, new widgets are added

Main fixes and updates

  • accordion - attach layout ui fixed
  • accordion - common dnd improved
  • accordion - editor's missing content fixed when after acc dnd
  • accordion - offsets for terrace skin fixed
  • accordion - onBeforeDrag event added (2nd param index added)
  • accordion - web skin improved
  • ajax - data serialization for PUT and DELETE ajax modes
  • ajax - double &/? in url fixed
  • ajax - filePath and async attrs added to ajax obj (dhtmlx 3.6 compat)
  • calendar - body-scroll on ipad fixed, close-timeout added for pretty closing
  • calendar - getWeekNumber fixed, week number display improved for January
  • calendar - onTimeChange event added
  • cell - bordeless cell with attached ribbon UI improved
  • chart - draw chart after group/ungroup fixed
  • colorpicker - setting default color and color on init fixed
  • combo - filtering fixed
  • combo - name conflict in dhtmlxCombo fixed
  • combo - onSyncApply event for combo added
  • combo - scroll to new option fixed in FF
  • combo - skins improved for ipad, multicolumn hdr improved for skyblue
  • combo - subload fixed
  • combo - unload improved
  • common - get set as default ajax method
  • common - s2j case sensitive fixed
  • common - touch functionality declaration improved
  • dataprocessor - dataprocessor doesn't run validation for "delete" operations fixed
  • dataprocessor - debug helper for dataprocessor added
  • dataprocessor - parameters in url and REST mode fixed
  • editor - clear formatting for h1-h4 fixed
  • form - button click improved on touch, tap highlighting removed
  • form - demo with real form submit added
  • form - editor's focus issue fixed while enable/disable
  • form - editor's inner id fixed (ability to use the same editors' names for different form instances)
  • form - empty userdata in xml fixed
  • form - focus over disabled checkbox/radio fixed
  • form - reset validate before setting new value fixed
  • grid - click handling in sub-grid editor fixed
  • grid - combination of header menu and movable columns fixed
  • grid - conflict between onCollectValues and connectors fixed
  • grid - correct processing of empty paste operation fixed
  • grid - hard-limit on rows count in grid with paging fixed
  • grid - header menu and columns with colspan fixed
  • grid - keymaps and split in IE fixed
  • grid - load command returns xhr object fixed
  • grid - min-width for columns in split mode fixed
  • grid - onBeforeSelect event in split grid fixed
  • grid - onSyncApply event for grid added
  • grid - processing of invalid xml response by dataprocessor fixed
  • grid - regression in combo loading in the dhtmlxGrid fixed
  • grid - regression in grid.post fixed
  • grid - regression in onCollectValues event fixed
  • grid - regression in UserData from json fixed
  • grid - regression in XML parsing in IE fixed
  • grid - setColumnMinWidth in split mode fixed
  • grid - skin_detect added, demos updated, doctype changed to html
  • grid - split mode with first column hidden fixed
  • grid - styling for the markers in dhtmlxGrid fixed
  • grid - tab processing in split mode fixed
  • grid - using parse command with xml object
  • grid - xmltop call for non-xml data sources fixed
  • layout - ability to change separator size added
  • layout - ability to set min_width/min_height to 0 fixed
  • layout - attach layout fixed for ie6/ie7
  • layout - collapsed text fixed for IE9
  • layout - layout attached to another layout_cell view fixed
  • layout - min width/height added for resize
  • layout - progress bar UI fixed
  • layout - resize in ie11/ie7mode fixed
  • layout - resize optimized to touch-screen monitors
  • layout - unload improved
  • layout - views switching for urls attached by post method fixed
  • menu - auto_overflow fixed
  • menu - xml parsing fixed (when root node missing)
  • message - incorrect dhtmlx.confirm closing by api fixed
  • message - regression in width settings for dhtmlx.alert and dhtmlx.confirm fixed
  • popup - context menu and context flashing fixed for IE6-8
  • popup - prevent popup closing if attached form's combo clicked fixed
  • popup - support for old IE browsers improved
  • popup - touch compatibility improved
  • popup - width param added for attachForm (for old IE rendering)
  • popup - word wrap for attached objects fixed
  • ribbon - 2nd param for buttonSelect's onclick added
  • ribbon - arrows_mode for tabbar added
  • ribbon - getItemState for buttonSegment and buttonTwoState added
  • ribbon - isChecked added for checkbox
  • ribbon - setItemOptionText and getItemOptionText added
  • slider - out-of-screen mouse pointer fixed while dragging
  • slider - slider selection fixed for ipad
  • slider - touch functionality improved, highlight for pressed runner added
  • tabbar - auto arrows mode fixed
  • tabbar - conf.arrows_mode attr added
  • tabbar - labelWidth detect fixed for IE10/11 compat mode
  • tabbar - offsets for web and terrace skins are fixed
  • tabbar - progress bar UI fixed
  • tabbar - setTabsMode fixed
  • tabbar - skyblue black bg fixed for Safari 5.1.7
  • template - new template demo added (books)
  • tree - tree sets correct sizes in modern IE
  • treegrid - conflict between TreeGrid and deprecated extensions fixed
  • treegrid - mixed state for treegrid lines fixed
  • treegrid - styling for web and terrace skin fixed
  • treegrid - treegrid srnd fixed
  • windows - demos with drag-n-drop are updated
  • windows - dnd fixed if dnd_module not attached on page
  • windows - onMoveCancel, onBeforeMoveStart, onResizeCancel, onBeforeResizeStart events are added
  • windows - progress bar UI fixed
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DHTMLX 4.3 - Full List of Changes DHTMLX Docs

Documentation
  • DHTMLX 4.1 - Full List of Changes
  • DHTMLX 4.2 - Full List of Changes
  • DHTMLX 4.3 - Full List of Changes
  • DHTMLX 4.5 - Full List of Changes
  • DHTMLX 5.0 - Full List of Changes
  • DHTMLX 5.1 - Full List of Changes
  • Migration to Newer Versions
Start DHTMLX What's New

DHTMLX 4.3 - Full List of Changes

Major changes

  • carousel - a new component - carousel is added (docs, demos)
  • sidebar - single_cell mode added (docs, demo)
  • sidebar - bubbles added for items (docs,demo)
  • slider - range-mode added (docs, demo)

Main fixes and updates

  • accordion - showHeader / hideHeader added
  • ajax - json string loading/parsing fixed for multiline
  • cell - getAttachedObject() also returns iframe (if attachURL) or any attached DOM element (if attachObject)
  • cell - cell_top size calculation fixed
  • cell - attachTabbar border fixed in skyblue skin
  • combo - multicolumn/multiline demo added
  • combo - ro_mode search while ro_mode is off fixed
  • combo - auto_complete and dyn_load fixed (loaded suggestion overwrote text entered by user)
  • common - genStr() fixed (starting from letter)
  • common - isIE9, isIE10, isIE11 added
  • common - s2b improved ('on' handled as true)
  • common - str2date fixed for %A (am/pm)
  • dataprocessor - regression in live updates handling fixed
  • dataprocessor - setTransactionMode works only after dp.init fixed
  • dataprocessor - rest mode of dataprocessor fixed
  • form - 2nd param added to onInfo event
  • form - disabled button-bg and borders fixed for web skin
  • form - a new demo added (show info in popup)
  • grid - loading only header in json data fixed
  • grid - enabling the ESC key button in the txt exCell fixed
  • grid - enabling onKeyPress event for the empty grid fixed
  • grid - hidden columns and storing size in cookies fixed
  • grid - prevent double initialization of connectors fixed
  • grid - regression in onDynXLS handling fixed
  • grid - scrolling in Firefox in split mode fixed
  • grid - height of editor for split mode fixed
  • grid - colors in grid's serialization fixed
  • grid - combo exCell returned title instead of the value fixed
  • layout - hideHeader fixed if cell has a nested layout
  • menu - context-menu overlay browser edge fixed
  • menu - context-menu base id fixed according to web standards
  • menu - visible area calculation fixed
  • popup - double calendar support added for popup
  • ribbon - getCombo added
  • ribbon - removeItem ignores non-existing ids fixed
  • ribbon - slider position fixed
  • sidebar - unload fixed
  • sidebar - terrace skin padding removed
  • tabbar - missing content in tab on iOS 7.x fixed
  • toolbar - setListOptionImage fixed
  • toolbar - buttonSelect options overlay fixed
  • tree - regression in setItemTopOffset fixed
  • windows - allow_move fixed for ie10/11
  • windows - touch highlighting fixed in ie10/11
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DHTMLX 4.5 - Full List of Changes DHTMLX Docs

Documentation
  • DHTMLX 4.1 - Full List of Changes
  • DHTMLX 4.2 - Full List of Changes
  • DHTMLX 4.3 - Full List of Changes
  • DHTMLX 4.5 - Full List of Changes
  • DHTMLX 5.0 - Full List of Changes
  • DHTMLX 5.1 - Full List of Changes
  • Migration to Newer Versions
Start DHTMLX What's New

DHTMLX 4.5 - Full List of Changes

Major changes

  • a new component dhtmlxList is added (docs, demos)
  • a new demo shows how to create fully responsive web applications
  • combo - demo with multicolumn+subload added
  • form - type:image added (docs, demo)
  • sidebar - header and autohide mode added (demo)

Main fixes and updates

  • accordion - param added for open and close methods to trigger onActive events
  • accordion - setText fixed
  • calendar - css for hover item fixed when calendar is closed
  • calendar - positioning fixed if no space is available, some native functions are replaced with common
  • carousel - scroll with touch events enable/disable added
  • chart - canvas clearing fixed
  • chart - displaying tooltips in case of series overlapping fixed
  • chart - image items for line and radar charts added
  • chart - labelLines for Pie chart added
  • chart - seriesMargin and seriesPadding for "bar" and "barH" charts added
  • colorpicker - gradient fixed for win_safari
  • combo - special html characters and spaces rendering inside options fixed
  • common - dhtmlxAjax added (3.6 compat)
  • dataview - ability to adjust item size to a container added
  • dataview - json dynamic loading fixed
  • editor - getComputedStyle fixed (sometimes it throws an error)
  • form - calendar setValue fixed if form binded to grid
  • form - calendar value fixed when it was changed and calendar was hidden by custom script
  • grid - cell.getBgColor API fixed
  • grid - css options for combo options in the grid fixed
  • grid - double processing of onDistributedEnd event fixed
  • grid - grid in srnd mode, without using load API fixed
  • grid - header styles for grid with colspans fixed
  • grid - image cell and smart-rendering mode fixed
  • grid - incorrect change flag for dhxCalendar editor fixed
  • grid - incorrect colspan for the left part of split grid fixed
  • grid - incorrect scroll position in smart rendering mode fixed
  • grid - invalid row rendering in very huge grids fixed
  • grid - key maps in split mode fixed
  • grid - missed parameters in saveSortingToCookie call fixed
  • grid - multiselection and export to excel fixed
  • grid - row selection and export in excel fixed
  • grid - saving state of hidden columns in IE fixed
  • grid - server side filtering and slow scripts fixed
  • grid - smart rendering for huge grids fixed
  • grid - tab-behavior in excel keymap for split mode fixed
  • layout - cell min width/height calculation fixed for nested layout
  • menu - polygon height calculation fixed
  • ribbon - loop through array fixed (for prototypejs compat)
  • ribbon - setText for type:text fixed
  • slider - dnd for touch/android fixed
  • tabbar - removing tab clears actv flag fixed
  • tabbar - setTabActive fixed according 3.6 compat (deprecated)
  • tabbar - tabs area width calculation improved
  • toolbar - action="action" fixed for ipad
  • toolbar - onButtonSelectShow / onButtonSelectHide events added
  • windows - body.css clear fixed
  • windows - iframe cover for IE fixed for dnd mode
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DHTMLX 5.0 - Full List of Changes DHTMLX Docs

Documentation
  • DHTMLX 4.1 - Full List of Changes
  • DHTMLX 4.2 - Full List of Changes
  • DHTMLX 4.3 - Full List of Changes
  • DHTMLX 4.5 - Full List of Changes
  • DHTMLX 5.0 - Full List of Changes
  • DHTMLX 5.1 - Full List of Changes
  • Migration to Newer Versions
Start DHTMLX What's New

DHTMLX 5.0 - Full List of Changes

Major changes

  • Font Awesome support added for accordion/menu/ribbon/toolbar/treegrid
  • a new component dhtmlxTreeView added (docs, demos)
  • a new Material skin added
  • window.dhx variable (instead of window.dhx4)

Main fixes and updates

  • calendar - ability to show calendar next to input
  • chart - origin 0 for stackedBar added
  • combo - html rendering removed for image and checkbox
  • combo - regex parsing fixed for filtering
  • combo - unsync and unbind for dhtmlxCombo fixed
  • editor - getContent fixed for Chrome
  • form - validation fixed for type:radio
  • grid - column styling in header area with colspans fixed
  • grid - combo in grid and non-xml data types fixed
  • grid - correct row height for split grid initialized from HTML
  • grid - correctly escaped quote in the CSV parser
  • grid - custom modes for dataprocessor improved
  • grid - memory leak during column resize fixed
  • grid - mouse wheel scrolling in split grid fixed
  • grid - the onCheck event for master checkbox fixed
  • grid - position of elements in open subrow fixed
  • grid - radio buttons in split grid fixed
  • grid - selectBlock API added
  • grid - sizing in split mode fixed
  • grid - styling of grid header during drag-n-drop fixed
  • grid - subrows can't corrupt userdata serialization
  • grid - using adjustColumnSize in grid with colspans and rowspans fixed
  • grid - using custom skins in split mode fixed
  • layout - attachSidebar fixed for terrace skin
  • list - missed scroll in attached list fixed
  • message - glitch in skyblue skin fixed
  • message - styling improved
  • popup - keep popup visible on row select if grid attached to a form inside
  • sidebar - autohide animation fixed
  • tabbar - onload attribute for api-init fixed
  • tabbar - tab close button fixed
  • toolbar - clicks on touch-devices fixed
  • tree - data serialization in IE11 fixed
  • tree - lockItem doesn't block item opening fixed
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DHTMLX 5.1 - Full List of Changes DHTMLX Docs

Documentation
  • DHTMLX 4.1 - Full List of Changes
  • DHTMLX 4.2 - Full List of Changes
  • DHTMLX 4.3 - Full List of Changes
  • DHTMLX 4.5 - Full List of Changes
  • DHTMLX 5.0 - Full List of Changes
  • DHTMLX 5.1 - Full List of Changes
  • Migration to Newer Versions
Start DHTMLX What's New

DHTMLX 5.1 - Full List of Changes

Major changes

  • TypeScript support for all components
  • promise API for Ajax-requests (all components)
  • JSON data loading for all components
  • JSON-REST data saving with DataProcessor

Main Updates

  • common - load methods of data components return promise
  • form - the loadStructHTML API for the Form
  • formuploader - the onBeforeFileUpload event
  • grid - a new row operation getRowData API
  • grid - getCellExcellType API
  • grid - better text size adjusting
  • grid - the ability to pass a config object to the attachGrid() method
  • treeview - onClick, onDblClick events for TreeView
  • treeview - showItem API
  • window - a window triggers onResizeFinish after min|max operations

Main Fixes

  • calendar - a week number for the last week of the year
  • calendar - onChange event for a Calendar in the Toolbar
  • cell - invalid processing of detached URLs
  • chart - memory leaks in the Chart
  • combo - autocomplete for Combo in the Grid
  • common - onXLE and onXLS event for loadStruct()
  • datastore - regression in ID sync between a DataStore and a Scheduler
  • dataview|list - multiselect for MacBook
  • form - getInput() for non-input types
  • form - getItem() works for a checkbox now
  • grid - combo cell in a split Grid
  • grid - Combo in Grid while loading data by POST
  • grid - correct getValue() for an empty "dyn" cell
  • grid - deleting a row with checked radio button in a Grid
  • grid - dynamic data loading in the JSON mode
  • grid - filters and null values in JSON data
  • grid - Grid in the split multiline mode and filters
  • grid - locked rows in the split mode
  • grid - memory leak in dhtmlxGrid
  • grid - options for a Grid synced to a DataStore
  • grid - selectBlock() function fix
  • grid - sorting of the co/coro columns
  • grid - tabbing in the Grid with block selection
  • grid - x-scrolling in Google Chrome
  • layout - tooltip for Layout's cells
  • menu - hide Context Menu after click in the Grid
  • menu - using Context Menu with DOM objects
  • menu - using icons in Menu with inline data
  • popup - Grid in the Layout attached to a Popup. Row selecting problem.
  • toolbar - clearAll() and spacer in Toolbar
  • treegrid - select filters and options from Tree cell
  • treeview - clearAll() in TreeView
  • treeview - drag-n-drop in the zoomed state
  • treeview - folder icon after deleting all child items
  • treeview - missed method deleteChildItems() in the TreeView API
  • window - regression in Context Menu behavior on IE
Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


Migration to Newer Versions DHTMLX Docs

Documentation
  • DHTMLX 4.1 - Full List of Changes
  • DHTMLX 4.2 - Full List of Changes
  • DHTMLX 4.3 - Full List of Changes
  • DHTMLX 4.5 - Full List of Changes
  • DHTMLX 5.0 - Full List of Changes
  • DHTMLX 5.1 - Full List of Changes
  • Migration to Newer Versions
    • 4.6.1 -> 5.0
    • 4.3 -> 4.4
    • 3.6 -> 4.1
    • 3.6 -> 4.0
Start DHTMLX What's New

Migration to Newer Versions

4.6.1 -> 5.0

Tree => TreeView

Starting from version 5.0, the Tree component is replaced with the TreeView one. Tree will still be supported, but we highly recommend to use TreeView instead.

window.dhx4 => window.dhx

In the version 5.0 the window.dhx4 variable is replaced with the window.dhx one.

4.3 -> 4.4

Since version 4.4, some load methods of Grid and Tree were deprecated. You can find the details of their new usage below:

Grid

Up to version 4.3 | From version 4.4
Function names changed
myGrid.loadCSV(csvFile, afterCall, "csv") | myGrid.load(csvFile, afterCall, "csv")
myGrid.loadCSVString(csvString, afterCall, "csv") | myGrid.parse(csvString, "csv")
myGrid.loadJSArrayFile(jsarrayFile, afterCall, "jsarray") | myGrid.load(jsarrayFile, afterCall, "jsarray")
myGrid.loadJSArray(JSArray, afterCall "jsarray") | myGrid.parse(JSArray, "jsarray")
myGrid.loadJSON(jsonFile, afterCall, "json") | myGrid.load(jsonFile, afterCall, "json")
myGride.loadJSONObject(jsonObject, afterCall, "json") | myGrid.parse(jsonObject, "json")
myGrid.loadXML(xmlFile, afterCall, "xml") | myGrid.load(xmlFile, afterCall, "xml")
myGrid.loadXMLString(xmlString, afterCall,"xml") | myGrid.parse(xmlString, "xml")

Tree

Up to version 4.3 | From version 4.4
Function names changed
myTree.loadCSV(csvFile, afterCall, "csv") | myTree.load(csvFile, afterCall, "csv")
myTree.loadCSVString(csvString, afterCall, "csv") | myTree.parse(csvString, "csv")
myTree.loadJSArrayFile(jsarrayFile, afterCall, "jsarray") | myTree.load(jsarrayFile, afterCall, "jsarray")
myTree.loadJSArray(JSArray, afterCall "jsarray") | myTree.parse(JSArray, "jsarray")
myTree.loadJSON(jsonFile, afterCall, "json") | myTree.load(jsonFile, afterCall, "json")
myTree.loadJSONObject(jsonObject, afterCall, "json") | myTree.parse(jsonObject, "json")
myTree.loadXML(xmlFile, afterCall, "xml") | myTree.load(xmlFile, afterCall, "xml")
myTree.loadXMLString(xmlString, afterCall,"xml") | myTree.parse(xmlString, "xml")

3.6 -> 4.1

Changes in Ajax API

dhtmlxAjax => ajax

Instead of dhtmlxAjax you should use dhx.ajax for ajax operations. See dhtmlxAjax API for details.

Handling errors

Instead of dhtmlxError.catchError you should use onLoadXMLError handler.

XPath

Similar to doXpath in older version of API you can use xmltop and xpath methods

var root = dhx.ajax.xmltop("rows", xml_object);
var nodes = dhx.ajax.xpath(xpath_expression, root_node);
  • "rows" - name of root XML tag
  • xml_object - raw xml object, result of dhx.ajax
  • xpath_expression - path expression used to select nodes or node-sets in XML
  • root_node - node from which XPath will be applied, you can use xmltop to get it

3.6 -> 4.0

Changes in the content of package

From version 4.0 the codebase folder contains the dhtmlx.js and dhtmlx.css files - the compilation of all dhtmlx components. So instead of including separate js files for each component you can include a single .js and a single .css files.

The default skin is "skyblue". To set a different skin you need to include the related css file - skins/web/dhtmlx.css for the "web" skin or skins/terrace/dhtmlx.css for the "terrace" skin.

You don't need to include the files dhtmlxdataprocessor.js and connector.js additionally, as they're part of the dhtmlx.js file.

Including separate files

1) If you need separate js files for some components, you can take them from the
sources/{component name}/codebase folders.

In the version 3.6 the file dhtmlxcommon.js was placed in the folder of each component separately. Now you can find this file in sources/dhtmlxCommon/codebase. The files dhtmlxdataprocessor.js, connector.js and dhtmlxcontainer.js are also located here.

2) To use styles and skins for Grid in the version 3.6 you should have included the file dhtmlxgrid.css together with one of the skin files from codebase/skins/ folder, such as dhtmlxgrid_dhx_skyblue.css, for example.

Now the only thing you should do is to include one of the css files from sources/dhtmlxGrid/codebase/skins/dhtmlxgrid_skin_name.css.

3) The components Chart and DataView require the file dhtmlxcore.js to be included instead of the dhtmlxcommon.js file.

4) Since version 4.0 you don't need to include any additional extensions on the page. All of them are included into dhtmlx.js.

Common principles of API migration

1) In the new version of DHTMLX Library the names of some methods were changed. We've made these changes as the previous names of the methods under question didn't reflect their functionality precisely, which could cause ambiguity or misunderstanding.

2) Since the release of the latest version of DHTMLX library some functionality has been removed. It was made as this functionality is no longer needed and therefore isn't supported.

3) Functionality moved from object to object

There were changes in the methods of layout components (Layout, Windows, Accordion, Tabbar). It concerns the methods that don't operate on the components in whole, but affect their cells (windows, tabs) directly.

Such methods have earlier been called through myLayout object and now they are called through myLayout.cells() object. Be careful, as the names of these methods are also changed to more logical ones.

4) In the version 4.0 the methods loadXML() and loadXMLString() are replaced by the methods load and loadStruct. The load() method loads data to the component via xml or json and the loadStruct() method loads component's configuration via xml or json.

These new methods send POST request by default, and to prevent caching in some browsers extra param like "dhxr0123456789" is added. To disable this additional param, set the cache property to true: dhx.ajax.cache=true.

To send GET request instead of POST the property method is used: dhx.ajax.method = "get".

Accordion

Up to version 3.6 | From version 4.0
Function names changed
myAcc.loadJSON(data, callback) | myAcc.loadStruct(data, callback)
myAcc.loadXML(data, callback) | myAcc.loadStruct(data, callback)
myAcc.setSkinParameters(ofsBetween, ofsCont) | myAcc.setOffset(ofsBetween)
Functionality was removed
myAcc.setEffect(mode) | Since 4.0 effects are enabled for modern browsers by default
Functionality moved from object to object
myAcc.setIcon(id, icon) | myAcc.cells(id).setIcon(icon)
myAcc.clearIcon(id) | myAcc.cells(id).clearIcon()
myAcc.setActive(id) | myAcc.cells(id).open()
myAcc.isActive(id) | myAcc.cells(id).isOpened()
myAcc.openItem(id) | myAcc.cells(id).open()
myAcc.closeItem(id) | myAcc.cells(id).close()
myAcc.moveOnTop(id) | myAcc.cells(id).moveOnTop()
myAcc.setItemHeight(id,h) | myAcc.cells(id).setHeight(h)
myAcc.setText(id,text) | myAcc.cells(id).setText(text)
myAcc.getText(id) | myAcc.cells(id).getText()
myAcc.showItem(id) | myAcc.cells(id).show()
myAcc.hideItem(id) | myAcc.cells(id).hide()
myAcc.isItemHidden(id) | myAcc.cells(id).isVisible()

Cell

Views functionality was changed:

Until 3.6 you could attach components to a view without switching to it:

dhxComponent.cells(id).view(name).attachMenu();
dhxComponent.cells(id).view(name).attachGrid();
dhxComponent.cells(id).view(name).setActive();

Starting from 4.0, firstly you need to show a view and then attach components to it:

// firstly make a view active
dhxComponent.cells(id).showView(name);
// then attach any components
dhxComponent.cells(id).attachMenu();
dhxComponent.cells(id).attachGrid();

ColorPicker

Up to version 3.6 | From version 4.0
Function names changed
new dhtmlXColorPickerInput() | new dhtmlXColorPicker()
myColorPicker.setOnSelectHandler(function(){}) | myColorPicker.attachEvent("onSelect", function(){})
myColorPicker.setOnCancelHandler(function(){}) | myColorPicker.attachEvent("onCancel", function(){})
window.dhtmlxColorPickerLangModules | dhtmlXColorPicker.prototype.i18n
myColorPicker.close() | myColorPicker.hide()
Functionality was removed
myColorPicker.init() | initialized automatically
myColorPicker.setImagePath(path) | no longer used

Combo

Up to version 3.6 | From version 4.0
Function names changed
myCombo.loadXML(url, call) | myCombo.load(url, call)
myCombo.loadXMLString(url, call) | myCombo.load(url, call)
myCombo.destructor() | myCombo.unload()
Functionality was removed
myCombo.enableOptionAutoHeight() | adjusted automatically
myCombo.enableOptionAutoPositioning()
myCombo.enableOptionAutoWidth()
myCombo.setOptionHeight()
myCombo.render() | rendered automatically
myCombo.attachChildCombo() | Related sample: Grouping combos
myCombo.setAutoSubCombo()

Grid

From version 4.0 the files dhtmlxgrid.js and dhtmlxgridcell.js are united into one file named dhtmlxgrid.js.

Layout

Up to version 3.6 | From version 4.0
Functions' names changed
myLayout.listViews() | myLayout.listPatterns()
Functionality was removed
myLayout.setEffect() | Since 4.0 effects are enabled for modern browsers by default
myLayout.getEffect()
myLayout.setImagePath() | Used for windows, since 4.0 windows don't use imagePath, icons can be set in css
Functionality moved from object to object
myLayout.dockWindow(id) | myLayout.cells(id).dock()
myLayout.unDockWindow(id) | myLayout.cells(id).undock()
myLayout.setCollapsedText(id, text) | myLayout.cells(id).setCollapsedText(text)
myLayout.showPanel(id) | myLayout.cells(id).showHeader()
myLayout.hidePanel(id) | myLayout.cells(id).hideHeader()
myLayout.isPanelVisible(id) | myLayout.cells(id).isHeaderVisible()

Access to cells by index removed

Layout has a possibility to access cells by id - myLayout.cells(id) or by index - myLayout.items[]. Until 3.6 both methods had used to get cell object, since version 4.0 we've kept only accessing cells by id. The access to cells by index still works if the file "dhtmlxlayout_deprecated.js" is included on the page.

Up to version 3.6 | From version 4.0
Access to cells by index
myLayout.cells(id).getIndex() |
myLayout.getIdByIndex(index) |
myLayout.getIndexById(id) |
myLayout.items[] (array) |

Offsets (margins)

In all layout versions there is a possibility to set offsets (margins). They are mostly used in full-screen init type. We haven't removed this functionality but updated the used techniques.

Old techniques (all versions up to 3.6):

// init
var myLayout = new dhtmlXLayoutObject(document.body, "3L");

// modify some private properties
myLayout.cont.obj._offsetTop = 10; // top margin
myLayout.cont.obj._offsetLeft = 10; // left margin
myLayout.cont.obj._offsetHeight = -20; // bottom margin
myLayout.cont.obj._offsetWidth = -20; // right margin

// adjust size
myLayout.setSizes();

New techniques (from version 4.0):

// on init stage
var myLayout = new dhtmlXLayoutObject({
    parent: document.body,
    pattern: "3L",
    offsets: {
        top: 10,
        right: 20,
        bottom: 30,
        left: 40
    }
});

// at any place in the code
myLayout.setOffsets({
    top: 10,
    right: 20,
    bottom: 30,
    left: 40
});

Events

Until the version 3.6 layout had the event onResize. If layout was attached to a window, this event was called after the window was resized. Starting from the version 4.0 the event onResizeFinish should be used instead.

myLayout.attachEvent("onResizeFinish", function(){
    // your code here
});

Related sample: onResizeFinish event

Menu

Up to version 3.6 | From version 4.0
Function names changed
myMenu.loadXML(xmlFile, onLoad) | myMenu.loadStruct(xmlFile, onLoad)
myMenu.loadXMLString(xmlString, onLoad) | myMenu.loadStruct(xmlString, onLoad)
Functionality was removed
myMenu.setIconPath(path) | myMenu.setIconsPath(path)
myMenu.setImagePath() | myMenu.setIconsPath(path)

Slider

Up to version 3.6 | From version 4.0
Function names changed
new dhtmlxSlider() | new dhtmlXSlider()
mySlider.setOnChangeHandler(function(){}) | mySlider.attachEvent("onChange", function(){})
Functionality was removed
mySlider.init() | no longer used, initialized on constructor stage
mySlider.setImagePath() | no longer used

Tabbar

Up to version 3.6 | From version 4.0
Function names changed
myTabbar.destructor() | myTabbar.unload()
myTabbar.adjustOuterSize() | myTabbar.setSizes()
myTabbar.loadXML(url, onLoad) | myTabbar.loadStruct(url, onLoad)
myTabbar.loadXMLString(xmlString, onLoad) | myTabbar.loadStruct(xmlString, onLoad)
myTabbar.attachEvent("onTabContentLoaded", function(id){}) | myTabbar.attachEvent("onContentLoaded", function(id){})
myTabbar.setOnSelectHandler(tabClicked) | myTabbar.attachEvent(("onSelect", function(tabClicked){})
Functionality was removed
myTabbar.normalize() | code improved
myTabbar.setStyle() | controlled by skin
myTabbar.setImagePath() | all images moved to css
myTabbar.setSkinColors() | controlled by skin
myTabbar.enableScroll() | code improved
myTabbar.enableForceHiding() | code improved
myTabbar.enableAutoSize() | code improved
myTabbar.setCustomStyle(id, style) | you can use html for tabs(id).setText()
myTabbar.setMargin() | controlled by skin
myTabbar.setOffset() | controlled by skin
myTabbar.setSize(x, y) | you need to change parent container's width/height and then call myTabbar.setSizes()
myTabbar.setHrefMode(mode) | url or ajax via myTabbar.tabs(id).attachURL()
Functionality moved from object to object
myTabbar.setContent(id, value) | myTabbar.tabs(id).attachObject(value)
myTabbar.setContentHTML(id, value) | myTabbar.tabs(id).attachHTMLString(value)
myTabbar.tabWindow(id) | myTabbar.tabs(id).getFrame()
myTabbar.showInnerScroll(id) | myTabbar.tabs(id).showInnerScroll()
myTabbar.hideTab(id, mode) | myTabbar.tabs(id).hide(mode)
myTabbar.showTab(id, mode) | myTabbar.tabs(id).show(mode)
myTabbar.enableTab(id) | myTabbar.tabs(id).enable()
myTabbar.disableTab(id) | myTabbar.tabs(id).disable()
myTabbar.getIndex(id) | myTabbar.tabs(id).getIndex()
myTabbar.getLabel(id) | myTabbar.tabs(id).getText()
myTabbar.setLabel(id, text) | myTabbar.tabs(id).setText(text)
myTabbar.setTabActive(id) | myTabbar.tabs(id).setActive()
myTabbar.removeTab(id) | myTabbar.tabs(id).close()
myTabbar.forceLoad(id) | myTabbar.tabs(id).reloadURL()
myTabbar.setContentHref(id, href) | myTabbar.tabs(id).attachURL(href, mode)

Toolbar

Up to version 3.6 | From version 4.0
Function names changed
myToolbar.loadXML(xmlFile, onLoad) | myToolbar.loadStruct(xmlFile, onLoad)
myToolbar.loadXMLString(xmlString, onLoad) | myToolbar.loadStruct(xmlString, onLoad)
myToolbar.setIconPath(path) | myToolbar.setIconsPath(path)

Windows

Up to version 3.6 | From version 4.0
Functionality was removed
myWins.enableAutoViewport() | called automatically inside attachViewportTo()
myWins.setImagePath() | no longer used
myWins.setEffect() | Since 4.0 effects are enabled for modern browsers by default
myWins.getEffect()
myWins.window(id).setIcon() | myWins.window(id).setIconCss(css)
myWins.window(id).getIcon()
myWins.window(id).restoreIcon()
myWins.window(id).clearIcon()

before 3.6 there were "minmax1" and "minmax2" button names for "maximize/minimize" button, since 4.0 the common name "minmax" is used

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers


DHTMLX Skin Builder 4.x DHTMLX Docs

Documentation
  • DHTMLX Skin Builder 4.x
    • Working with Skin Builder
    • Loading a custom skin
    • Link to the ready skin
Start

DHTMLX Skin Builder 4.x

The latest version of Skin Builder is the improved online tool for creating the unique appearance of your app.

Working with Skin Builder

You can create your own skin by modifying any existing one.

There are several steps you need to complete:

1) First of all, choose the base skin: SkyBlue, Web or Terrace.

2) Then you can either select one of the available preset color schemes from the list or create your own one.

For creating your own color scheme you can adjust color/font settings, and the preview will be reloaded with the new settings automatically.

Here's the list of skin settings:

Header colors

  • Base - the base color of the skin;
  • Font - the base font color;
  • Border - the color of the borders;
  • Panel Font - the font color of the text in the panels.

Cell colors

  • Font - the font color of the text in cells;
  • Background - the color of the cells background.

Selection colors

  • Border - the color of the selected row's border;
  • Background - the color of the selected row's background;
  • Font - the color of the selected row's font text.

Font settings

  • Family - the type of the used font family;
  • Size - the used font size in pixels;
  • Disabled - the color of the disabled elements' text.

Advanced Settings

Since the version 4.1, the Advanced block of settings has appeared. It includes:

  • Tree Line - the height of dhtmlxTree line in pixels;
  • Grid Row - the height of dhtmlxGrid row in pixels;
  • Form - the vertical spacing between form elements.

3) Once your skin is ready, you can apply it to your app.

For this purpose, do the following:

  • Click the "Download" button to get a zip file with all necessary files (css and images);
  • In the "codebase" folder remove (or rename) the default/current dhtmlx.css file and the "imgs" folder;
  • Unzip the downloaded zip archive into the "codebase" folder (new css and images);
  • To define the skin in your application code, use the name of the base skin (SkyBlue, Web, Terrace) in the setSkin() method. You can also just omit setSkin() method as the DHTMLX library has a built-in skin detector.

Loading a custom skin

It's possible to load a ready custom skin created in versions 3.x and 4.x into Skin Builder to fill the form with data from the uploaded dhtmlx.css. Once the file is uploaded, you'll be able to continue working with the data (colors and fonts) you've entered earlier.

To upload your custom dhtmlx.css, click the "Load your CSS" button and choose the necessary dhtmlx.css file.

After you've made the necessary changes, you can download a zip file with the updated skin by clicking the "Download" button.

Link to the ready skin

You can quickly modify your skin, if needed. There's a readme.txt file inside of dhtmlx.zip generated by Skin Builder. Here you can find the link which will load you skin data into the form.

Back to top
  • Suite Components
  • Accordion
  • Calendar
  • Carousel
  • Chart
  • ColorPicker
  • Combo
  • DataView
  • Form
  • Grid
  • Layout
  • List
  • Menu
  • Popup
  • Ribbon
  • Sidebar
  • Slider
  • Tabbar
  • Toolbar
  • TreeGrid
  • TreeView
  • Windows
  • Other Components
  • Diagram
  • Gantt
  • Pivot
  • RichText
  • Scheduler
  • SpreadSheet
  • Vault
  • Data Saving
  • DataStore
  • DataProcessor
  • PHP connector
  • Java connector
  • .Net connector
  • ColdFusion
  • Tools&Helpers